<!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>

php后管理分类导航菜单的更多相关文章

  1. 分类导航菜单的制作（附源码）--HTML

    不多说,直接贴代码哈!有疑问,可追加评论哈! demo.html: <!DOCTYPE html><html> <head> <title>分类导航菜单 ...

  2. SharePoint 2013技巧分享系列 - 隐藏Blog和Apps左侧导航菜单

    企业内部网中,不需要员工创建Blog或者创建,安装SharePoint应用,因此需要在员工个人Web页面需要隐藏Blog或者Apps导航菜单, 其步骤设置如下: 该技巧适合SharePoint 201 ...

  3. Orchard扩展 自定义后台管理导航菜单 Admin Menu

    金天:学习一个新东西,就要持有拥抱的心态,如果固守在自己先前的概念体系,就会有举步维艰的感觉. 金天:看源码永远是Coder学习的最快捷路径.     看本文需要对Orchard大致体系, 特别是Mo ...

  4. Winfrom 开发系统导航菜单

    先上图看效果在说. 效果图如上,在Web中这个一点难度都没有,几行Css+JS就搞定了.但是在Winfrom中.本来就是半杯水的水准,想做这个个导航菜单,发现真难找,找了很多都不合胃口,只能自己写个了 ...

  5. WordPress入门 之 设置导航菜单

    WordPress 3.0 添加了一个自定义导航菜单的功能,让你可以很自由地设置网站的导航菜单.现在大多数的主题也都支持这个功能了,那么,究竟该如何设置WordPress导航菜单?今天倡萌就介绍一下. ...

  6. DDD开发框架ABP之导航菜单

    每一个网站都会有导航菜单(通常不止一个),ASP.NET Boilerplate(后文简称ABP)提供了一种创建和使用菜单的通用架构,利用架构我们可以方便的创建菜单并显示给用户.本文主要说明菜单的创建 ...

  7. Netsharp快速入门(之6) 基础档案(创建导航菜单)

    作者:秋时 杨昶   时间:2014-02-15  转载须说明出处 1.1     创建导航菜单 1.在Demo节点下,录入路径名称,并在下方录入两个导航页签名 2.建立分类,只要填路径名 3.双击基 ...

  8. 干货分享！关于APP导航菜单设计你应该了解的一切

    导航菜单是人机交互的最主要的桥梁和平台,主要作用是不让用户迷失方向.现在市面上产品的菜单栏种类繁多,到底什么样的才是优秀的导航菜单设计呢?好的菜单设计不仅能提升整个产品的用户体验,而且还能让用户耳目一 ...

  9. 在ASP.NET MVC下实现树形导航菜单

    在需要处理很多分类以及导航的时候,树形导航菜单就比较适合.例如在汽车之家上: 页面主要分两部分,左边是导航菜单,右边显示对应的内容.现在,我们就在ASP.NET MVC 4 下临摹一个,如下: 实现的 ...

随机推荐

  1. jQuery的4种事件绑定方法

    jQuery中提供了四种绑定事件的方法,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off: 一.on()方法(首选方法) ...

  2. STM32之看门狗（独立与窗口）

    广大的互联网网友们,大家早上中午晚上好,我是某某某..对于狗..看过<忠犬八公>的我.无不深深的被狗的义气与灵气所震撼..我也觉得在所有mcu中用看门狗来形容让系统复位的功能是很恰当的.也 ...

  3. HDU--跑道相遇

    跑道相遇 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Total Submis ...

  4. ZK 样式使用

    控件: <textbox id="usernameTb" sclass="login-user-input" placeholder="账号&q ...

  5. vue.js 的学习

    官方网站(作者居然是中国人) http://vuejs.org/ Vuex中文手册 http://vuex.vuejs.org Vue-Router 手册 http://router.vuejs.or ...

  6. WPF整理-使用ResourceDictionary管理Logical Resources

    “Logical resources may be of various types, such as brushes, geometries, styles, and templates.Placi ...

  7. SQL Server2008清除数据库日志

    m缪国瑞  11:10:17 --'这里的DNName_Log 如果不知道在sys.database_files里是什么名字的话,可以用以下注释的语句进行查询USE dochuanGOSELECT f ...

  8. JQ下的常见插件

    插件的概述:插件是以 jQuery 的核心代码为基础,编写出复合一定规范的应用程序.也就是说,插件也是 jQuery 代码,通过 js 文件引入的方式植入即可. 插件的种类很多,达上千种,主要大致可以 ...

  9. 【一】Ubuntu14.04+Jekyll+Github Pages搭建静态博客

    本系列有五篇:分别是 [一]Ubuntu14.04+Jekyll+Github Pages搭建静态博客:主要是安装方面 [二]jekyll 的使用 :主要是jekyll的配置 [三]Markdown+ ...

  10. eclipse配置javah命令

    1.找到javah命令所在的目录    我的为 /usr/bin/javah 2.打开eclipse     如图点击第二项 3.配置  如图 ${project_loc}/src -classpat ...