刘华世的官方博客

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>

posted @ 2015-09-12 14:21  刘华世的博客  阅读(2160)  评论(0)  编辑  收藏  举报
刘华世的官方博客