2个通用js树型导航

js实现无限级树形下拉导航菜单，简洁实用，用到一个已封装好的JS类，有用的大家借鉴一下。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> *{ margin:0; padding:0; list-style:none;} body { margin:20px;} h2 { font-family:"黑体"; font-size:24px; text-align:center; line-height:32px;} h5 { font-size:12px; text-align:center; font-weight:normal; color:#666; line-height:28px;} #nav a { text-decoration:underline;color:#06c; font-size:14px; line-height:24px;} #nav ul{ margin-bottom:5px;} #nav strong{ color:#696;} #nav.dyn li ul{ display:none;} #nav.dyn li ul.show{ display:block;} #nav.dyn li{ padding-left:15px;} #nav.dyn li.parent{ background:url(/jscss/demoimg/201004/user_23.gif) 5px 10px no-repeat;} #nav.dyn li.open{ background:url(/jscss/demoimg/201004/user_23.gif) 5px -34px no-repeat;} </style> <script type="text/javascript"> DOMhelp={ debugWindowId:'DOMhelpdebug', init:function(){ if(!document.getElementById || !document.createTextNode){return;} }, lastSibling:function(node){ var tempObj=node.parentNode.lastChild; while(tempObj.nodeType!=1 && tempObj.previousSibling!=null){ tempObj=tempObj.previousSibling; } return (tempObj.nodeType==1)?tempObj:false; }, firstSibling:function(node){ var tempObj=node.parentNode.firstChild; while(tempObj.nodeType!=1 && tempObj.nextSibling!=null){ tempObj=tempObj.nextSibling; } return (tempObj.nodeType==1)?tempObj:false; }, getText:function(node){ if(!node.hasChildNodes()){return false;} var reg=/^\s+$/; var tempObj=node.firstChild; while(tempObj.nodeType!=3 && tempObj.nextSibling!=null || reg.test(tempObj.nodeValue)){ tempObj=tempObj.nextSibling; } return tempObj.nodeType==3?tempObj.nodeValue:false; }, setText:function(node,txt){ if(!node.hasChildNodes()){return false;} var reg=/^\s+$/; var tempObj=node.firstChild; while(tempObj.nodeType!=3 && tempObj.nextSibling!=null || reg.test(tempObj.nodeValue)){ tempObj=tempObj.nextSibling; } if(tempObj.nodeType==3){tempObj.nodeValue=txt}else{return false;} }, createLink:function(to,txt){ var tempObj=document.createElement('a'); tempObj.appendChild(document.createTextNode(txt)); tempObj.setAttribute('href',to); return tempObj; }, createTextElm:function(elm,txt){ var tempObj=document.createElement(elm); tempObj.appendChild(document.createTextNode(txt)); return tempObj; }, closestSibling:function(node,direction){ var tempObj; if(direction==-1 && node.previousSibling!=null){ tempObj=node.previousSibling; while(tempObj.nodeType!=1 && tempObj.previousSibling!=null){ tempObj=tempObj.previousSibling; } }else if(direction==1 && node.nextSibling!=null){ tempObj=node.nextSibling; while(tempObj.nodeType!=1 && tempObj.nextSibling!=null){ tempObj=tempObj.nextSibling; } } return tempObj.nodeType==1?tempObj:false; }, initDebug:function(){ if(DOMhelp.debug){DOMhelp.stopDebug();} DOMhelp.debug=document.createElement('div'); DOMhelp.debug.setAttribute('id',DOMhelp.debugWindowId); document.body.insertBefore(DOMhelp.debug,document.body.firstChild); }, setDebug:function(bug){ if(!DOMhelp.debug){DOMhelp.initDebug();} DOMhelp.debug.innerHTML+=bug+'\n'; }, stopDebug:function(){ if(DOMhelp.debug){ DOMhelp.debug.parentNode.removeChild(DOMhelp.debug); DOMhelp.debug=null; } }, getKey:function(e){ if(window.event){ var key = window.event.keyCode; } else if(e){ var key=e.keyCode; } return key; }, /* helper methods */ getTarget:function(e){ var target = window.event ? window.event.srcElement : e ? e.target : null; if (!target){return false;} while(target.nodeType!=1 && target.nodeName.toLowerCase()!='body'){ target=target.parentNode; } return target; }, stopBubble:function(e){ if(window.event && window.event.cancelBubble){ window.event.cancelBubble = true; } if (e && e.stopPropagation){ e.stopPropagation(); } }, stopDefault:function(e){ if(window.event && window.event.returnValue){ window.event.returnValue = false; } if (e && e.preventDefault){ e.preventDefault(); } }, cancelClick:function(e){ if (window.event){ window.event.cancelBubble = true; window.event.returnValue = false; } if (e && e.stopPropagation && e.preventDefault){ e.stopPropagation(); e.preventDefault(); } }, addEvent: function(elm, evType, fn, useCapture){ if (elm.addEventListener){ elm.addEventListener(evType, fn, useCapture); return true; } else if (elm.attachEvent) { var r = elm.attachEvent('on' + evType, fn); return r; } else { elm['on' + evType] = fn; } }, cssjs:function(a,o,c1,c2){ switch (a){ case 'swap': o.className=!DOMhelp.cssjs('check',o,c1)?o.className.replace(c2,c1):o.className.replace(c1,c2); break; case 'add': if(!DOMhelp.cssjs('check',o,c1)){o.className+=o.className?' '+c1:c1;} break; case 'remove': var rep=o.className.match(' '+c1)?' '+c1:c1; o.className=o.className.replace(rep,''); break; case 'check': var found=false; var temparray=o.className.split(' '); for(var i=0;i<temparray.length;i++){ if(temparray[i]==c1){found=true;} } return found; break; } }, safariClickFix:function(){ return false; } } DOMhelp.addEvent(window, 'load', DOMhelp.init, false); </script> <script type="text/javascript">  </script> <h2>js实现无限级树形导航列表</h2> <ul id="nav"> <li><a href="#">主页</a></li> <li><a href="#">产品</a> <ul> <li><a href="#">大类别一</a> <ul> <li><a href="#">小类别一</a> <ul> <li><a href="#">次类别一</a></li> <li><a href="#">次类别二</a></li> </ul> </li> <li><a href="#">小类别二</a></li> </ul> </li> <li><a href="#">大类别二</a></li> <li><a href="#">大类别三</a> <ul> <li><a href="#">小类别一</a></li> <li><a href="#">小类别二</a></li> </ul> </li> </ul> </li> <li><a href="#">服务</a> <ul> <li><a href="#">大类别一</a></li> <li><a href="#">大类别二</a></li> <li><a href="#">大类别三</a></li> </ul> </li> <li><a href="#">合作</a></li> <li><a href="#">关于我们</a> <ul> <li><a href="#">大类别一</a> <ul> <li><a href="#">小类别一</a></li> <li><a href="#">小类别二</a></li> </ul> </li> <li><a href="#">大类别二</a> <ul> <li><a href="#">小类别一</a></li> <li><a href="#">小类别二</a></li> </ul> </li> <li><a href="#">大类别三</a> <ul> <li><a href="#">小类别一</a></li> <li><a href="#">小类别二</a></li> </ul> </li> <li><a href="#">大类别四</a></li> </ul> </li> <li><a href="#">联系我们</a> <ul> <li><a href="#">大类别一</a></li> <li><a href="#">大类别二</a></li> </ul> </li> </ul>

2.

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>树形菜单2</title> <style type="text/css">  </style> <script language="JavaScript"> scores = new Array(20); var numTotal=0;NS4 = (document.layers) ? 1 : 0;IE4 = (document.all) ? 1 : 0;ver4 = (NS4 || IE4) ? 1 : 0; if (ver4) { with (document) { write("<STYLE TYPE='text/css'>"); if (NS4) { write(".parent {position:absolute; visibility:visible}"); write(".child {position:absolute; visibility:visible}"); write(".regular {position:absolute; visibility:visible}") } else { write(".child {display:none}") } write("</STYLE>"); }}function getIndex(el) { ind = null; for (i=0; i<document.layers.length; i++) { whichEl = document.layers[i]; if (whichEl.id == el) { ind = i; break; } } return ind;}function arrange() { nextY = document.layers[firstInd].pageY +document.layers[firstInd].document.height; for (i=firstInd+1; i<document.layers.length; i++) { whichEl = document.layers[i]; if (whichEl.visibility != "hide") { whichEl.pageY = nextY; nextY += whichEl.document.height; } }}function initIt(){ if (!ver4) return; if (NS4) { for (i=0; i<document.layers.length; i++) { whichEl = document.layers[i]; if (whichEl.id.indexOf("Child") != -1) whichEl.visibility = "hide"; } arrange(); } else { divColl = document.all.tags("DIV"); for (i=0; i<divColl.length; i++) { whichEl = divColl(i); if (whichEl.className == "child") whichEl.style.display = "none"; } }}function expandIt(el) { if (!ver4) return; if (IE4) { whichEl1 = eval(el + "Child"); for(i=1;i<=numTotal;i++){ whichEl = eval(scores[i] + "Child"); if(whichEl!=whichEl1) { whichEl.style.display = "none"; } } whichEl1 = eval(el + "Child"); if (whichEl1.style.display == "none") { whichEl1.style.display = "block"; } else { whichEl1.style.display = "none"; } } else { whichEl = eval("document." + el + "Child"); for(i=1;i<=numTotal;i++){ whichEl = eval("document." + scores[i] + "Child"); if(whichEl!=whichEl1) { whichEl.visibility = "hide"; } } if (whichEl.visibility == "hide") { whichEl.visibility = "show"; } else { whichEl.visibility = "hide"; } arrange(); }}onload = initIt; </script> <script language="JavaScript">  </script> </head> <body>  <div id="mainboard" style="position:absolute; left:2px; top:2px; width:120px; height:270px; z-index:3; overflow: hidden; background: #0099FF;" onClick=""> <div id="item1body" style="position:absolute; left:0; top:0; width:120px; height:160px; z-index:1; overflow: hidden"> <table width="100%" border="0" height="100%" cellpadding="2" cellspacing="0"> <tr> <td id="item1head" height="20" class="headtd2" onClick="showme(item1body,this)"> <div align="center">工作室</div> </td> </tr> <tr> <td class="bodytd"> <div id='KB1Parent' > <a href="#" onClick="expandIt('KB1');"> <IMG SRC='http://img.alixixi.com/icon_indextool.gif' BORDER=0>分类一</a></div> <div id='KB1Child' > <a href='time1.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif' BORDER=0>0001</a> <a href='time2.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif' BORDER=0>0002</a> <a href='time8.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif' BORDER=0>0003</a> </div> <div id='KB2Parent' > <a href="#" onClick="expandIt('KB2');"> <IMG SRC='http://img.alixixi.com/icon_indextool.gif' BORDER=0>分类二</a></div> <div id='KB2Child' class='child'> <a href='time1.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif' BORDER=0>0001</a> <a href='time2.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif' BORDER=0>0002</a> <a href='time8.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif' BORDER=0>0003</a></div> <div id='KB3Parent' ><a href="#" onClick="expandIt('KB3');"> <IMG SRC='http://img.alixixi.com/icon_indextool.gif' BORDER=0>分类三</a></div><div id='KB3Child' class='child'> <a href='time1.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif' BORDER=0>0001</a> <a href='time2.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif' BORDER=0>0002</a> <a href='time8.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif' BORDER=0>0003</a></div> <div id='KB4Parent' ><a href="#" onClick="expandIt('KB4');"> <IMG SRC='http://img.alixixi.com/icon_indextool.gif' BORDER=0>分类四</a></div><div id='KB4Child' class='child'> <a href='time1.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif' BORDER=0>0001</a> <a href='time2.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif' BORDER=0>0002</a> <a href='time8.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif' BORDER=0>0003</a></div> <div id='KB5Parent' > <a href="#" onClick="expandIt('KB5'); return false"> <IMG SRC='http://img.alixixi.com/icon_indextool.gif' BORDER=0>分类五</a></div><div id='KB5Child' class='child'> <a href='time1.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif' BORDER=0>0001</a> <a href='time2.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif' BORDER=0>0002</a> <a href='time8.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif' BORDER=0>0003</a></div> <div id='KB6Parent' ><a href="#" onClick="expandIt('KB6'); return false"> <IMG SRC='http://img.alixixi.com/icon_indextool.gif' BORDER=0>分类六</a></div><div id='KB6Child' class='child'> <a href='time1.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif' BORDER=0>0001</a> <a href='time2.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif' BORDER=0>0002</a> <a href='time8.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif' BORDER=0>0003</a></div> </td> </tr> </table> </div> <div id="item2body" style="position:absolute; left:0px; top:160; width:120; height:160; z-index:2; overflow: hidden"> <table width="100%" border="0" height="100%" cellpadding="2" cellspacing="0"> <tr> <td id="item2head" height="20" class="headtd1" onClick="showme(item2body,this)"> <div align="center">邮箱</div> </td> </tr> <tr> <td class="bodytd"> <div id='KB7Parent' > <a href="#" onClick="expandIt('KB7');"> <IMG SRC='http://img.alixixi.com/icon_indextool.gif' BORDER=0>分类一</a></div> <div id='KB7Child' > <a href='time1.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif' BORDER=0>0001</a> <a href='time2.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif' BORDER=0>0002</a> <a href='time8.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif' BORDER=0>0003</a> </div> <div id='KB8Parent' > <a href="#" onClick="expandIt('KB8');"> <IMG SRC='http://img.alixixi.com/icon_indextool.gif' BORDER=0>分类二</a></div> <div id='KB8Child' class='child'> <a href='time1.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif' BORDER=0>0001</a> <a href='time2.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif' BORDER=0>0002</a> <a href='time8.htm' target='_target'> <IMG SRC='http://img.alixixi.com/li01.gif' BORDER=0>0003</a></div> <SCRIPT> numTotal=8; scores[1]='KB1'; scores[2]='KB2'; scores[3]='KB3'; scores[4]='KB4'; scores[5]='KB5'; scores[6]='KB6'; scores[7]='KB7'; scores[8]='KB8' </SCRIPT> </td> </tr> </table> <p class="headtd1"> </p> </div> <div id="item3body" style="position:absolute; left:0; top:182; width:120px; height:160; z-index:3"> <table width="100%" border="0" height="100%" cellpadding="2" cellspacing="0"> <tr> <td id="item3head" height="20" class="headtd1" onClick="showme(item3body,this)"> <div align="center">Q Q</div> </td> </tr> <tr> <td class="bodytd"> <div align="center">37146743</div> </td> </tr> </table> </div> <div id="item4body" style="position:absolute; left:0; top:204; width:120px; height:160; z-index:4; overflow: hidden"> <table width="100%" border="0" height="100%" cellpadding="2" cellspacing="0"> <tr> <td id="item4head" height="20" class="headtd1" onClick="showme(item4body,this)"> <div align="center">朋友</div> </td> </tr> <tr> <td class="bodytd"> <div align="center"> <p>小一、旁腾 </p> </div> </td> </tr> </table> </div> <div id="item5body" style="position:absolute; left:0; top:226; width:120px; height:160; z-index:4; overflow: hidden"> <table width="100%" border="0" height="100%" cellpadding="2" cellspacing="0"> <tr> <td id="item5head" height="20" class="headtd1" onClick="showme(item5body,this)"> <div align="center">陌生人</div> </td> </tr> <tr> <td class="bodytd"> <div align="center"> <p>小虎 AAP 小伙伴小一</p> </div> </td> </tr> </table> </div>  <div id="item6body" style="position:absolute; left:0; top:248; width:120px; height:160; z-index:4; overflow: hidden"> <table width="100%" border="0" height="100%" cellpadding="2" cellspacing="0"> <tr> <td id="item6head" height="20" class="headtd1" onClick="showme(item6body,this)"> <div align="center">版本号</div> </td> </tr> <tr> <td class="bodytd"> <div align="center"> <p>版本号：1.1 封锁了移动过程中的点击事件这样不会出现抖动现象了。 </div> </td> </tr> </table> </div>  </div> </body> </html> <a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>
[提示：可先修改代码再按运行]

2个通用js树型导航相关推荐

php 菜单目录树,css实现的目录树型导航菜单
我这个导航效果是在纵向导航菜单制作的基础上,加入鼠标点击主目录的显示隐藏效果,修改的是DIV代码: onClick="document.getElementByIdx_x('child1') ...
php通用的树型类创建无限级树型菜单
生成树型结构所需要的2维数组,var $arr = array()数组格式如下: array( 1 => array('id'=>'1','parentID'=>0,'name'=& ...
强大的Js树型控件Dtree使用详解
http://www.lmwlove.com/ac/ID868 在学习文章之前,要学会看官方网站http://destroydrop.com/javascripts/tree.从官方页面你能知道:dt ...
dtree.js树的使用
2019独角兽企业重金招聘Python工程师标准>>> JS组件dtree轻松实现树型菜单:详细介绍应用dtree构建一个JavaScript树型菜单及其中参数配置说明这几天写个网 ...
CSS+JS灰色树型菜单导航代码
代码简介: CSS+JS打造的树型菜单,没有怎么美化,颜色看上去也不很美,提供一种思路,真想用的朋友好好修改一下颜色,里面都有注释,相信通过你的努力,它最终的效果一定很漂亮. 代码内容: <!D ...
HTML模仿QQ好友列表,JS+CSS实现类似QQ好友及黑名单效果的树型菜单
本文实例讲述了JS+CSS实现类似QQ好友及黑名单效果的树型菜单.分享给大家供大家参考.具体如下: 今天介绍的这个菜单堪称极品啊,不过里面的有些图标丢失了,路径还留在那,真想使用的朋友自己制作两个折叠 ...
下拉的DIV+CSS+JS二级树型菜单，刷新无影响
二级菜单,不论展开几个栏目,刷新不影响! Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
DIV+CSS+JS二级树型菜单，刷新无影响
二级菜单,不论展开几个栏目,刷新不影响! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...
html菜单树实现原理,HTML_DIV+CSS构成树型菜单，这是用DIV+CSS+JS构成的树型菜单 - phpStudy...
DIV+CSS构成树型菜单这是用DIV+CSS+JS构成的树型菜单,采用列表,符合WEB标准,在大多数WIN浏览器下,兼容性不错, xhtml见效果页,我现在做的是二个菜单,如果需要添加,可把 .. ...

2个通用js树型导航

2个通用js树型导航相关推荐

最新文章

热门文章