实用js+css多级树形展开效果导航菜单

<!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" />
<meta name="keywords" content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,www.zzjs.net,站长特效网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。以质量为核心，以实用为目的,打造一流网页特效站" />
<title>站长特效实用js+css多级树形展开效果导航菜单站长特效网</title>
<style type="text/css">
body{margin:0;padding:0;font:12px/1.5 Tahoma,Helvetica,Arial,sans-serif;}
ul,li,{margin:0;padding:0;}
ul{list-style:none;}
#menu_zzjs_net{margin:10px;width:200px;overflow:hidden;}
#menu_zzjs_net li{line-height:25px;}
#menu_zzjs_net .rem{padding-left:16px;}
#menu_zzjs_net .add{background:url(/img/tree_20110125zzjs_net.gif) -4px -31px no-repeat;}
#menu_zzjs_net .ren{background:url(/img/tree_20110125zzjs_net.gif) -4px -7px no-repeat;}
#menu_zzjs_net li a{color:#666666;padding-left:5px;outline:none;blr:expression(this.onFocus=this.blur());}
#menu_zzjs_net li input{vertical-align:middle;margin-left:5px;}
#menu_zzjs_net .two{padding-left:20px;display:none;}
</style>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！zzjs.net，站长js特效。<hr>

<ul id="menu_zzjs_net">
<li>
<label><a href="javascript:;">站长特效一级菜单</a></label>
<ul class="two">
<li>
<label><a href="javascript:;">站长特效二级菜单</a></label>
<ul class="two">
<li>
<label><input type="checkbox" value="123456"><a href="javascript:;">站长特效三级菜单</a></label>
<ul class="two">
<li><label><input type="checkbox" value="123456"><a href="javascript:;">站长特效四级</a></label></li>
<li>
<label><input type="checkbox" value="123456"><a href="javascript:;">站长特效四级</a></label>
<ul class="two">
<li>
<label><input type="checkbox" value="123456"><a href="javascript:;">站长特效五级</a></label>
<ul class="two">
<li><label><input type="checkbox" value="123456"><a href="javascript:;">六级菜单</a></label></li>
<li><label><input type="checkbox" value="123456"><a href="javascript:;">六级菜单</a></label></li>
</ul>
</li>
<li><label><input type="checkbox" value="123456"><a href="javascript:;">站长特效五级</a></label></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<label><a href="javascript:;">站长特效二级菜单</a></label>
<ul class="two">
<li><label><input type="checkbox" value="123456"><a href="javascript:;">站长特效三级菜单</a></label></li>
<li><label><input type="checkbox" value="123456"><a href="javascript:;">站长特效三级菜单</a></label></li>
</ul>
</li>
</ul>
</li>
</ul>
<script type="text/javascript" >
function addEvent(el,name,fn){//绑定事件
if(el.addEventListener) return el.addEventListener(name,fn,false);
return el.attachEvent('on'+name,fn);
}//欢迎来到z站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。
function nextnode(node){//寻找下一个兄弟并剔除空的文本节点
if(!node)return ;
if(node.nodeType == 1)
return node;
if(node.nextSibling)
return nextnode(node.nextSibling);
}
function prevnode(node){//寻找上一个兄弟并剔除空的文本节点
if(!node)return ;
if(node.nodeType == 1)
return node;
if(node.previousSibling)
return prevnode(node.previousSibling);
}//欢迎来到站长z特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。
function parcheck(self,checked){//递归寻找父亲元素，并找到input元素进行操作
var par = prevnode(self.parentNode.parentNode.parentNode.previousSibling),parspar;
if(par&&par.getElementsByTagName('input')[0]){
par.getElementsByTagName('input')[0].checked = checked;
parcheck(par.getElementsByTagName('input')[0],sibcheck(par.getElementsByTagName('input')[0]));
}
}//欢迎来到站长特效z网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。
function sibcheck(self){//判断兄弟节点是否已经全部选中
var sbi = self.parentNode.parentNode.parentNode.childNodes,n=0;
for(var i=0;i<sbi.length;i++){
if(sbi[i].nodeType != 1)//由于孩子结点中包括空的文本节点，所以这里累计长度的时候也要算上去
n++;
else if(sbi[i].getElementsByTagName('input')[0].checked)
n++;
}
return n==sbi.length?true:false;
}
addEvent(document.getElementById('menu_zzjs_net'),'click',function(e){//绑定input点击事件，使用menu_zzjs_net根元素代理
e = e||window.event;
var target = e.target||e.srcElement;
var tp = nextnode(target.parentNode.nextSibling);
switch(target.nodeName){
case 'A'://点击A标签展开和收缩树形目录，并改变其样式会选中checkbox
if(tp&&tp.nodeName == 'UL'){
if(tp.style.display != 'block' ){
tp.style.display = 'block';
prevnode(target.parentNode.previousSibling).className = 'ren'
}else{
tp.style.display = 'none';
prevnode(target.parentNode.previousSibling).className = 'add'
}
}
break;
case 'SPAN'://点击图标只展开或者收缩
var ap = nextnode(nextnode(target.nextSibling).nextSibling);
if(ap.style.display != 'block' ){
ap.style.display = 'block';
target.className = 'ren'
}else{
ap.style.display = 'none';
target.className = 'add'
}
break;
case 'INPUT'://点击checkbox，父亲元素选中，则孩子节点中的checkbox也同时选中，孩子结点取消父元素随之取消
if(target.checked){
if(tp){
var checkbox = tp.getElementsByTagName('input');
for(var i=0;i<checkbox.length;i++)
checkbox[i].checked = true;
}
}else{
if(tp){
var checkbox = tp.getElementsByTagName('input');
for(var i=0;i<checkbox.length;i++)
checkbox[i].checked = false;
}
}
parcheck(target,sibcheck(target));//当孩子结点取消选中的时候调用该方法递归其父节点的checkbox逐一取消选中
break;
}
});
window.onload = function(){//页面加载时给有孩子结点的元素动态添加图标
var labels = document.getElementById('menu_zzjs_net').getElementsByTagName('label');
for(var i=0;i<labels.length;i++){
var span = document.createElement('span');
span.style.cssText ='display:inline-block;height:18px;vertical-align:middle;width:16px;cursor:pointer;';
span.innerHTML = ' '
span.className = 'add';
if(nextnode(labels[i].nextSibling)&&nextnode(labels[i].nextSibling).nodeName == 'UL')
labels[i].parentNode.insertBefore(span,labels[i]);
else
labels[i].className = 'rem'
}
}//欢迎来到站长特效网，我们的网址是 z www.zzjs.net，很好记，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。
</script>
</body>
</html>

