<!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. 在update语句中使用子查询

    在update 中的 where 子句中使用子查询: UPDATE mg_page_log as a  SET  page_num=1 WHERE id in( SELECT id  from mg_ ...

  2. setTimeout 学习闭包

    @(技术笔记)[css] 学习参考网站 css 网站,可供参考 javascript学习网站 var create = function (i){ return function(){ console ...

  3. keepalived 原主上线时vip漂移情况

    1. 设置为MASTER,BACKUP 优先级相同 的情况: master端的keepalived起来就会获取到vip变成主. 2. 设置为BACKUP,BACKUP 一个优先级高一个优先级低 的情况 ...

  4. 实用redis前需了解的5大事项

    百万个键,每个值的长度是32-character,那么在使用6-character长度键名时,将会消耗大约96MB的空间,但是如果使用12-character长度的键名时,空间消耗则会提升至111MB ...

  5. 四核驱动的三维导航—淘宝新UI（设计篇）

    前面有一篇博客说到了淘宝UWP的"四核驱动的三维导航—淘宝新UI(需求分析篇)",花了两周的时间实现了这个框架,然后又陆陆续续用了三周的时间完善它. 多窗口导航,与传统的导航方式的 ...

  6. [.net 面向对象程序设计深入]（2）UML——在Visual Studio 2013/2015中设计UML用例图

    [.net 面向对象程序设计深入](2)UML——在Visual Studio 2013/2015中设计UML用例图  1.用例图简介 定义:用例图主要用来描述“用户.需求.系统功能单元”之间的关系. ...

  7. 用python实现的百度音乐下载器-python-pyqt-改进版

    之前写过一个用python实现的百度新歌榜.热歌榜下载器的博文,实现了百度新歌.热门歌曲的爬取与下载.但那个采用的是单线程,网络状况一般的情况下,扫描前100首歌的时间大概得到40来秒.而且用Pyqt ...

  8. 深圳本土web前端经验交流

    群号:125776555  深圳本土web前端技术交流群 baidu tencent前端拒绝垃圾广告.吹水,欢迎讨论技术.跳槽经验期待您的加入 

  9. Html5 绘制五星红旗

    Html5+JavaScript 在Canvas上绘制五星红旗,具体思路如下图所示: 绘制思路在上图中已有说明,具体代码如下: <script type="text/javascrip ...

  10. jquery中bind()绑定多个事件

    bind()绑定事件 $(selector).bind(event,data,function): 参数event为事件名称(如"click,mouseover....."),da ...