<!DOCTYPE> <html> <head> <meta http-equiv="Content-type" c charset="utf-8"> <title>后台管理折叠导航菜单</title> <style><span> body{ margin</span>:0<span>; padding</span>:0<span>; text</span>-align:<span>center; font</span>:normal 12px Arial,Verdana,<span>Tahoma; line</span>-height:150%<span>; } a</span>:link, a:<span>visited{ color</span>:<span>#</span><span>385065;</span> text-decoration:<span>none; } a</span>:<span>hover{ text</span>-decoration:<span>underline; } </span><span>#</span><span>menu{</span> width:<span>150px; margin</span>:0<span> 15px; padding</span>:0<span>; text</span>-align:<span>left; </span><span>list</span>-style:<span>none; } </span><span>#</span><span>menu .item{</span> background:<span>#</span><span>ccaaee;</span> padding:<span>0px; </span><span>list</span>-style:<span>none; border</span>:1px solid <span>#</span><span>eee;</span><span> } a</span>.title:link, a.title:visited, a.title:<span>hover{ display</span>:<span>block; color</span>:<span>#</span><span>385065;</span> font-weight:<span>bold; padding</span>:2px 0 0<span> 22px; width</span>:<span>128px; line</span>-height:<span>23px; cursor</span>:<span>pointer; text</span>-decoration:<span>none; } </span><span>#</span><span>menu .item ul{</span> border:1px solid <span>#</span><span>9facb7;</span> margin:0<span>; width</span>:<span>116px; padding</span>:<span>3px 0px 3px 30px; bakground</span>:<span>#</span><span>fff;</span><span>list</span>-style:<span>none; display</span>:<span>none; } </span><span>#</span><span>menu .item ul li{</span> display:<span>block; } </span></style> <script type="text/javascript"> <span>function</span><span> hideAllObj(){ </span><span>var</span> items = document.getElementsByClassName("option"<span>); </span><span>for</span>(<span>var</span> j=0; j<items.length; j++<span>){ items[j]</span>.style.display = "none"<span>; } } </span><span>function</span><span> check(){ document</span>.getElementById("opt_1").style.display = "block"<span>; </span><span>var</span> items = document.getElementsByClassName("title"<span>); </span><span>for</span>(<span>var</span> j=0; j<items.length; j++<span>){ items[j]</span>.onclick = <span>function</span><span>(){ </span><span>var</span> obj = document.getElementById("opt_" + this.<span>name); </span><span>if</span>(obj.style.display != "block"<span>){ hideAllObj(); obj</span>.style.display = "block"<span>; }</span><span>else</span><span>{ obj</span>.style.display = "none"<span>; } } } } document</span>.getElementsByClassName=<span>function</span><span>(classname){ </span><span>var</span> retnode =<span> []; </span><span>var</span> myclass = <span>new</span> RegExp('\\b'+classname+'\\b'<span>); </span><span>var</span> elem = this.getElementsByTagName('*'<span>); </span><span>for</span>(<span>var</span> j=0; j<elem.length; j++<span>){ </span><span>var</span> classes = elem[j].<span>className; </span><span>if</span>(myclass.<span>test(classes)){ retnode</span>.<span>push(elem[j]); } } </span><span>return</span><span> retnode; } </span></script> </head> <body >class</span>="item"><a <span>class</span>="title" name="1">用户管理</a> <ul <span>class</span>="option"> <li><a href="#">添加用户</a></li> <li><a href="#">管理用户</a></li> </ul> </li> <li <span>class</span>="item"><a <span>class</span>="title" name="2">用户管理</a> <ul <span>class</span>="option"> <li><a href="#">添加用户</a></li> <li><a href="#">管理用户</a></li> </ul> </li> <li <span>class</span>="item"><a <span>class</span>="title" name="3">用户管理</a> <ul <span>class</span>="option"> <li><a href="#">添加用户</a></li> <li><a href="#">管理用户</a></li> </ul> </li> <li <span>class</span>="item"><a <span>class</span>="title" name="4">用户管理</a> <ul <span>class</span>="option"> <li><a href="#">添加用户</a></li> <li><a href="#">管理用户</a></li> </ul> </li> </ul> </body> </html>
以上就介绍了php后管理分类导航菜单,包括了方面的内容,希望对PHP教程有兴趣的朋友有所帮助。