自动收缩的JS+CSS三级折叠导航菜单

转载 2015年04月15日 18:46:03
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>青年励志网三级菜单</title>
<style>
*,body,ul,h1,h2{ margin:0; padding:0; list-style:none;}
body{font:12px "宋体"; padding-top:20px;}
a{ color:#FFF;border:none;}
#menu { width:200px; margin:auto;}
 #menu h1 { font-size:12px; border:#0074BD 1px solid; margin-top:1px;  background-


color:#0080D0;}
 #menu h2 { font-size:12px; border:#003352 1px solid; border-top-color:#FFF; background-


color:#025D94;}
 #menu ul { padding-left:0px; height:100px;border:#E7E7E7 1px solid; border-


top:none;overflow:auto;}
 #menu a { display:block; padding:5px 0 3px 10px; text-decoration:none; overflow:hidden;}
 #menu a:hover{ color:#FFF; background:#064267;}
 #menu .no {display:none;}
 #menu .h1 a{color:#FFF;background-color:#004876;}
 #menu .h2 a{color:#004876; background:#FFF;}
 #menu .h2 a:hover{ color:#004876; background:#FFF;}
 #menu  h1 a{color:#FFF;}
</style>
<script language="JavaScript">
<!--//
function ShowMenu(obj,n){
 var Nav = obj.parentNode;
 if(!Nav.id){
  var BName = Nav.getElementsByTagName("ul");
  var HName = Nav.getElementsByTagName("h2");
  var t = 2;
 }else{
  var BName = document.getElementById(Nav.id).getElementsByTagName("span");
  var HName = document.getElementById(Nav.id).getElementsByTagName("h1");
  var t = 1;
 }
 for(var i=0; i<HName.length;i++){
  HName[i].innerHTML = HName[i].innerHTML.replace("-","+");
  HName[i].className = "";
 }
 obj.className = "h" + t;
 for(var i=0; i<BName.length; i++){if(i!=n){BName[i].className = "no";}}
 if(BName[n].className == "no"){
  BName[n].className = "";
  obj.innerHTML = obj.innerHTML.replace("+","-");
 }else{
  BName[n].className = "no";
  obj.className = "";
  obj.innerHTML = obj.innerHTML.replace("-","+");
 }
}
//-->
</script>


<style type="text/css">
.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}
</style>
</head>
<body>
<div id="menu">
 <h1><a href="#">首页</a></h1>
 <h1 onClick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">青年财经<b 


class="caret"></b></a></h1>
 <span class="no">
  <h2 onClick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">财富人物


</a></a></h2>
  <ul class="no">
   <a href="javascript:void(0)">人物志</a>
  </ul>
  <h2 onClick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">轻松理财</a></h2>
  <ul class="no">
   <a href="javascript:void(0)">一级菜单A_0</a>
   <a href="javascript:void(0)">一级菜单A_1</a>
   <a href="javascript:void(0)">一级菜单A_2</a>
   <a href="javascript:void(0)">一级菜单A_3</a>
  </ul>
  <h2 onClick="javascript:ShowMenu(this,2)"><a href="javascript:void(0)">每日财经</a></h2>
  <ul class="no">
   <a href="javascript:void(0)">一级菜单A_0</a>
   <a href="javascript:void(0)">一级菜单A_1</a>
   <a href="javascript:void(0)">一级菜单A_2</a>
  </ul>
 </span>
        
 <h1 onClick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">经典语录<b 


class="caret"></b></a></h1>
 <span class="no">
  <h2 onClick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">人物自传</a></h2>
  <ul class="no">
   <a href="javascript:void(0)">二级菜单B_0</a>
   <a href="javascript:void(0)">二级菜单B_1</a>
   <a href="javascript:void(0)">二级菜单B_2</a>
   <a href="javascript:void(0)">二级菜单B_3</a>
  </ul>
  <h2 onClick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">励志语录</a></h2>
  <ul class="no">
   <a href="javascript:void(0)">二级菜单B_0</a>
   <a href="javascript:void(0)">二级菜单B_1</a>
   <a href="javascript:void(0)">二级菜单B_2</a>
   <a href="javascript:void(0)">二级菜单B_3</a>
   <a href="javascript:void(0)">二级菜单B_9</a>
  </ul>
  <h2 onClick="javascript:ShowMenu(this,2)"><a href="javascript:void(0)">哲理感悟</a></h2>
  <ul class="no">
   <a href="javascript:void(0)">二级菜单B_0</a>
   <a href="javascript:void(0)">二级菜单B_1</a>
   <a href="javascript:void(0)">二级菜单B_2</a>
   <a href="javascript:void(0)">二级菜单B_3</a>
   <a href="javascript:void(0)">二级菜单B_9</a>
  </ul>
 </span>
    
 <h1 onClick="javascript:ShowMenu(this,2)"><a href="javascript:void(0)">创业指南<b 


