实用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文件 ...

随机推荐

C语言一些常用内存分配函数
首先看个问题程序(这里用的是TC编译器): #include "stdlib.h" #include "stdio.h" void main() { in ...
BeanUtils.copyProperties与PropertyUtils.copyProperties用法及区别
一.简介: BeanUtils提供对Java反射和自省API的包装.其主要目的是利用反射机制对JavaBean的属性进行处理.我们知道,一个JavaBean 通常包含了大量的属性,很多情况下,对Jav ...
SWD应用接口
随着ARM公司对Cortex系列的推出,采样SWD方式调试成了大家的首选.SWD不仅速度可以与JTAG媲美,而且使用的调试线少得多.很多人在采样SWD方式进行调试时,一般都是采用4线: ① VCC ...
Photoshop：不起眼的背景橡皮擦
背景橡皮擦工具是通过颜色的容差来进行工作的,“+”是定位点,当“+”光标位置在要擦除的位置上的时候,就能擦出比较好的效果. 取样连续:擦除的效果比较连续. 取样一次:不松开鼠标键,也不用担心“+”字中 ...
MyBatis学习总结_10_批量操作
一.mybatis中的批量操作批量操作核心就是一次传入多个数据然后进行相关操作,增删改查中掌握其中一个其他的也不成问题 1.最新在做的短信平台,要批量插入群发的短信记录: 当然批量操作还有:批 ...
Java：IO流之字符流缓冲区详解
字符流缓冲区: 1.缓冲区的出现提高了对数据的读写效率: 2.对应类:BufferedWriter.BufferedReader: 3.缓冲区要结合流才可以使用: 4.在流的基础上对流的功能进行了增强 ...
模糊查询的like '%$name$%'的sql注入避免
Ibatis like 查询防止SQL注入的方法 Ibatis like 查询防止SQL注入的方法 mysql: select * from tbl_school where school_name ...
Mybatis SqlSessionTemplate 源码解析
As you may already know, to use MyBatis with Spring you need at least an SqlSessionFactory and at le ...
ES6入门之Symbol
ES5对象属性名都是字符串容易造成属性名的冲突. eg:var a = { name: 'lucy'}; a.name = 'lili';这样就会重写属性 ES6引入了一种新的原始数据类型Symbol ...
Backbone seajs
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

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

随机推荐

热门专题