Using a drop-down menu Jquery sliding movement and steering arrow

1. introduction

2.HTML Code

Ul tag to set the above mentioned id: left_item , to set up img id: item_img

 1 <!-- 中间左边开始 -->
 2             <div class="tpl-left-nav fl">
 3                 <ul class="tpl-left-nav-item" id="left_item">
 4                     <li>
 5                         <a href="#">我的下拉菜单</a>
 6                         <img id="item_img" class="fr" src="images/arr-right.png">
 7                     </li>
 8                 </ul>
 9                 <div id="left_menu">
10                     <ul class="tpl-left-nav-menu">
11                         <li><a href="#">菜单1</a></li>
12                         <li><a href="#">菜单2</a></li>
13                         <li><a href="#" class="menu-active">Menu. 3 >Li> </A</
14                          < Li > < A the href = "#" > menu. 4 </ A > </ Li > 
15                          < Li > < A the href = "#" > menu. 5 </ A > </ Li > 
16                      </ UL > 
. 17                  </ div > 
18 is 
. 19              </ div > 
20 is              <-! left middle end ->

3.CSS Code

 1 /* 中间左边开始 */
 2 .tpl-left-nav {
 3     width: 376px;
 4     background-color: #fff;
 5     border-radius: 6px;
 6     padding-top: 21px;
 7     box-shadow: 0px 3px 8px 0px rgba(179, 179, 179, 0.36);
 8     overflow: hidden;
 9 }
10 
11 .tpl-left-nav li {
12     height: 52px;
13     line-height: 52px;
14     width: 100%;
15     padding-left: 45px;
16     font-size: 22px;
17     font-family: MicrosoftYaHei;
18 }
19 
20 .tpl-left-nav .tpl-left-nav-item li {
21     padding-left: 38px;
22 }
23 
24 .tpl-left-nav-item li img {
25     margin-right: 30px;
26     margin-top: 19.5px;
27 }
28 
29 .tpl-left-nav .tpl-left-nav-item li {
30     cursor: pointer;
31     background: rgba(61, 132, 243, 0.1);
32     border-left: 7px solid #3D84F3 !important;
33 }
34 .tpl-left-nav-menu li:hover{
35     background-color: #f5f5f5;
36 }
37 Active-.menu {
 38 is      Color : RGBA (61 is, 132, 243,. 1) ;
 39 }
 40  / * left middle end * /

4.1 JS code (including the rotating arrow)

By rotating transform, using the arrow is determined to achieve rotated back and forth

. 1 <Script type = "text / JavaScript">
 2          / * I classroom folding * / 
. 3          var isTrue = to false ;
 . 4          $ (Document) .ready ( function () { 
. 6              . $ ( "# Left_item") the Click ( function () { / * click my dropdown folding and arrow to switch * / 
. 7                  IF (isTrue) {
 . 8                      isTrue = to false ;
 . 9                      $ ( "# item_img") CSS ( "Transform", "Rotate (0)." ) ;
 10                      $ ( "# left_menu") slideToggle ( "500." );
11                 } else {
12                     isTrue = true;
13                     $("#item_img").css("transform", "rotate(270deg)");
14                     $("#left_menu").slideToggle("500");
15                 }
16             });   
20         });
21     </script>

4.2 JS Code (no rotation arrow)

Visible slideToggle () method of switching elements by using the slide effect (change in height).

1 <Script of the type = "text / JavaScript">
 2          / * I drop down menu * / 
3          $ (the Document) .ready ( function () {
 4              $ ( "# left_item"). The Click ( function () { / * Click I drop-down menus folding * / 
. 5                  $ ( "# left_menu" ) .slideToggle ();
 . 6              });    
 . 7          });
 . 8      </ Script>

5. Finally, the effect of

Using a drop-down menu Jquery sliding movement and steering arrow

Guess you like