class="caret"></b></a></h1>
 <span class="no">
  <h2 onClick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">领导力</a></h2>
  <ul class="no">
   <a href="javascript:void(0)">三级菜单C_0</a>
   <a href="javascript:void(0)">三级菜单C_1</a>
   <a href="javascript:void(0)">三级菜单C_2</a>
   <a href="javascript:void(0)">三级菜单C_9</a>
  </ul>
  <h2 onClick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">职场指南</a></h2>
  <ul class="no">
   <a href="javascript:void(0)">三级菜单C_0</a>
   <a href="javascript:void(0)">三级菜单C_1</a>
   <a href="javascript:void(0)">三级菜单C_2</a>
   <a href="javascript:void(0)">三级菜单C_3</a>
  </ul>
  <h2 onClick="javascript:ShowMenu(this,2)"><a href="javascript:void(0)">互联网创业</a></h2>
  <ul class="no">
   <a href="javascript:void(0)">三级菜单C_0</a>
   <a href="javascript:void(0)">三级菜单C_1</a>
   <a href="javascript:void(0)">三级菜单C_2</a>
   <a href="javascript:void(0)">三级菜单C_3</a>
  </ul>
 </span>
    
 <h1 onClick="javascript:ShowMenu(this,3)"><a href="javascript:void(0)">励志名言<b 


class="caret"></b></a></h1>
 <span class="no">
  <h2 onClick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">励志视频</a></h2>
  <ul class="no">
   <a href="javascript:void(0)">四级菜单D_0</a>
   <a href="javascript:void(0)">四级菜单D_1</a>
   <a href="javascript:void(0)">四级菜单D_2</a>
   <a href="javascript:void(0)">四级菜单D_3</a>
  </ul>
  <h2 onClick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">励志歌曲</a></h2>
  <ul class="no">
   <a href="javascript:void(0)">四级菜单D_0</a>
   <a href="javascript:void(0)">四级菜单D_1</a>
   <a href="javascript:void(0)">四级菜单D_2</a>
   <a href="javascript:void(0)">四级菜单D_3</a>
  </ul>
  <h2 onClick="javascript:ShowMenu(this,2)"><a href="javascript:void(0)">励志博文</a></h2>
  <ul class="no">
   <a href="javascript:void(0)">四级菜单D_0</a>
   <a href="javascript:void(0)">四级菜单D_1</a>
   <a href="javascript:void(0)">四级菜单D_2</a>
   <a href="javascript:void(0)">四级菜单D_3</a>
  </ul>
 </span>
</div>
</body>
</html>

利用JQuery实现左侧菜单栏可折叠功能

今天给大家介绍一下左侧菜单栏可折叠功能,在后台管理中左侧菜单折叠功能是特别常见的一个功能,基本不管是什么类型的管理后台都会涉及到这个功能的实现。 今天给大家介绍的是二级可折叠菜单的功能,相对一级的菜...
  • linzhiqiang0316
  • linzhiqiang0316
  • 2016年10月12日 22:26
  • 9743

利用JQuery实现左侧菜单栏可折叠功能

今天给大家介绍一下左侧菜单栏可折叠功能,在后台管理中左侧菜单折叠功能是特别常见的一个功能,基本不管是什么类型的管理后台都会涉及到这个功能的实现。 今天给大家介绍的是二级可折叠菜单的功能,相对一级的菜...
  • xw1985520
  • xw1985520
  • 2016年12月26日 22:47
  • 3144

html css 非常牛的左侧栏JS折叠菜单

  • 2010年02月11日 13:43
  • 77KB
  • 下载

纯CSS打造可折叠树状菜单

1:Html代码 下级 下级 下级 无限级 无限级 无限级 无限级 无限级 无限级 实现的思路是运用checkbox的checked值来判断下级栏目是否展开,CSS3的选...
  • woshisap
  • woshisap
  • 2011年08月11日 19:53
  • 24260

浅谈CSS+jQuery实现折叠菜单

折叠菜单 body{ background:grey; font-family:Microsoft Yahei; color:white; } .types a{ ...
  • zhouziyu2011
  • zhouziyu2011
  • 2016年12月20日 09:29
  • 489

js实现侧边导航栏展开和折叠

效果:左侧导航栏,点击展开,显示子菜单。再次点击,菜单折叠。 代码: ...
  • liuwengai
  • liuwengai
  • 2016年06月09日 18:01
  • 4483

JS之三级竖向展开/收缩导航菜单

JS之三级竖向展开/收缩导航菜单
  • netuser1937
  • netuser1937
  • 2017年02月07日 16:45
  • 727

html用js实现导航栏的二级菜单,自动伸缩。。。

效果图::、 代码如下:: 动画菜单 * { margin: 0; padding: 0; font-size: 14px; } a { color: #3...
  • ITzhongzi
  • ITzhongzi
  • 2016年07月12日 16:09
  • 4849

html 二级菜单的显示和隐藏。+代码(亲测)

div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白:   style="visibility: none;"   document.getElementById...
  • ITzhongzi
  • ITzhongzi
  • 2016年10月10日 15:58
  • 5265

CSS之可折叠导航

简述下面我们来讲述如何仅仅用CSS来实现一个可折叠的导航。简述 nav标签 summary标签 效果 源码标签定义和用法 标签定义导航链接的部分。HTML4.01与HTML5之间的差异标签是 HTML...
  • u011012932
  • u011012932
  • 2016年03月16日 11:09
  • 2873
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:自动收缩的JS+CSS三级折叠导航菜单
举报原因:
原因补充:

(最多只允许输入30个字)