本文實例講述了js實現改進的仿藍色論壇導航菜單效果代碼。分享給大家供大家參考。具體如下：
這是一款改進的仿藍色論壇導航菜單，滑動門級的導航菜單，網址跟蹤鏈接的JS導航菜單，可以支持二級的菜單。為改善用戶體驗，加了延時。其原理是將鏈接地址和網址比較，如果一致，則加強該鏈接和上級鏈接的顯示。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/js-f-blue-color-style-bbs-menu-codes/
具體代碼如下：
<html><head><title>改進的仿藍色論壇導航菜單</title><style>body{WIDTH:760px;margin:0 auto;padding:0;text-align:center}#mch{WIDTH:760px;margin:0;text-align:center;}#mch ul { padding: 0; margin: 0; list-style: none;}#mch li { list-style: none; float: left; margin:0 auto; padding: 0;line-height:16px;}#mch li div{}#mch li ul { position:relative; display: none;}#mch li:hover #mch ul, #mch li.over ul { display: block;}#mch li.over{background:#147202;height:26px;}#mch ul li a{ display:block; font-size:12px; padding:5px 23px 3px 23px; text-decoration: none; color: #ffffff;}#mch ul li a:hover{ background-color:#199501;} #mch .lib ul li a{ float:left; display:block; width:auto; margin:4px 0 0 0; padding:2px 4px 0 4px; text-align:center; text-decoration:none; color:#ffffff; } #mch .lib a:hover{ text-decoration:none; color: #ff2200; }#mch .lib{margin:0 3px 0 0;}#mch ul .lib ul li{position:absolute;float:left;padding:0;margin:2px 2px 2px 0px;height:25px;top:0;left:0;width:760px;background:#147202;}#mch .lib li a{ display:block; font-size:12px; padding:4px 3px; margin-right:1px; text-decoration: none; color: #199501;}#mch .lib li a:hover{background:#199501;}</style></head><body><div id="mch"></div><script>var m_path="/";var dPu="wisdom";</script><script>if(typeof(m_path)=='undefined')var m_path="";function QueryString( paramName ){ var oRegex = new RegExp('[/?&]' + paramName + '=([^&]+)','i') ; var oMatch = oRegex.exec(window.location.search) ; if (oMatch && oMatch.length>1) return oMatch[1]; else return null;}navdata='<ul id="nav">'+'<li class="lib"><a href="'+m_path+'default.html" target="_self">首</a><ul><li><A href="#">新浪</A></span> <A href="#">網易</A> <A href="#">QQ</A> <A href="#">雅虎中國</A> <A >百度</A> <A href="#">Google搜索</A> <a href="#">About</a> <a href="#">USAToday</a> <a href="#">NewsNow</a> <a href="/">BBC</a> <a href="#">CNN</a> <a href="#">Alexa</a> <a href="#">網址導航</a></li></ul></li>'+'<li class="lib"><a href="'+m_path+'channel1.html" target="_self">春 秋</a><ul><li><A href="'+m_path+'column1.html">故事傳說</A> <A href="'+m_path+'column2.html">生肖星座</A> <A href="'+m_path+'column3.html">姓氏宗親</A> <A href="'+m_path+'column4.html">周易八卦</A> <A href="'+m_path+'wisdom.html">名言諺語</A> <A href="'+m_path+'column6.html">民俗節會</A> <A href="'+m_path+'column7.html">密方絕活</A> <A href="'+m_path+'column8.html">百家爭鳴</A> <A href="'+m_path+'column9.html">異域采風</A> <A href="'+m_path+'column10.html">現代文化</A> <A href="'+m_path+'column11.html">人文景點</A> <A href="'+m_path+'column12.html">龍的傳人</A></li></ul></li>'+'<li class="lib"><a href="'+m_path+'channel4.html" target="_self">樂 府</a><ul><li><A href="'+m_path+'column20.html">娛樂動態</A> <A href="'+m_path+'column21.html">華語</A> <A href="'+m_path+'column22.html">日韓</A> <A href="'+m_path+'column23.html">歐美</A> <A href="'+m_path+'column24.html">搖滾</A> <A href="'+m_path+'column25.html">圖片</A> <A href="'+m_path+'column26.html">人物</A> <A href="'+m_path+'column27.html">古典</A> <A href="'+m_path+'column28.html">影視</A> <A href="'+m_path+'column29.html">綜藝</A> <A href="'+m_path+'column30.html">非主流</A> <A href="'+m_path+'column31.html">樂評</A><a href="'+m_path+'column32.html" style="padding:0;"></a></li></ul></li>'+'<li class="lib"><a href="'+m_path+'academy.html" target="_self">學 院</a><ul><li><a href="'+m_path+'academy.html">理學 哲學 玄學 文學</a></li></ul></li>'+'<li class="lib"><a href="'+m_path+'action.html" target="_self">行 之</a><ul><li><a href="'+m_path+'action.html">學習經驗 科技探索 文化研究 社會實踐 哲理感悟</a></li></ul></li>'+'<li class="lib"><a href="'+m_path+'channel3.html" target="_self">時 記</a><ul><li><a href="'+m_path+'channel3.html">真人真事 自己的事 沒有的事 過去的事 怕忘的事 八面來風 就事論是</a><a href="'+m_path+'column70.html" style="padding:0;"></a></li></ul></li>'+'<li class="lib"><a href="'+m_path+'leader.html" target="_self">易 流</a><ul><li><a href="'+m_path+'leader-offer.html">招業</a> <a href="'+m_path+'leader-cool.html">酷</a></li></ul></li>'+'<li class="lib"><a href="'+m_path+'showfile.html?articleid=87283F3120294266971435E9C63F0E52&projectid=13&username=lorlo" target="_self">文</a><ul><li><a href="'+m_path+'showfile.html?articleid=87283F3120294266971435E9C63F0E52&projectid=13&username=lorlo">發布到>></a><A href="#" target=_blank>網頁天堂</A> <A href="#" target=_blank>阿酷作家</A> <A href="#" target=_blank>好鄰里</A> <A href="/" target=_blank>萬目網</A> <A href="#" target=_blank>第五電影</A> <A href="#" target=_blank>心地家園</A> <A href="#" target=_blank>日月峽</A> <A href="#" target=_blank>佛教博客</A> <A href="#" target=_blank>求知求是</A> <A href="#" target=_blank>八強網</A> <A href="#" target=_blank>>>更多網站</A></li></ul></li>'+'<li class="lib"><a href="'+m_path+'default.html" target="_self">首</a><ul><li><A href="#">新浪</A></span> <A href="#">網易</A> <A href="#">QQ</A> <A href="#">雅虎中國</A> <A href="#">百度</A> <A href="#">Google搜索</A> <a href="#">About</a> <a href="#">USAToday</a> <a href="#">NewsNow</a> <a href="#">BBC</a> <a href="#">CNN</a> <a href="#">Alexa</a> <a href="#">網址導航</a></li></ul></li>'+'</ul>';document.getElementById('mch').innerHTML=navdata;var dfr,dfrover,thsobj,thsobjover;if(typeof(dPu)=="undefined")var dPu=document.location.pathname.replace(/(.*//){0,}([^/.]+).*/ig,"$2");if(dPu==""||dPu=="/")dPu="default";//var thslft=;function startList(dg) { if (document.getElementById) { var navRoot = document.getElementById("nav"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { var nA=node.getElementsByTagName('a'); nA[0].style.background="#199501"; node.className=node.className.replace(" over", ""); if((dg==0||dg==3)&&node.parentNode==navRoot){ node.getElementsByTagName('li')[0].style.left=-node.offsetLeft+document.getElementById('mch').getElementsByTagName('li')[0].offsetLeft+"px"; node.onmouseover=function() { thsobjover=this; clearTimeout(dfr); dfrover=setTimeout("startList(1);thsobjover.className+=' over';thsobjover.getElementsByTagName('a')[0].style.background='#147202';",200); } node.onmouseout=function() { thsobj=this; clearTimeout(dfrover); dfr=setTimeout("thsobj.getElementsByTagName('a')[0].style.background='#199501';thsobj.className=thsobj.className.replace(' over','');startList(2);",2000); } } if(dg==1||dg==3) continue; for(j=0;j<nA.length;j++){ if(nA[j].pathname.replace(/(.*//){0,}([^/.]+).*/ig,"$2")==dPu){ node.className+=" over"; nA[0].style.background="#147202"; nA[0].style.fontWeight="800"; if(j>0)nA[j].style.background="#199501"; nA[j].onclick=function(){this.blur();return false} dg=3; } } } } }}startList(0);</script></body></html>希望本文所述對大家的JavaScript程序設計有所幫助。
新聞熱點
疑難解答
