js實作改進的仿藍色論壇導航選單效果程式碼

首頁

web前端

js教程

js實作改進的仿藍色論壇導航選單效果程式碼_javascript技巧

May 16, 2016 pm 03:40 PM

js 導航選單論壇

本文实例讲述了js实现改进的仿蓝色论坛导航菜单效果代码。分享给大家供大家参考。具体如下：

这是一款改进的仿蓝色论坛导航菜单，滑动门级的导航菜单，网址跟踪链接的JS导航菜单，可以支持二级的菜单。为改善用户体验，加了延时。其原理是将链接地址和网址比较，如果一致，则加强该链接和上级链接的显示。

运行效果截图如下：

在线演示地址如下：

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

具体代码如下：

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;改进的仿蓝色论坛导航菜单&lt;/title&gt;
&lt;style&gt;
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;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="mch"&gt;&lt;/div&gt;
&lt;script&gt;
var m_path="/";
var dPu="wisdom";
&lt;/script&gt;
&lt;script&gt;
if(typeof(m_path)=='undefined')var m_path="";
function QueryString( paramName )
{
 var oRegex = new RegExp('[\&#63;&]' + paramName + '=([^&]+)','i') ;
 var oMatch = oRegex.exec(window.location.search) ;
 if (oMatch && oMatch.length&gt;1) return oMatch[1];
 else return null;
}
navdata='&lt;ul id="nav"&gt;'+
'&lt;li class="lib"&gt;&lt;a href="'+m_path+'default.html" target="_self"&gt;首&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;A href="#"&gt;新浪&lt;/A&gt;&lt;/span&gt; &lt;A href="#"&gt;网易&lt;/A&gt; &lt;A href="#"&gt;QQ&lt;/A&gt; &lt;A href="#"&gt;雅虎中国&lt;/A&gt; &lt;A href="http://www.baidu.com/"&gt;百度&lt;/A&gt; &lt;A href="#"&gt;Google搜索&lt;/A&gt; &lt;a href="#"&gt;About&lt;/a&gt; &lt;a href="#"&gt;USAToday&lt;/a&gt; &lt;a href="#"&gt;NewsNow&lt;/a&gt; &lt;a href="/"&gt;BBC&lt;/a&gt; &lt;a href="#"&gt;CNN&lt;/a&gt; &lt;a href="#"&gt;Alexa&lt;/a&gt; &lt;a href="#"&gt;网址导航&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;'+
'&lt;li class="lib"&gt;&lt;a href="'+m_path+'channel1.html" target="_self"&gt;春　秋&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;A href="'+m_path+'column1.html"&gt;故事传说&lt;/A&gt; &lt;A href="'+m_path+'column2.html"&gt;生肖星座&lt;/A&gt; &lt;A href="'+m_path+'column3.html"&gt;姓氏宗亲&lt;/A&gt; &lt;A href="'+m_path+'column4.html"&gt;周易八卦&lt;/A&gt; &lt;A href="'+m_path+'wisdom.html"&gt;名言谚语&lt;/A&gt; &lt;A href="'+m_path+'column6.html"&gt;民俗节会&lt;/A&gt; &lt;A href="'+m_path+'column7.html"&gt;密方绝活&lt;/A&gt; &lt;A href="'+m_path+'column8.html"&gt;百家争鸣&lt;/A&gt; &lt;A href="'+m_path+'column9.html"&gt;异域采风&lt;/A&gt; &lt;A href="'+m_path+'column10.html"&gt;现代文化&lt;/A&gt; &lt;A href="'+m_path+'column11.html"&gt;人文景点&lt;/A&gt; &lt;A href="'+m_path+'column12.html"&gt;龙的传人&lt;/A&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;'+
'&lt;li class="lib"&gt;&lt;a href="'+m_path+'channel4.html" target="_self"&gt;乐　府&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;A href="'+m_path+'column20.html"&gt;娱乐动态&lt;/A&gt; &lt;A href="'+m_path+'column21.html"&gt;华语&lt;/A&gt; &lt;A href="'+m_path+'column22.html"&gt;日韩&lt;/A&gt; &lt;A href="'+m_path+'column23.html"&gt;欧美&lt;/A&gt; &lt;A href="'+m_path+'column24.html"&gt;摇滚&lt;/A&gt; &lt;A href="'+m_path+'column25.html"&gt;图片&lt;/A&gt; &lt;A href="'+m_path+'column26.html"&gt;人物&lt;/A&gt; &lt;A href="'+m_path+'column27.html"&gt;古典&lt;/A&gt; &lt;A href="'+m_path+'column28.html"&gt;影视&lt;/A&gt; &lt;A href="'+m_path+'column29.html"&gt;综艺&lt;/A&gt; &lt;A href="'+m_path+'column30.html"&gt;非主流&lt;/A&gt; &lt;A href="'+m_path+'column31.html"&gt;乐评&lt;/A&gt;&lt;a href="'+m_path+'column32.html" style="padding:0;"&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;'+
'&lt;li class="lib"&gt;&lt;a href="'+m_path+'academy.html" target="_self"&gt;学　院&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href="'+m_path+'academy.html"&gt;理学 哲学 玄学 文学&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;'+
'&lt;li class="lib"&gt;&lt;a href="'+m_path+'action.html" target="_self"&gt;行　之&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href="'+m_path+'action.html"&gt;学习经验 科技探索 文化研究 社会实践 哲理感悟&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;'+
'&lt;li class="lib"&gt;&lt;a href="'+m_path+'channel3.html" target="_self"&gt;时　记&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href="'+m_path+'channel3.html"&gt;真人真事 自己的事 没有的事 过去的事 怕忘的事 八面来风 就事论是&lt;/a&gt;&lt;a href="'+m_path+'column70.html" style="padding:0;"&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;'+
'&lt;li class="lib"&gt;&lt;a href="'+m_path+'leader.html" target="_self"&gt;易　流&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href="'+m_path+'leader-offer.html"&gt;招业&lt;/a&gt; &lt;a href="'+m_path+'leader-cool.html"&gt;酷&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;'+
'&lt;li class="lib"&gt;&lt;a href="'+m_path+'showfile.html&#63;articleid=87283F3120294266971435E9C63F0E52&projectid=13&username=lorlo" target="_self"&gt;文&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href="'+m_path+'showfile.html&#63;articleid=87283F3120294266971435E9C63F0E52&projectid=13&username=lorlo"&gt;发布到&gt;&gt;&lt;/a&gt;&lt;A href="#" target=_blank&gt;网页天堂&lt;/A&gt; &lt;A href="#" target=_blank&gt;阿酷作家&lt;/A&gt; &lt;A href="#" target=_blank&gt;好邻里&lt;/A&gt; &lt;A href="/" target=_blank&gt;万目网&lt;/A&gt; &lt;A href="#" target=_blank&gt;第五电影&lt;/A&gt; &lt;A href="#" target=_blank&gt;心地家园&lt;/A&gt; &lt;A href="#" target=_blank&gt;日月峡&lt;/A&gt; &lt;A href="#" target=_blank&gt;佛教博客&lt;/A&gt; &lt;A href="#" target=_blank&gt;求知求是&lt;/A&gt; &lt;A href="#" target=_blank&gt;八强网&lt;/A&gt; &lt;A href="#" target=_blank&gt;&gt;&gt;更多网站&lt;/A&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;'+
'&lt;li class="lib"&gt;&lt;a href="'+m_path+'default.html" target="_self"&gt;首&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;A href="#"&gt;新浪&lt;/A&gt;&lt;/span&gt; &lt;A href="#"&gt;网易&lt;/A&gt; &lt;A href="#"&gt;QQ&lt;/A&gt; &lt;A href="#"&gt;雅虎中国&lt;/A&gt; &lt;A href="#"&gt;百度&lt;/A&gt; &lt;A href="#"&gt;Google搜索&lt;/A&gt; &lt;a href="#"&gt;About&lt;/a&gt; &lt;a href="#"&gt;USAToday&lt;/a&gt; &lt;a href="#"&gt;NewsNow&lt;/a&gt; &lt;a href="#"&gt;BBC&lt;/a&gt; &lt;a href="#"&gt;CNN&lt;/a&gt; &lt;a href="#"&gt;Alexa&lt;/a&gt; &lt;a href="#"&gt;网址导航&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;'+
'&lt;/ul&gt;';
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&lt;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&lt;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&gt;0)nA[j].style.background="#199501";
     nA[j].onclick=function(){this.blur();return false}
     dg=3;
     }
    }
   }
  } 
 }
}
startList(0);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

登入後複製

希望本文所述对大家的JavaScript程序设计有所帮助。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn