<!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. C# Listview 数据绑定

    今天搞Winform,有串数据需要绑定到TabControl里面,原来用datatable,组长说这玩意会有问题不让用,菜鸟实在不会,百度查的Listview用法,写了个数组进去绑定 using Sy ...

  2. css中单位px、pt、em和rem的区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px :像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS ...

  3. HTML5开发手机应用--viewport的作用

    在用HTML5开发手机应用或手机网页时,<head>部分总会有如下一段代码,这段代码到底什么意思呢.在网上,大家会得到很多答案.我从网上搜集了部分介绍,整理一下,以留备用. <met ...

  4. 异常处理_Maven之web项目java.lang.LinkageError

    浏览器运行项目异常如下: HTTP Status 500 - type Exception report message description The server encountered an i ...

  5. Android进程间通讯之messenger

    这两天在看binder,无意间在文档看到messenger这么个东西,感觉这个东西还挺有意思的,给大家分享一下. 平时一说进程间通讯,大家都会想到AIDL,其实messenger和AIDL作用一样,都 ...

  6. perl 删除过期文件

    #!/usr/bin/perl `find /bak/ >list.txt`; open LIST,"/root/list.txt"; while (<LIST> ...

  7. [转]runtime 消息机制

    原文地址:http://www.jianshu.com/p/f6300eb3ec3d 一.关于runtime 之前在项目中有遇到过用runtime解决改变全局字体的问题,所以再一次感受到了runtim ...

  8. 阿里聚安全受邀参加SFDC安全大会，分享互联网业务面临问题和安全创新实践

    现今,技术引领的商业变革已无缝渗透入我们的日常生活,「技术改变生活」的开发者们被推向了创新浪潮的顶端.国内知名的开发者技术社区 SegmentFault 至今已有四年多了,自技术问答开始,他们已经发展 ...

  9. .NET面试题系列[15] - LINQ：性能

    .NET面试题系列目录 当你使用LINQ to SQL时,请使用工具(比如LINQPad)查看系统生成的SQL语句,这会帮你发现问题可能发生在何处. 提升性能的小技巧 避免遍历整个序列 当我们仅需要一 ...

  10. RCF进程间通信Demo程序

    在上一篇文章RPC通信框架--RCF介绍中,介绍了RCF的优点,本篇文章从头开始演示如何用RCF编写一个跨进程通信的Demo程序. 将RCF编译为静态库 从官网下载到的源码中包含一个RCF的项目,但是 ...