每日更新|TOP排行榜|Tag標(biāo)簽|充值

無憂首頁網(wǎng)頁模板程序模板建站教程視頻教程網(wǎng)頁特效圖標(biāo)素材字體下載站長工具站長問答

網(wǎng)頁特效代碼模板無憂>網(wǎng)頁特效>菜單導(dǎo)航特效代碼>

收藏分享查看評(píng)論菜單導(dǎo)航

js實(shí)現(xiàn)無限級(jí)樹形導(dǎo)航列表_菜單導(dǎo)航特效

查看演示效果

特效Tag：無限級(jí)樹形菜單添加

js實(shí)現(xiàn)無限級(jí)樹形下拉導(dǎo)航菜單，簡潔實(shí)用，用到一個(gè)已封裝好的JS類，有用的大家借鑒一下。

<meta http-equiv="Content-Type" mrc="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(http://p1.mb5u.com/texiao/1/user_23.gif) 5px 10px no-repeat;} 
    #nav.dyn li.open{ background:url(http://p1.mb5u.com/texiao/1/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實(shí)現(xiàn)無限級(jí)樹形導(dǎo)航列表</h2>
<ul id="nav"> 
    <li><a href="#">主頁</a></li> 
    <li><a href="#">產(chǎn)品</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="#">服務(wù)</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="#">關(guān)于我們</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="#">聯(lián)系我們</a> 
        <ul> 
            <li><a href="#">大類別一</a></li> 
            <li><a href="#">大類別二</a></li> 
        </ul> 
    </li> 
</ul>

所屬頻道：菜單導(dǎo)航特效/更新時(shí)間：2011-02-25

[收藏][報(bào)錯(cuò)][返回列表]

相關(guān)菜單導(dǎo)航特效：

菜單導(dǎo)航特效Rss訂閱特效代碼搜索

菜單導(dǎo)航特效推薦

猜你也喜歡看這些

相關(guān)鏈接：
復(fù)制本頁鏈接| 搜索js實(shí)現(xiàn)無限級(jí)樹形導(dǎo)航列表
特效說明：
菜單導(dǎo)航模板-js實(shí)現(xiàn)無限級(jí)樹形導(dǎo)航列表。