1. <!DOCTYPE>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-type" content="text/html" charset="utf-8">
  5.     <title>后台管理折叠导航菜单</title>
  6.     <style>
  7.         body{
  8.             margin:0;
  9.             padding:0;
  10.             text-align:center;
  11.             font:normal 12px Arial,Verdana,Tahoma;
  12.             line-height:150%;
  13.         }
  14.         a:link, a:visited{
  15.             color:#385065;
  16.             text-decoration:none;
  17.         }
  18.         a:hover{
  19.             text-decoration:underline;
  20.         }
  21.         #menu{
  22.             width:150px;
  23.             margin:0 15px;
  24.             padding:0;
  25.             text-align:left;
  26.             list-style:none;
  27.         }
  28.         #menu .item{
  29.             background:#ccaaee;
  30.             padding:0px;
  31.             list-style:none;
  32.             border:1px solid #eee;
  33.         }
  34.         a.title:link, a.title:visited, a.title:hover{
  35.             display:block;
  36.             color:#385065;
  37.             font-weight:bold;
  38.             padding:2px 0 0 22px;
  39.             width:128px;
  40.             line-height:23px;
  41.             cursor:pointer;
  42.             text-decoration:none;
  43.         }
  44.         #menu .item ul{
  45.             border:1px solid #9facb7;
  46.             margin:0;
  47.             width:116px;
  48.             padding:3px 0px 3px 30px;
  49.             bakground:#fff;
  50.             list-style:none;
  51.             display:none;
  52.         }
  53.         #menu .item ul li{
  54.             display:block;
  55.         }
  56.     </style>
  57.     <script type="text/javascript">
  58.         function hideAllObj(){
  59.             var items = document.getElementsByClassName("option");
  60.             for(var j=0; j<items.length; j++){
  61.                 items[j].style.display = "none";
  62.             }
  63.         }
  64.  
  65.         function check(){
  66.             document.getElementById("opt_1").style.display = "block";
  67.             var items = document.getElementsByClassName("title");
  68.             for(var j=0; j<items.length; j++){
  69.                 items[j].onclick = function(){
  70.                     var obj = document.getElementById("opt_" + this.name);
  71.                     if(obj.style.display != "block"){
  72.                         hideAllObj();
  73.                         obj.style.display = "block";
  74.                     }else{
  75.                         obj.style.display = "none";
  76.                     }
  77.                 }
  78.             }
  79.         }
  80.  
  81.         document.getElementsByClassName=function(classname){
  82.             var retnode = [];
  83.             var myclass = new RegExp('\\b'+classname+'\\b');
  84.             var elem = this.getElementsByTagName('*');
  85.             for(var j=0; j<elem.length; j++){
  86.                 var classes = elem[j].className;
  87.                 if(myclass.test(classes)){
  88.                     retnode.push(elem[j]);
  89.                 }
  90.             }
  91.             return retnode;
  92.         }
  93.     </script>
  94. </head>
  95. <body onload="check()">
  96. <ul id="menu">
  97.     <li class="item"><a href="javascript:void(0)" class="title" name="1">用户管理</a>
  98.     <ul id="opt_1" class="option">
  99.         <li><a href="#">添加用户</a></li>
  100.         <li><a href="#">管理用户</a></li>
  101.     </ul>
  102.     </li>
  103.    <li class="item"><a href="javascript:void(0)" class="title" name="2">用户管理</a>
  104.     <ul id="opt_2" class="option">
  105.         <li><a href="#">添加用户</a></li>
  106.         <li><a href="#">管理用户</a></li>
  107.     </ul>
  108.     </li>
  109.    <li class="item"><a href="javascript:void(0)" class="title" name="3">用户管理</a>
  110.     <ul id="opt_3" class="option">
  111.         <li><a href="#">添加用户</a></li>
  112.         <li><a href="#">管理用户</a></li>
  113.     </ul>
  114.     </li>
  115.    <li class="item"><a href="javascript:void(0)" class="title" name="4">用户管理</a>
  116.     <ul id="opt_4" class="option">
  117.         <li><a href="#">添加用户</a></li>
  118.         <li><a href="#">管理用户</a></li>
  119.     </ul>
  120.     </li>
  121.  
  122. </ul>
  123.  
  124. </body>
  125. </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. highchart 添加新的series

    code: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" c ...

  2. Python新建动态命名txt文件

    # -*- coding: utf-8 -*- import os,sys,time fname=r"D:\01-学习资料\python" def GetNowTime():#获取 ...

  3. HDU--洗衣服

    洗衣服 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  4. Struts2使用demo

    创建一个web project: 导入Struts2的jar包放到lib目录下: WEB-INF下面创建login.jsp和welcome.jsp;index.jsp删掉: 说一下<%@ tag ...

  5. MySQL5.6 GTID新特性实践

    MySQL5.6 GTID新特性实践 GTID简介 搭建 实验一:如果slave所需要事务对应的GTID在master上已经被purge了 实验二:忽略purged的部分,强行同步 本文将简单介绍基于 ...

  6. Java面向对象课程小结

    1.什么是对象?什么是类? 类和对象的关系 定义类的方法 方法五要素 new关键字 引用类型变量的赋值 null和nullException null大小写的区别 2.方法 重载和重写 构造 方法,带 ...

  7. UIWindow & UIWindowLevel

    转自:http://www.cnblogs.com/smileEvday/archive/2012/03/27/2420362.html 一.UIWindow是一种特殊的UIView,通常在一个程序中 ...

  8. Think in 递归

    网上写递归的文章可以用汗牛充栋来形容了,大多数都非常清晰而又细致的角度上讲解了递归的概念,原理等等.以前学生的时候,递归可以说一直是我的某种死穴,原理,细节我都懂,但是不管是在如何运用或者如何试试算法 ...

  9. HTML学习有感

    自从到大三之后一直在纠结课下去学些什么,刚开始一直在学PS,当时学的还算可以,可以一段时间不用之后就忘记了,这使我很郁闷!之后一直想学JAVA,跟已经工作的同学讨来了相关的视屏资料以及他培训时的笔记: ...

  10. java学习笔记(3)之面向对象（1）

    下面来谈谈我对面向对象的一些理解和总结. 1.什么叫面向对象?我自己的理解就是一种编程思想,强调对象,是一种思考问题的思维模式.在学习面向对象的时候,我们要建立起自己面向对象的思维模式. (1).先整 ...