php后管理分类导航菜单

<!DOCTYPE><html><head>    <meta http-equiv="Content-type" content="text/html" charset="utf-8">    <title>后台管理折叠导航菜单</title>    <style>        body{            margin:0;            padding:0;            text-align:center;            font:normal 12px Arial,Verdana,Tahoma;            line-height:150%;        }        a:link, a:visited{            color:#385065;            text-decoration:none;        }        a:hover{            text-decoration:underline;        }        #menu{            width:150px;            margin:0 15px;            padding:0;            text-align:left;            list-style:none;        }        #menu .item{            background:#ccaaee;            padding:0px;            list-style:none;            border:1px solid #eee;        }        a.title:link, a.title:visited, a.title:hover{            display:block;            color:#385065;            font-weight:bold;            padding:2px 0 0 22px;            width:128px;            line-height:23px;            cursor:pointer;            text-decoration:none;        }        #menu .item ul{            border:1px solid #9facb7;            margin:0;            width:116px;            padding:3px 0px 3px 30px;            bakground:#fff;            list-style:none;            display:none;        }        #menu .item ul li{            display:block;        }    </style>    <script type="text/javascript">        function hideAllObj(){            var items = document.getElementsByClassName("option");            for(var j=0; j<items.length; j++){                items[j].style.display = "none";            }        }        function check(){            document.getElementById("opt_1").style.display = "block";            var items = document.getElementsByClassName("title");            for(var j=0; j<items.length; j++){                items[j].onclick = function(){                    var obj = document.getElementById("opt_" + this.name);                    if(obj.style.display != "block"){                        hideAllObj();                        obj.style.display = "block";                    }else{                        obj.style.display = "none";                    }                }            }        }        document.getElementsByClassName=function(classname){            var retnode = [];            var myclass = new RegExp('\b'+classname+'\b');            var elem = this.getElementsByTagName('*');            for(var j=0; j<elem.length; j++){                var classes = elem[j].className;                if(myclass.test(classes)){                    retnode.push(elem[j]);                }            }            return retnode;        }    </script></head><body onload="check()"><ul id="menu">    <li class="item"><a href="javascript：void(0)" class="title" name="1">用户管理</a>    <ul id="opt_1" class="option">        <li><a href="#">添加用户</a></li>        <li><a href="#">管理用户</a></li>    </ul>    </li>   <li class="item"><a href="javascript：void(0)" class="title" name="2">用户管理</a>    <ul id="opt_2" class="option">        <li><a href="#">添加用户</a></li>        <li><a href="#">管理用户</a></li>    </ul>    </li>   <li class="item"><a href="javascript：void(0)" class="title" name="3">用户管理</a>    <ul id="opt_3" class="option">        <li><a href="#">添加用户</a></li>        <li><a href="#">管理用户</a></li>    </ul>    </li>   <li class="item"><a href="javascript：void(0)" class="title" name="4">用户管理</a>    <ul id="opt_4" class="option">        <li><a href="#">添加用户</a></li>        <li><a href="#">管理用户</a></li>    </ul>    </li></ul></body></html>
爱程序网

Tags：php后管理分类导航菜单
