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程序设计有所帮助。

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

熱門話題

人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬,在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別,大大縮短了使用者等待時間,提高了使用者體驗;弱勢是:受到模型大小限制,其中準確率也有限。如何在web端使用js實現人臉偵測呢?為了實現Web端人臉識別,需要熟悉相關的程式語言和技術,如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是,由於Web端的計

股票分析必備工具:學習PHP和JS繪製蠟燭圖的步驟,需要具體程式碼範例隨著網路和科技的快速發展,股票交易已成為許多投資者的重要途徑之一。而股票分析是投資人決策的重要一環,其中蠟燭圖被廣泛應用於技術分析。學習如何使用PHP和JS繪製蠟燭圖將為投資者提供更多直觀的信息,幫助他們更好地做出決策。蠟燭圖是一種以蠟燭形狀來展示股票價格的技術圖表。它展示了股票價格的

如何使用PHP和JS創建股票蠟燭圖股票蠟燭圖是股票市場中常見的技術分析圖形,透過繪製股票的開盤價、收盤價、最高價和最低價等數據,幫助投資者更直觀地了解股票的價格波動情形。本文將教你如何使用PHP和JS創建股票蠟燭圖,並附上具體的程式碼範例。一、準備工作在開始之前,我們需要準備以下環境:1.一台運行PHP的伺服器2.一個支援HTML5和Canvas的瀏覽器3

如何使用JS和百度地圖實現地圖點擊事件處理功能概述:在網路開發中,經常需要使用地圖功能來展示地理位置和地理資訊。而地圖上的點擊事件處理是地圖功能中常用且重要的一環。本文將介紹如何使用JS和百度地圖API來實現地圖的點擊事件處理功能,並給出具體的程式碼範例。步驟:匯入百度地圖的API檔案首先,要在HTML檔案中匯入百度地圖API的文件,可以透過以下程式碼實現:

Discuz論壇權限管理:閱讀權限設定指南在Discuz論壇管理中,權限設定是至關重要的一環。其中,閱讀權限的設定尤其重要,它決定了不同使用者在論壇中能夠看到的內容範圍。本文將詳細介紹Discuz論壇的閱讀權限設置,以及如何針對不同的需求進行靈活的配置。一、閱讀權限基礎概念在Discuz論壇中,閱讀權限主要有以下幾個概念需要了解:預設閱讀權限:新使用者註冊後預設

隨著網路金融的快速發展,股票投資已經成為了越來越多人的選擇。而在股票交易中,蠟燭圖是常用的技術分析方法,它能夠顯示股票價格的變動趨勢,幫助投資人做出更精準的決策。本文將透過介紹PHP和JS的開發技巧,帶領讀者了解如何繪製股票蠟燭圖,並提供具體的程式碼範例。一、了解股票蠟燭圖在介紹如何繪製股票蠟燭圖之前,我們首先需要先了解什麼是蠟燭圖。蠟燭圖是由日本人

如何使用JS和百度地圖實現地圖多邊形繪製功能在現代網頁開發中,地圖應用程式已成為常見的功能之一。而地圖上繪製多邊形,可以幫助我們將特定區域標記,方便使用者進行檢視和分析。本文將介紹如何使用JS和百度地圖API實現地圖多邊形繪製功能,並提供具體的程式碼範例。首先,我們需要引入百度地圖API。可以利用以下程式碼在HTML檔案中導入百度地圖API的JavaScript

js和vue的關係:1、JS作為Web開發基石;2、Vue.js作為前端框架的崛起;3、JS與Vue的互補關係;4、JS與Vue的實踐應用。
