JS+CSS打造三级折叠菜单,自动收缩其它级 js
2014-10-16 16:17
417 查看
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS+CSS打造三级折叠菜单,自动收缩其它级</title>
<style>
*,body,ul,h1,h2{ margin:0; padding:0; list-style:none;}
body{font:12px "宋体"; padding-top:20px;} a{ color:white;border:none;}
#menu { width:200px; margin:auto;}
#menu h1 { font-size:12px; border:gray 1px solid; margin-top:1px; background-color:gray;}
#menu h2 { font-size:12px; border:#E7E7E7 1px solid; border-top-color:#FFF; background-color:#00CCFF;}
#menu ul { padding-left:0px; height:auto;border:#E7E7E7 1px solid; border-top:none;overflow:auto;}
#menu a { display:block; padding:5px 0 3px 10px; text-decoration:none; overflow:hidden;}
#menu ul a { display:block; padding:5px 0 3px 15px; text-decoration:none; overflow:hidden;background-color:white;color:black;}
#menu ul a:hover { color:Black;background:red; }
#menu a:hover{ color:white; background:red;} #menu .no {display:none;}
</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
.className == "no") {
BName
.className = "";
obj.innerHTML = obj.innerHTML.replace("+", "-");
} else {
BName
.className = "no";
obj.className = "";
obj.innerHTML = obj.innerHTML.replace("-", "+");
}
}
</script>
</head>
<body>
<div id="menu">
<h1 onclick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">+ 一级菜单A</a></h1>
<span class="no">
<h2 onclick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">+ 一级菜单A_1</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,1)"><a href="javascript:void(0)">+ 一级菜单A_2</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> </span>
<h1 onclick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">+ 二级菜单B</a></h1>
<span class="no">
<h2 onclick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">+ 二级菜单B_1</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)">+ 二级菜单B_2</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>
</ul> </span>
<h1 onclick="javascript:ShowMenu(this,2)">
<a href="javascript:void(0)">+ 三级菜单C</a></h1>
<span class="no"> <h2 onclick="javascript:ShowMenu(this,0)">
<a href="javascript:void(0)">+ 三级菜单C_1</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> </ul>
<h2 onclick="javascript:ShowMenu(this,1)">
<a href="javascript:void(0)">+ 三级菜单C_2</a></h2>
<ul class="no"> <a href="javascript:void(0)">三级菜单C_0</a>
<a href="javascript:void(0)">三级菜单C_1</a> </ul> </span>
<h1 onclick="javascript:ShowMenu(this,3)">
<a href="javascript:void(0)">+ 四级菜单D</a></h1> <span class="no">
<h2 onclick="javascript:ShowMenu(this,0)">
<a href="javascript:void(0)">+ 四级菜单D_1</a></h2> <ul class="no">
<a href="javascript:void(0)">四级菜单D_0</a>
<a href="javascript:void(0)">四级菜单D_1</a> </ul>
<h2 onclick="javascript:ShowMenu(this,1)">
<a href="javascript:void(0)">+ 四级菜单D_2</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>
<title>JS+CSS打造三级折叠菜单,自动收缩其它级</title>
<style>
*,body,ul,h1,h2{ margin:0; padding:0; list-style:none;}
body{font:12px "宋体"; padding-top:20px;} a{ color:white;border:none;}
#menu { width:200px; margin:auto;}
#menu h1 { font-size:12px; border:gray 1px solid; margin-top:1px; background-color:gray;}
#menu h2 { font-size:12px; border:#E7E7E7 1px solid; border-top-color:#FFF; background-color:#00CCFF;}
#menu ul { padding-left:0px; height:auto;border:#E7E7E7 1px solid; border-top:none;overflow:auto;}
#menu a { display:block; padding:5px 0 3px 10px; text-decoration:none; overflow:hidden;}
#menu ul a { display:block; padding:5px 0 3px 15px; text-decoration:none; overflow:hidden;background-color:white;color:black;}
#menu ul a:hover { color:Black;background:red; }
#menu a:hover{ color:white; background:red;} #menu .no {display:none;}
</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
.className == "no") {
BName
.className = "";
obj.innerHTML = obj.innerHTML.replace("+", "-");
} else {
BName
.className = "no";
obj.className = "";
obj.innerHTML = obj.innerHTML.replace("-", "+");
}
}
</script>
</head>
<body>
<div id="menu">
<h1 onclick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">+ 一级菜单A</a></h1>
<span class="no">
<h2 onclick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">+ 一级菜单A_1</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,1)"><a href="javascript:void(0)">+ 一级菜单A_2</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> </span>
<h1 onclick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">+ 二级菜单B</a></h1>
<span class="no">
<h2 onclick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">+ 二级菜单B_1</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)">+ 二级菜单B_2</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>
</ul> </span>
<h1 onclick="javascript:ShowMenu(this,2)">
<a href="javascript:void(0)">+ 三级菜单C</a></h1>
<span class="no"> <h2 onclick="javascript:ShowMenu(this,0)">
<a href="javascript:void(0)">+ 三级菜单C_1</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> </ul>
<h2 onclick="javascript:ShowMenu(this,1)">
<a href="javascript:void(0)">+ 三级菜单C_2</a></h2>
<ul class="no"> <a href="javascript:void(0)">三级菜单C_0</a>
<a href="javascript:void(0)">三级菜单C_1</a> </ul> </span>
<h1 onclick="javascript:ShowMenu(this,3)">
<a href="javascript:void(0)">+ 四级菜单D</a></h1> <span class="no">
<h2 onclick="javascript:ShowMenu(this,0)">
<a href="javascript:void(0)">+ 四级菜单D_1</a></h2> <ul class="no">
<a href="javascript:void(0)">四级菜单D_0</a>
<a href="javascript:void(0)">四级菜单D_1</a> </ul>
<h2 onclick="javascript:ShowMenu(this,1)">
<a href="javascript:void(0)">+ 四级菜单D_2</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>
相关文章推荐
- JS三级折叠菜单特效 自动收缩其它级
- JS实现三级折叠菜单特效,其它级可自动收缩
- 自动收缩的JS+CSS三级折叠导航菜单
- JS实现三级折叠菜单特效,其它级可自动收缩
- JS+CSS打造网站头部蓝色简约可自动显示/隐藏的导航菜单
- div+css+js打造的一款菜单的收缩与展开代码
- JS+CSS打造仿QQ面板的三级折叠下拉菜单
- CSS+JS打造的感应鼠标的QQ伸缩菜单
- 收缩展开的竖直菜单(利用JS+CSS实现_网页代码站(www.webdm.cn)
- JS+CSS打造简约的多级横向导航菜单
- 【荐】JS+CSS全力打造的一级横向滑动,二级竖向下拉综合菜单
- UI - 竖向折叠手风琴导航菜单[JS+div+css]
- CSS+JS打造的一款flash效果的弹性菜单
- JS自动生成三级级联菜单
- 两例DIV+JS三级折叠菜单,实用于后台管理
- CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
- 水平和垂直方向的三级PopMenu-弹出菜单(DIV+CSS+JS)
- 纯CSS打造的三级联动级联菜单
- 用JS+CSS写左侧可隐藏的展开、折叠菜单代码
- CSS打造末尾自动伸缩的菜单