<!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. Unity自动寻路入门指南

    所有用于成为NavMesh的网格都必须被指定为 Navigation Static . 方法如下,选中GameObject,然后在菜单栏的[Window]-[Navigation]-[Object]- ...

  2. Java_正则表达式

    1.简介 正则表达式是一串特定字符串,组成一个“规则字符串”,这个“规则字符串”是描述文本规则的工具.正则表达式就是记录文本规则的代码. 2.字符集合 [abc] a,b,c中任意一个字符 [^abc ...

  3. MVC辅助方法

    我相信很多人虽然经常用mvc去做一些东西,但是可能很少使用mvcHtml辅助方法 首先我们要创建一个mvc项目 二创建一个HtmlHelper文件夹 三编写文件 四调用辅助方法 调用辅助方法 和使用其 ...

  4. Opencv算法学习二

    1.直方图:图片中像素值分布情况的坐标图. 直方图均衡化:按一定规律拉伸像素值,提高像素值少的点,增加原图的对比度,使人感觉更清晰的函数. equalizeHist( src, dst ); 2.ha ...

  5. Eclipse上安装GIT插件EGit及使用

    一.Eclipse上安装GIT插件EGit Eclipse的版本eclipse-java-helios-SR2-win32.zip(在Eclipse3.3版本找不到对应的 EGit插件,无法安装) E ...

  6. Java基础系列——IO流

    ---恢复内容开始--- Java对数据的操作都是通过流的方式,数据的输入和输出是相对内存来说的,将外设的数据读到内存:输入流:将内存的数据写到外设:输出流. 流按操作数据分为两种:字节流,字符流. ...

  7. 从Facebook跑来阿里的赵海平大叔，你要干啥？

    赵海平在今年三月份来到阿里,听毕玄(他现任主管)说去年五六月份就跟赵海平聊上了.有人问:为啥 BAT 三大巨头,你看中了阿里巴巴?在今天现场达一千多人的分享中赵海平给出了回复:“因为百度和腾讯没找我呗 ...

  8. [.net 面向对象程序设计进阶] (22) 团队开发利器（一）简单易用的代码管理工具VSS

    [.net 面向对象程序设计进阶] (22) 团队开发利器(一)简单易用的代码管理工具VSS 本篇要点:在进阶篇快要结束的时候说说源代码管理器,我们的开发,不是一个人可以完成的事,团队协作很重要,而且 ...

  9. 玩转Windows服务系列——服务运行、停止流程浅析

    通过研究Windows服务注册卸载的原理,感觉它并没有什么特别复杂的东西,Windows服务正在一步步退去它那神秘的面纱,至于是不是美女,大家可要睁大眼睛看清楚了. 接下来研究一下Windows服务的 ...

  10. 大白话讲解Promise（二）理解Promise规范

    上一篇我们讲解了ES6中Promise的用法,但是知道了用法还远远不够,作为一名专业的前端工程师,还必须通晓原理.所以,为了补全我们关于Promise的知识树,有必要理解Promise/A+规范,理解 ...