JS+CSS打造三级折叠菜单,自动收缩其它级 js
<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[n].className == "no") {
BName[n].className = "";
obj.innerHTML = obj.innerHTML.replace("+", "-");
} else {
BName[n].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+CSS打造三级折叠菜单,自动收缩其它级 js的更多相关文章
- JS三级折叠菜单特效 自动收缩其它级
真的很不错!很实用,在IE6.IE7.IE8.FF.chrome等浏览器都正常运行,去掉CSS中 #menu ul中 {height:100px; overflow:auto;} 即可高度自适应 &l ...
- 基于jquery打造的网页右侧自动收缩浮动在线客服代码
基于jquery打造的网页右侧自动收缩浮动在线QQ客服代码, 当前比较流行的一款QQ在线jquery特效代码, 代码中还带有IE6下PNG图片透明的特效,如果想研究IE6下PNG透明的同学也可以下载研 ...
- 【酷】JS+CSS打造沿Y轴纵深运动的3D球体
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- CSS打造三级下拉菜单
<html><head><meta http-equiv="Content-Type" content="text/html; charse ...
- css 实现三级联动菜单
昨天因为项目中想要把二级联动菜单改成三级联动菜单,所以我就单独写了一个tab导航栏,用纯css的方式实现的三级联动.一开始我想着可以用js实现,但是js的hover事件和mouseenter,mous ...
- js封装的三级联动菜单(使用时只需要一行js代码)
前言 在实际的项目开发中,我们经常需要三级联动,比如省市区的选择,商品的三级分类的选择等等. 而网上却找不到一个代码完整.功能强大.使用简单的三级联动菜单,大都只是简单的讲了一下实现思路. 下面就给大 ...
- 用css实现三级导航菜单
主要使用css的hover伪类来实现该功能. 主要思路:先搭出三级菜单的框架,然后使用css的:hover来实现! 对li添加类selected,对该类添加position:relative属性,然后 ...
- JS CSS写下拉菜单 竖行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 转: javascript实现全国城市三级联动菜单代码
<html> <head> <title>js全国城市三级联动菜单代码_B5教程网</title> <meta http-equiv=" ...
随机推荐
- BZOJ 1449: [JSOI2009]球队收益( 最小费用最大流)
先考虑假如全部输了的收益. 再考虑每场比赛球队赢了所得收益的增加量,用这个来建图.. --------------------------------------------------------- ...
- Struts2中获取HttpServletRequest,HttpSession等的几种方式
转自:http://www.kaifajie.cn/struts/8944.html package com.log; import java.io.IOException; import java. ...
- Strut2中的session和servlet中的session的区别
在jsp中,内通过内置对象 HttpServletRequest的getSession()方法可以获取到HttpSession,比如: <%@ page language="java& ...
- Servlet运行过程详解
比如,在浏览器地址栏输入http://ip:port/web01/hello step1,浏览器依据ip,port建立与servlet容器(容器同时也是一个简单的web服务器)之间的连接. step2 ...
- ThinkPHP第十三天(CONF_PATH、APP_PATH,UEditor用法)
1.CONF_PATH 项目配置文件目录地址,APP_PATH 项目地址 2.ThinkPHP中更新数据的连接操作位save(),更新一个字段可以用setField(name,value)方法. 3. ...
- poj 3422 Kaka's Matrix Travels 费用流
题目链接 给一个n*n的矩阵, 从左上角出发, 走到右下角, 然后在返回左上角,这样算两次. 一共重复k次, 每个格子有值, 问能够取得的最大值是多少, 一个格子的值只能取一次, 取完后变为0. 费用 ...
- Python BeautifulSoup中文乱码问题的2种解决方法
解决方法一: 使用python的BeautifulSoup来抓取网页然后输出网页标题,但是输出的总是乱码,找了好久找到解决办法,下面分享给大家首先是代码 from bs4 import Beautif ...
- synchronized和vilatile
第一个程序 public class Test06 implements Runnable{ public int a = 0; public static void main(String[] ar ...
- NuGet安装软件包故障解决
今晚在家工作,使用NuGet安装 Install-Package Microsoft.AspNet.Web.Optimization 时,一直提示无法连接到nuget.org. 搜索后,可使用如下方法 ...
- java处理图片时找到不sun.awt.X11GraphicsEnvironment问题
-Djava.awt.headless=true 解决. export DISPLAY=:0或者xhost + localhost 来解决 1. 什么是Headless mode? Headle ...