suchen

Heim >Web-Frontend >js-Tutorial >js implementiert verbesserte Code-Javascript-Fähigkeiten im Nachahmungsblau-Forum-Navigationsmenü

js implementiert verbesserte Code-Javascript-Fähigkeiten im Nachahmungsblau-Forum-Navigationsmenü

WBOY
WBOYOriginal
2016-05-16 15:40:261525Durchsuche

本文实例讲述了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('[\&#63;&]' + 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&#63;articleid=87283F3120294266971435E9C63F0E52&projectid=13&username=lorlo" target="_self">文</a><ul><li><a href="'+m_path+'showfile.html&#63;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程序设计有所帮助。

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Implementierung von Online-Fotografie und Online-Foto-Browsing basierend auf jQuery PHP Mysql_javascript-KenntnissenNächster Artikel：Implementierung von Online-Fotografie und Online-Foto-Browsing basierend auf jQuery PHP Mysql_javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen