js實(shí)現(xiàn)改進(jìn)的仿藍(lán)色論壇導(dǎo)航菜單效果代碼

更新時(shí)間：2015年09月06日 12:15:01 作者：企鵝

這篇文章主要介紹了js實(shí)現(xiàn)改進(jìn)的仿藍(lán)色論壇導(dǎo)航菜單效果代碼,涉及JavaScript頁面元素的遍歷及樣式動態(tài)變換技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了js實(shí)現(xiàn)改進(jìn)的仿藍(lán)色論壇導(dǎo)航菜單效果代碼。分享給大家供大家參考。具體如下：

這是一款改進(jìn)的仿藍(lán)色論壇導(dǎo)航菜單，滑動門級的導(dǎo)航菜單，網(wǎng)址跟蹤鏈接的JS導(dǎo)航菜單，可以支持二級的菜單。為改善用戶體驗(yàn)，加了延時(shí)。其原理是將鏈接地址和網(wǎng)址比較，如果一致，則加強(qiáng)該鏈接和上級鏈接的顯示。

運(yùn)行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/js-f-blue-color-style-bbs-menu-codes/

具體代碼如下：

<html>
<head>
<title>改進(jìn)的仿藍(lán)色論壇導(dǎo)航菜單</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="#">網(wǎng)易</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="#">網(wǎng)址導(dǎo)航</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">民俗節(jié)會</A> <A href="'+m_path+'column7.html">密方絕活</A> <A href="'+m_path+'column8.html">百家爭鳴</A> <A href="'+m_path+'column9.html">異域采風(fēng)</A> <A href="'+m_path+'column10.html">現(xiàn)代文化</A> <A href="'+m_path+'column11.html">人文景點(diǎn)</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">娛樂動態(tài)</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">學(xué)　院</a><ul><li><a href="'+m_path+'academy.html">理學(xué) 哲學(xué) 玄學(xué) 文學(xué)</a></li></ul></li>'+
'<li class="lib"><a href="'+m_path+'action.html" target="_self">行　之</a><ul><li><a href="'+m_path+'action.html">學(xué)習(xí)經(jīng)驗(yàn) 科技探索 文化研究 社會實(shí)踐 哲理感悟</a></li></ul></li>'+
'<li class="lib"><a href="'+m_path+'channel3.html" target="_self">時(shí)　記</a><ul><li><a href="'+m_path+'channel3.html">真人真事 自己的事 沒有的事 過去的事 怕忘的事 八面來風(fēng) 就事論是</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">招業(yè)</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">發(fā)布到>></a><A href="#" target=_blank>網(wǎng)頁天堂</A> <A href="#" target=_blank>阿酷作家</A> <A href="#" target=_blank>好鄰里</A> <A href="/" target=_blank>萬目網(wǎng)</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>八強(qiáng)網(wǎng)</A> <A href="#" target=_blank>>>更多網(wǎng)站</A></li></ul></li>'+
'<li class="lib"><a href="'+m_path+'default.html" target="_self">首</a><ul><li><A href="#">新浪</A></span> <A href="#">網(wǎng)易</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="#">網(wǎng)址導(dǎo)航</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程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: