JS Shrink Menu

：

CSS code:

1 ul{2padding:0;3font-Family:microsoft Yahei;4 }5 ul li{6list-style-Type:none;7 }8.New-menu{9margin-top:0px;Tenmargin-bottom:0px; One } A.New-menu>li{ -margin-bottom:2px; - } the. group-title{ - height:35px; -line-height:35px; -width:100%; +font-size:14px; -padding-left:10px; + background: #F3F5F9; AColor: #333; at Cursor:pointer; - } -. title-minus{ -Background:url (".. /.. /images/leftmenu/minus.png ") no-repeat!important; - } -. title-plus{ inBackground:url (".. /.. /images/leftmenu/plus.png ") no-repeat!important; - } to. title-name{ +margin-left:10px; - } the. title-mark{ *     float: Right; $ height:19px;Panax Notoginsengmargin-top:7px; -line-height:35px; themargin-right:10px; + color: #D1D3DA; A width:21px; the } +.collapse>li{ -Color: #666; $ height:35px; $line-height:35px; -font-Family:microsoft Yahei; -font-size:14px; the Cursor:pointer; -text-Align:left;Wuyiborder-bottom:solid 1px #f8f8f8; thepadding-left:35px; - } Wu.collapse>li:hover{ - color: #3a7dd2; About } $. collapse-active{ - background: #3a7dd2; -Color: #fff!important; -}

JS Code:

1$(function(){2 leftmenu.hideevent ();3 leftmenu.bindevent ();4 });5 6 /**7 * Left directory bar Operation8  */9 varleftmenu={Ten         /** One * Initialize hidden A          */ -Hideevent:function(){ -$ (". Collapse"). CSS ("Display", "block"); the$ ("#first"). Nextall (). Find ("ul"). CSS ("display", "none"); -         }, -Bindevent:function(){ -             /** + * Click events on the main menu -              */ +$ (". Group-title"). On ("click",function() { A                 /*$ (this). The parent (). FIND ("ul"). Slidetoggle (300,function () { at if ($ (this). CSS ("display") = = "None") { - $ (this). Prev (). Find ("#mark"). attr ("Class", "FA fa-plus Title-mark"); - }else{ - $ (this). Prev (). Find ("#mark"). attr ("Class", "FA Fa-minus Title-mark"); -                     } -                 });*/ in                 if($( This). Parent (). FIND ("ul"). CSS ("display") = = "None"){ -$( This). Parent (). FIND ("ul"). Slidedown ("Fast"); to$( This). Find ("#mark"). attr ("Class", "Title-minus Title-mark"); +$( This). Parent (). siblings (). Find ("ul"). Slideup ("Fast"); -$( This). Parent (). siblings (). Find ("#mark"). attr ("Class", "Title-plus Title-mark"); the}Else{ *$( This). Parent (). FIND ("ul"). Slideup ("Fast"); $$( This). Parent (). Find ("#mark"). attr ("Class", "Title-plus Title-mark");Panax Notoginseng                 } -             }); the  +             /** A * Sub-menu click event the              */ +$ (". Collapse>li"). On ("click",function() { -$( This). addclass ("Collapse-active"); $$ (". Collapse>li"). Not ( This). Removeclass ("Collapse-active"); $$ ($ ("iframe") [0]). attr ("src", $ ( This). attr ("Data-href")); -             }); -         } the}

Examples of Use:

1 <ulclass= "New-menu">22<Liclass= "Accordion-group"ID= "First">33<Divclass= "Group-title"><Iclass= "fa fa-database"></I><bclass= "Title-name">First Level Menu A</b><spanID= "Mark"class= "Title-minus Title-mark"></span></Div>44<ulclass= "Collapse">55<binclass= "Collapse-active"Data-href="">6 level 62 Menu a77</Li>88<LiData-href="">9 level 92 Menu BTen10</Li> One11</ul> A12</Li> -13<Liclass= "Accordion-group"> -14<Divclass= "Group-title"><Iclass= "fa fa-cog"></I><bclass= "Title-name">Level One menu B</b><spanID= "Mark"class= "Title-plus Title-mark"></span></Div> the15<ulclass= "Collapse"> -16<LiData-href=""> - level 172 Menu C -18</Li> +19<LiData-href=""> - level 202 Menu D +21st</Li> A  A at23</ul> -24</Li> -25</ul>

Desired icon:

JS Shrink Menu