js實現改進的仿藍色論壇導航菜單效果代碼

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> js實現改進的仿藍色論壇導航菜單效果代碼

編輯：關於JavaScript

本文實例講述了js實現改進的仿藍色論壇導航菜單效果代碼。分享給大家供大家參考。具體如下：

這是一款改進的仿藍色論壇導航菜單，滑動門級的導航菜單，網址跟蹤鏈接的JS導航菜單，可以支持二級的菜單。為改善用戶體驗，加了延時。其原理是將鏈接地址和網址比較，如果一致，則加強該鏈接和上級鏈接的顯示。

運行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/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 href="http://www.baidu.com/">百度</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程序設計有所幫助。

關於JavaScript

JavaScript高級程序設計 DOM學習筆記: 第十章 DOM DOM是針對XML和HTML文檔的一個API：即規定了實現文本節點操控的屬性、方法，
淺談JSON.parse()和JSON.stringify(): 1.parse 用於從一個字符串中解析出json 對象。例如var str={name:cpf,ag
Javascript在IE和Firefox浏覽器常見兼容性問題總結: 本文總結分析了Javascript在IE和Firefox浏覽器常見兼容性問題。分享給大家供大家參考，

JavaScript基礎知識 JSON基礎正則表達式關於JavaScript JavaScript技巧 jQuery入門知識 AJAX入門 JavaScript綜合知識

DIV CSS 佈局教程網

相關文章