js實(shí)現(xiàn)改進(jìn)的仿藍(lán)色論壇導(dǎo)航菜單效果代碼
本文實(shí)例講述了js實(shí)現(xiàn)改進(jìn)的仿藍(lán)色論壇導(dǎo)航菜單效果代碼。分享給大家供大家參考。具體如下:
這是一款改進(jìn)的仿藍(lán)色論壇導(dǎo)航菜單,滑動(dòng)門級(jí)的導(dǎo)航菜單,網(wǎng)址跟蹤鏈接的JS導(dǎo)航菜單,可以支持二級(jí)的菜單。為改善用戶體驗(yàn),加了延時(shí)。其原理是將鏈接地址和網(wǎng)址比較,如果一致,則加強(qiáng)該鏈接和上級(jí)鏈接的顯示。
運(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="#">雅虎中國(guó)</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">故事傳說(shuō)</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">名言諺語(yǔ)</A> <A href="'+m_path+'column6.html">民俗節(jié)會(huì)</A> <A href="'+m_path+'column7.html">密方絕活</A> <A href="'+m_path+'column8.html">百家爭(zhēng)鳴</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">樂(lè) 府</a><ul><li><A href="'+m_path+'column20.html">娛樂(lè)動(dòng)態(tài)</A> <A href="'+m_path+'column21.html">華語(yǔ)</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">樂(lè)評(píng)</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) 科技探索 文化研究 社會(huì)實(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">真人真事 自己的事 沒(méi)有的事 過(guò)去的事 怕忘的事 八面來(lái)風(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)頁(yè)天堂</A> <A href="#" target=_blank>阿酷作家</A> <A href="#" target=_blank>好鄰里</A> <A href="/" target=_blank>萬(wàn)目網(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="#">雅虎中國(guó)</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>
希望本文所述對(duì)大家的JavaScript程序設(shè)計(jì)有所幫助。
- Java模擬HTTP Get Post請(qǐng)求 輕松實(shí)現(xiàn)校園BBS自動(dòng)回帖
- PHPWind 發(fā)帖回帖Api PHP版打包下載
- php discuz 主題表和回帖表的設(shè)計(jì)
- java發(fā)送http的get、post請(qǐng)求實(shí)現(xiàn)代碼
- java實(shí)現(xiàn)http的Post、Get、代理訪問(wèn)請(qǐng)求
- java使用httpclient模擬post請(qǐng)求和get請(qǐng)求示例
- JS實(shí)現(xiàn)的論壇Ajax打分效果完整實(shí)例
- php通過(guò)curl模擬登陸DZ論壇
- python實(shí)現(xiàn)的登陸Discuz!論壇通用代碼分享
- Java模擬HTTP Get Post請(qǐng)求實(shí)現(xiàn)論壇自動(dòng)回帖功能
相關(guān)文章
javascript分頁(yè)代碼(當(dāng)前頁(yè)碼居中)
昨天看了妙味課堂的 分頁(yè)視頻教程,今天自己參照其思路,自己寫了下,并且自己新增了一個(gè)顯示頁(yè)碼個(gè)數(shù)的屬性 showPageNum2012-09-09JavaScript對(duì)象數(shù)組如何按指定屬性和排序方向進(jìn)行排序
這篇文章主要介紹了JavaScript對(duì)象數(shù)組如何按指定屬性和排序方向進(jìn)行排序的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06詳解webpack打包時(shí)排除其中一個(gè)css、js文件或單獨(dú)打包一個(gè)css、js文件(兩種方法)
本文通過(guò)兩種方法給大家介紹了webpack打包時(shí)排除其中一個(gè)css、js文件,或單獨(dú)打包一個(gè)css、js文件的方法 ,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10JS版網(wǎng)站風(fēng)格切換實(shí)例代碼
這個(gè)網(wǎng)站風(fēng)格切換除了帶記憶功能外,還可設(shè)定保持時(shí)間,比如5天-180天,過(guò)了時(shí)間就自動(dòng)恢復(fù)到默認(rèn)樣式表。2008-10-10javascript斷點(diǎn)調(diào)試心得分享
javascript中程序是怎么可以中斷執(zhí)行,然后一步一步走下去。而且debug的時(shí)候,可以看到變量,調(diào)用棧等東西。這個(gè)是如何實(shí)現(xiàn)的?2016-04-04js中substring和substr的詳細(xì)介紹與用法
這篇文章介紹了js中substring和substr的用法,有需要的朋友可以參考一下2013-08-08