js melaksanakan kemahiran menu navigasi forum biru tiruan yang dipertingkatkan kemahiran code

Rumah

hujung hadapan web

tutorial js

js melaksanakan kemahiran menu navigasi forum biru tiruan yang dipertingkatkan kemahiran code_javascript

May 16, 2016 pm 03:40 PM

js Menu navigasi forum

本文实例讲述了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;

Salin selepas log masuk

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

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn