Beautiful tree menu, foldable, animated

<Div class = "lmenu"> <ul> <li aid = "26"> <span> <em class = "icoopen"> </em> easy language special course </span> <ul style = "display: none; "> <li aid =" 27 "> <em class =" iconleaf "> </em> webpage filling topic </li> <li aid =" 28 "> <em class = "iconleaf"> </em> webpage packaging topic </li> <li aid = "29"> <em class = "iconleaf"> </em> one-day API Training topic </li> </ul> </li> <li aid = "1"> <span> <em class = "icoclose"> </em> easy language toolkit </ span> <ul style = "display: block; "> <li aid =" 4 "> <em class =" iconleaf "> </em> easy language help documentation </li> <li aid =" 2 "> <em class = "iconleaf"> </em> easy language support library </li> <li aid = "8"> <span> <em class = "icoclose2"> </em> Programming auxiliary </span> <ul> <li aid = "10"> <em class = "iconleaf2"> </em> easy language </li> <li aid = "3 "> <em class =" iconleaf2 "> </em> easy language skin </li> <li aid =" 9 "> <em class =" iconleaf2 "> </em> easy language programming tool </li> </ul> </li> <li aid = "5"> <span> <em class = "icoclose2"> </em> easy language Module </span> <ul> <li aid = "7"> <em class = "iconleaf2"> </em> easy language Module source code </li> <li aid = "6 "> <em class =" iconleaf2 "> </em> easy language finished module </li> </ul> </li> <li aid = "11"> <span> <em class = "icoclose"> </em> easy language source code </span> <ul> <li aid = "17"> <span> <em class = "icoclose2"> </em> easy language industry source code </span> <ul> <li aid = "25"> <em class = "iconleaf2"> </ em> network-related </li> <li aid = "23"> <em class = "iconleaf2"> </em> module controls </li> <li aid = "22 "> <em class =" iconleaf2 "> </em> database class </li> <li aid =" 21 "> <em class =" iconleaf2 "> </em> game and entertainment </li> <li aid = "20"> <em class = "iconleaf2"> </em> multimedia </li> <li aid = "19"> <em class = "iconleaf2"> </em> image </li> <li aid = "18"> <em class = "iconleaf2"> </em> System Tools </li> <li aid = "24"> <em class = "iconleaf2"> </em> industry software </li> </ul> </li> <li aid = "12"> <span> <em class = "icoclose2"> </em> easy language learning routines </span> <ul> <li aid = "15"> <em class = "iconleaf2"> </em> advanced routine </li> <li aid = "16"> <em class = "iconleaf2"> </em> advanced routine </li> <li aid = "14"> <em class = "iconleaf2"> </em> preliminary routine </li> <li aid = "13"> <em class = "iconleaf2"> </em> entry routine </li> </ul> </div> <style> * {margin: 0; padding: 0 ;}. icoopen ,. icoopen2 ,. icoclose ,. icoclose2 ,. iconleaf ,. iconleaf2 ,. lmenu ul li span ,. search-side button {background: url ("doc.png") no-repeat 0 0; width: 9px; height: 9px; top: 9px ;}. lmenu li {list-style: none ;}. lmenu em {display: block; position: absolute; cursor: pointer ;}. icoopen {left: 28px; background-position: 0-39px ;}. icoopen2 {left: 42px; background-position:-46px-88px ;}. icoclose {left: 28px; background-position:-45px-39px ;}. icoclose2 {left: 42px; background-position: 0-88px ;}. iconleaf ,. iconleaf2 {width: 3px; height: 5px; background-position:-87px-41px ;}. iconleaf {left: 47px; top: 11px ;}. iconleaf2 {left: 72px; top: 10px ;}. search-side {width: 250px; border-radius: 5px; position: relative; background-color: # FFFFFF; border: 1px solid # ddd; height: 36px; line-height: 36px ;}. search-side button {background-position: 0 0; border: 0 none; cursor: pointer; display: block; height: 16px; width: 16px; position: relative; left: 11px ;}. search-box input {position: absolute; top: 11px; background-color: transparent; border: medium none; color: # AFB0B0; height: 16px; margin-left: 37px; outline: medium none; width: 200px ;}. lmenu {width: 250px; height: auto; overflow: hidden; font-family: "", Tahoma, Helvetica, "Microsoft Yahei", "", Arial, STHeiti; margin-bottom: 10px; border: 1px solid # ddd; border-radius: 5px ;}. lmenu ul li {position: relative; cursor: pointer ;}. lmenu ul li ul {max-height: 350px; overflow: auto ;}. lmenu ul li ul {height: auto ;}. lmenu ul li span {display: block; width: 100%; height: 28px; line-height: 28px; text-indent: 3em;/* font-weight: bolder; */font-size: 14px; color: # 0E3E5E; border-bottom: 1px solid # D7D7D7; background-position:-46px 0 ;}. lmenu ul li ,. lmenu ul li span {/* background-color: # F7F8F8; */background-color: # FFFFFF; color: #333; text-indent: 5em; font-size: 13px; height: auto; line-height: 28px ;}. lmenu ul li span {background: none ;}. lmenu ul li {border: none; text-indent: 7em; font-size: 12px; font-weight: normal; height: 24px; line-height: 24px ;}</style> <script type = "text/javascript" src = "jquery-1.9.1.js"> </script> <script >$ (function () {loadMenu (function (id) {window. location = '/index. php/index/baoku '+'/id/'+ id + '.html'{}}('li?aid=}'}.css ('background', "# F5F5F5 ");}); /* input a function parameter id, that is, the property aid */function loadMenu (fun_clickAction) on li {/* Event Callback function */clickAction = fun_clickAction; /* first-level menu style */$ (". lmenu> ul> li> span "). prepend ('<em class = "icoclose"> </em>');/* second-level menu style */$ (". lmenu> ul> li "). each (function () {/* check whether a node exists */span = $ (this ). find ("span"); if (span. length) {// span if a node exists. prepend ('<em class = "icoclose2"> </em>');} If else {// has no node, bind event $ (this ). prepend ('<em class = "iconleaf"> </em> '). click (function () {clickAction ($ (this ). attr ('aid ') ;}}});/* Three-Level menu style */$ (". lmenu> ul> li "). prepend ('<em class = "iconleaf2"> </em> '). click (function () {clickAction ($ (this ). attr ('aid ');}); $ (". lmenu ul li span "). click (function () {var ye = $ (this ). find ('em '); classNama = ye. attr ("class"); if (classNama = 'icoclose') {ye. attr ('class', 'icoopen');} else if (classNama = 'icoopen') {ye. attr ('class', 'icoclose');} else if (classNama = 'icoclose2') {ye. attr ('class', 'icoopen2');} else if (classNama = 'icoopen2') {ye. attr ('class', 'icoclose2');} $ (this ). siblings ("ul "). slideToggle ("normal", "swing") ;}) ;}</script>

If you have any questions, please contact me for QQ, 496928838.