<!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. [LintCode] Climbing Stairs 爬梯子问题

    You are climbing a stair case. It takes n steps to reach to the top. Each time you can either climb ...

  2. Jenkins中构建Testcomplete项目的方法介绍

    Jenkins的部署在上一篇随笔中已经和大家介绍了,下面我们介绍一下再Jenkins中构建testcomplete项目.我这里使用的是Testcomplete11,下面详细介绍一下构建步骤. 1.Je ...

  3. LabVIEW 吸星大法 - 看见的好东西都是我的(中篇)

    前言 写了多年的LabVIEW程序,你是否面临这样的问题 总是在做一些重复的工作,感觉很没有意思: 总在不停的写代码,做类似的控件,实现相同的功能,丝毫没有成就感: 总在天加班,没有时间去提高自己; ...

  4. windows下装多个node版本的方法(gnvm)

      安装一个支持windows切换node版本的工具 工作中我们可能需要用到一些工具,但这些工具依赖不同版本的node环境,那我们需要来为的切换node的环境吗, window msi安装的用户需要卸 ...

  5. JSP内置对象及常用方法

    jsp九大内置对象及四个作用域: 何为作用域 先让我们看看效果: 大概流程是这样的,我们访问index.jsp的时候,分别对pageContext, request, session,applicat ...

  6. Python join()函数

    今天写python 100例时,有个题目是大致是这样的:已知输入形式是1+3+2+1,要求输出形式为1+1+2+3 一开始思路是将输入的字符串用split()函数划分成数组,在对数组进行排序,再用fo ...

  7. DataTable转List(备忘)

    public static List ToList(DataTable dt) { List<Dictionary<string, object>> list = new Li ...

  8. html 5 canvas画布整理

    1. 创建canvas画布<canvas id="myCanvas" width="800" height="800" >< ...

  9. 函数randint的使用

    摘自百科: ANDINT 在MATLAB中用于产生基质的均匀分布的随机整数. 用法: 1.OUT = RANDINT 产生一个“ 0 ”或“ 1 ”等概率 2.OUT = RANDINT(M) 生成的 ...

  10. 安装ant

    从ant官方网站下载ant安装包:apache-ant-1.9.7-bin.tar.gz,解压 tar xvf apache-ant-1.9.7-bin.tar.gz -C /usr/java/ 配置 ...