实用js+css多级树形展开效果导航菜单的更多相关文章

js+css实现带缓冲效果右键弹出菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
jquery火焰等效果导航菜单
jQuery-火焰灯效果导航菜单 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpre ...
纯CSS3带动画效果导航菜单
随着互联网的发展,网页能表现的东西越来越多.由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3.网页能表达的东西越来越多,css3兴起已经很多 ...
纯CSS实现二级下拉导航菜单
这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: < ...
纯css实现的三级水平导航菜单
vscode练习使用开发纯css的三级水平导航菜单.先上图: 1.html5布局 <html> <head> <meta charset="UTF-8" ...
js+css实现模态层效果
在做web前端的时候,有些时候会涉及到模态层,在此提供一种实现思路.希望对大家实用.先贴效果吧: 模态层效果以下说说在写模态层的时候的思路:通过可配置的參数width,height,title以及c ...
(JS+CSS)实现图片放大效果
代码很简单,在这里就不过多阐述,先上示例图: 实现过程: html部分代码很简单 <div id="outer"> <p>点击图片</p> &l ...
纯js+css实现loading等待效果
此插件是基于jqueryUI的widget,下面是具体实现代码第一部分css: /***loading***/ .loading-box{ position:absolute; text-align ...
纯HTML+CSS带说明的黄色导航菜单
HoverTree带说明的CSS菜单:纯HTML+CSS结构链接带说明的黄色导航在线体验效果:http://hovertree.com/texiao/css/1.htm 代码如下,保存到HTML文件 ...

随机推荐

CSS3做小三角形
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXgAAAA2CAIAAABC2hVZAAAgAElEQVR4nKzcd3cbV57web+1p20FW8
解决xshell连接linux总是异常断开的问题？
找到etc下面的profile文件,可以看到有下面一行: TMOUT=;export TMOUT 注释掉即可解决. #TMOUT=;export TMOUT
Linux Mint 17 + 小米WIFI创建手机热点
转载:http://www.pppei.net/blog/post/690 亲测可行! 我的系统是linux mint 17.1 64位,所用wifi位小米WIFI. 以下是原文: 此方法在linux ...
lintcode：被围绕的区域
被围绕的区域给一个二维的矩阵,包含 'X' 和 'O', 找到所有被 'X' 围绕的区域,并用 'X' 填充满. 样例给出二维矩阵: X X X X X O O X X X O X X O X X ...
【PSR规范专题(5)】PSR-4 改进后的自动加载规范
本文转自: https://github.com/PizzaLiu/PHP-FIG/blob/master/PSR-4-autoloader-cn.md 关键词 "必须"(&quo ...
C++：构造函数默认的参数声明
C++函数的默认参数指的是在函数声明或者定义时给形式参数指定默认值,从而在调用参数时可以少写参数,少掉的参数用默认值代替.LZ的Display()函数的代码看起来似乎是可以有s2和s3两个默认参数,那 ...
存根类STUB
当我们创建一个指定各种方法集合的接口时,我们可以考虑使用"存根”STUB,“存根”就是用空方法体实现该接口中所有方法的类,这样我们就可以通过继承该“存根”创建一个实现该接口的类,这样一来,该 ...
hdu 3177
题目大意:向体积为v的山洞中搬运n个物品,每个物品具有(a,b) 属性.其中a是停放体积,b是移动体积.输出这个山东是否能放下这n个物品解题思路: 1)当前物品能否放进山洞取决于当前物品的的移动体积 ...
C# GUID的使用
GUID(全局统一标识符)是指在一台机器上生成的数字,它保证对在同一时空中的所有机器都是唯一的.通常平台会提供生成GUID的API.生成算法很有意思,用到了以太网卡地址.纳秒级时间.芯片ID码和许多可 ...
对Java“一切皆对象”的理念的理解
在从HelloWorld到面向对象中,我们将int, float, double, boolean等称为基本类型(primitive type),也就是特殊的类.我们可以将一个整数理解称为一个int类 ...

实用js+css多级树形展开效果导航菜单

实用js+css多级树形展开效果导航菜单的更多相关文章

随机推荐

热门专题