php后管理分类导航菜单，php分类导航菜单
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-type" content="text/html" 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 onload="check()">
<ul id="menu">
<li <span>class</span>="item"><a href="javascript:void(0)" <span>class</span>="title" name="1">用户管理</a>
<ul id="opt_1" <span>class</span>="option">
<li><a href="#">添加用户</a></li>
<li><a href="#">管理用户</a></li>
</ul>
</li>
<li <span>class</span>="item"><a href="javascript:void(0)" <span>class</span>="title" name="2">用户管理</a>
<ul id="opt_2" <span>class</span>="option">
<li><a href="#">添加用户</a></li>
<li><a href="#">管理用户</a></li>
</ul>
</li>
<li <span>class</span>="item"><a href="javascript:void(0)" <span>class</span>="title" name="3">用户管理</a>
<ul id="opt_3" <span>class</span>="option">
<li><a href="#">添加用户</a></li>
<li><a href="#">管理用户</a></li>
</ul>
</li>
<li <span>class</span>="item"><a href="javascript:void(0)" <span>class</span>="title" name="4">用户管理</a>
<ul id="opt_4" <span>class</span>="option">
<li><a href="#">添加用户</a></li>
<li><a href="#">管理用户</a></li>
</ul>
</li>
</ul>
</body>
</html>登入後複製
