js實現(xiàn)的黑背景灰色二級導(dǎo)航菜單效果代碼
更新時間：2015年08月24日 11:37:54 作者：企鵝
這篇文章主要介紹了js實現(xiàn)的黑背景灰色二級導(dǎo)航菜單效果代碼,涉及javascript操作頁面元素動態(tài)切換的實現(xiàn)技巧,非常具有實用價值,需要的朋友可以參考下
本文實例講述了js實現(xiàn)的黑背景灰色二級導(dǎo)航菜單效果代碼。分享給大家供大家參考。具體如下：
這是一款js實現(xiàn)的黑背景灰色二級導(dǎo)航菜單，兼容IE6、firefox的js+css橫向二極導(dǎo)航菜單。挺簡潔，不過很清新，二級菜單是水平顯示在主菜單的下方，采用流行的微軟雅黑字體，若不想用這種字體，可換成默認(rèn)的宋體即可。
運行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/js-black-bgcolor-2level-nav-style-codes/
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
<TITLE>兼容IE6、firefox的灰色橫向二極導(dǎo)航菜單代碼</TITLE>
<style type=text/css>
BODY { background:#26272b;}
a{ color:#FFFFFF}
UL {LIST-STYLE-TYPE: none;padding:0px;margin:0px;}
LI {FONT-SIZE: 12px; COLOR: #333; LINE-HEIGHT: 1.5em; FONT-FAMILY: "微軟雅黑", Arial, Verdana;}
.hide {DISPLAY: none}
#mainmenu_top{width:980px; margin:0 auto;BACKGROUND: url('images/nav_bg.gif') bottom repeat-x;HEIGHT: 40px; }
#mainmenu_top UL{}
#mainmenu_top UL LI {FLOAT: left;}
#mainmenu_top UL LI A {WIDTH: 100px;CURSOR: pointer;line-HEIGHT:32px;padding:6px 0 2px;text-decoration: none;DISPLAY: block;COLOR: #fff;TEXT-ALIGN: center; FONT-WEIGHT: bold;}
#mainmenu_top .menu-lft {padding-left:10px;background:url('images/nav_l.gif') no-repeat left bottom;height:40px;}
#mainmenu_top .menu-rht {background:url('images/nav_r.gif') no-repeat right bottom;height:40px;}
#mainmenu_top UL LI .menuhover {BACKGROUND: url('images/nav_hover.gif') bottom repeat-x; COLOR: #000;}
#mainmenu_top UL LI.home{BACKGROUND: url('images/nav_home.gif') center bottom no-repeat;}
#mainmenu_bottom {width:980px; margin:0 auto;height:32px;line-height:32px;display:block;overflow:hidden;BACKGROUND:#fff;}
#mainmenu_bottom UL LI { FLOAT: left; MARGIN-LEFT:12px;padding:0 12px;HEIGHT: 32px;}
#mainmenu_bottom UL LI A {COLOR: #313131; LINE-HEIGHT: 32px;PADDING-RIGHT: 18px;DISPLAY: block;text-decoration: none; background:url('images/line.gif') no-repeat right bottom;}
#mainmenu_bottom UL LI A:hover {text-decoration: underline;}
</style>
<SCRIPT type=text/javascript>
var waitting = 1;
var secondLeft = waitting;
var timer;
var sourceObj;
var number;
function getObject(objectId)//獲取id的函數(shù)
{
if(document.getElementById && document.getElementById(objectId)) {
// W3C DOM
return document.getElementById(objectId);
} else if (document.all && document.all(objectId)) {
// MSIE 4 DOM
return document.all(objectId);
} else if (document.layers && document.layers[objectId]) {
// NN 4 DOM.. note: this won't find nested layers
return document.layers[objectId];
} else {
return false;
}
}
function SetTimer()//主導(dǎo)航時間延遲的函數(shù)
{
for(j=1; j <10; j++){
if (j == number){
if(getObject("mm"+j)!=false){
getObject("mm"+ number).className = "menuhover";
getObject("mb"+ number).className = "";
}
}
else{
if(getObject("mm"+j)!=false){
getObject("mm"+ j).className = "";
getObject("mb"+ j).className = "hide";
}
}
}
}
function CheckTime()//設(shè)置時間延遲后
{
secondLeft--;
if ( secondLeft == 0 )
{
clearInterval(timer);
SetTimer();
}
}
function showM(thisobj,Num)//主導(dǎo)航鼠標(biāo)滑過函數(shù),帶時間延遲
{
number = Num;
sourceObj = thisobj;
secondLeft = 1;
timer = setTimeout('CheckTime()',100);
}
function OnMouseLeft()//主導(dǎo)航鼠標(biāo)移出函數(shù),清除時間函數(shù)
{
clearInterval(timer);
}
</SCRIPT>
<!--導(dǎo)航開始-->
<DIV id=mainmenu_body>
<!--主導(dǎo)航開始-->
<DIV id=mainmenu_top>
<div class="menu-lft"><div class="menu-rht">
<UL>
<LI class="home"><A id=mm1 onmouseover=showM(this,1); onmouseout=OnMouseLeft(); href="#" target=_parent>網(wǎng)站首頁</A> </LI>
<LI><A id=mm2 onmouseover=showM(this,2); onmouseout=OnMouseLeft(); href="#" target=_parent>JS代碼</A> </LI>
<LI><A id=mm3 onmouseover=showM(this,3); onmouseout=OnMouseLeft(); href="#" target=_parent>電子商務(wù)</A> </LI>
<LI><A id=mm4 onmouseover=showM(this,4); onmouseout=OnMouseLeft(); href="#" target=_parent>腳本下載</A> </LI>
<LI><A id=mm5 onmouseover=showM(this,5); onmouseout=OnMouseLeft(); href="#" target=_parent>建站技巧</A> </LI>
<LI><A id=mm6 onmouseover=showM(this,6); onmouseout=OnMouseLeft(); href="#" target=_parent>CSS技巧</A> </LI>
<LI><A id=mm7 onmouseover=showM(this,7); onmouseout=OnMouseLeft(); href="#" target=_parent>CSS導(dǎo)航菜單</A> </LI>
<LI><A id=mm8 onmouseover=showM(this,8); onmouseout=OnMouseLeft(); href="#" target=_parent>網(wǎng)絡(luò)營銷</A> </LI>
<LI><A id=mm9 onmouseover=showM(this,9); onmouseout=OnMouseLeft(); href="#" target=_parent>SEO優(yōu)化</A> </LI></UL>
</DIV></DIV>
</DIV>
<!--子導(dǎo)航導(dǎo)航開始-->
<DIV id=mainmenu_bottom>
<UL class=hide id=mb1>
<LI><A href="#">2012年元旦網(wǎng)站推廣驚喜促銷價</A> </LI>
<LI><A href="#">網(wǎng)站公告：腳本之家7年了</A> </LI> </UL>
<UL class=hide id=mb2>
<LI><A href="#" target=_parent>腳本之家</A> </LI>
<LI><A href="#" target=_parent>腳本之家</A> </LI>
<LI><A href="#" target=_parent>腳本之家</A> </LI>
<LI><A href="#" target=_parent>腳本之家</A> </LI>
<LI><A href="#" target=_parent>腳本之家</A> </LI>
<LI><A href="#" target=_parent>網(wǎng)頁特效</A> </LI></UL>
<UL class=hide id=mb3>
<LI><A href="#" target=_parent>腳本之家</A> </LI>
<LI><A href="#" target=_parent>腳本之家</A> </LI>
<LI><A href="#" target=_parent>網(wǎng)絡(luò)營銷</A> </LI>
<LI><A href="#" target=_parent>網(wǎng)絡(luò)營銷</A> </LI>
<LI><A href="#" target=_parent>網(wǎng)絡(luò)營銷</A> </LI>
<LI><A href="#" target=_parent>網(wǎng)絡(luò)營銷</A> </LI>
<LI><A href="#" target=_parent>網(wǎng)絡(luò)營銷</A> </LI>
<LI><A href="#" target=_parent>網(wǎng)頁特效</A> </LI></UL>
<UL class=hide id=mb4>
<LI><A href="#" target=_parent>腳本之家</A> </LI>
<LI><A href="#" target=_parent>網(wǎng)頁特效</A> </LI>
<LI><A href="#" target=_parent>網(wǎng)絡(luò)營銷</A> </LI>
<LI><A href="#" target=_parent>網(wǎng)絡(luò)營銷</A> </LI></UL>
<UL class=hide id=mb5>
<LI><A href="#" target=_parent>腳本之家</A> </LI>
<LI><A href="#" target=_parent>服務(wù)器租用首頁</A> </LI>
<LI><A href="#" target=_parent>網(wǎng)絡(luò)營銷</A> </LI>
<LI><A href="#" target=_parent>網(wǎng)絡(luò)營銷</A> </LI>
<LI><A href="#" target=_parent>超級機(jī)房</A> </LI>
<LI><A href="#" target=_parent>腳本之家</A> </LI></UL>
<UL class=hide id=mb6>
<LI><A href="#" target=_parent>腳本之家</A> </LI>
<LI><A href="#" target=_parent>腳本下載</A> </LI>
<LI><A href="#" target=_parent>腳本之家</A> </LI>
<LI><A href="#" target=_parent>腳本之家</A> </LI></UL>
<UL class=hide id=mb7>
<LI><A href="#" target=_parent>腳本之家</A> </LI>
<LI><A href="#" target=_parent>腳本之家</A> </LI>
<LI><A href="#" target=_parent>腳本之家</A> </LI>
<LI><A href="#" target=_parent>個人建站</A> </LI>
<LI><A href="#" target=_parent>門戶建站</A> </LI></UL>
<UL class=hide id=mb8 style="DISPLAY: none">
<LI><A href="#" target=_parent>腳本之家</A> </LI>
<LI><A href="#" target=_parent>網(wǎng)絡(luò)營銷</A> </LI>
<LI><A href="#" target=_parent>網(wǎng)絡(luò)營銷</A> </LI></UL>
<UL class=hide id=mb9>
<LI><A href="#">腳本之家</A> </LI>
<LI><A href="#" target=_parent>網(wǎng)絡(luò)營銷</A> </LI>
<LI><A href="#" target=_parent>網(wǎng)頁特效</A> </LI>
<LI><A href="#" target=_parent>網(wǎng)絡(luò)營銷</A> </LI>
<LI><A href="#" target=_parent>網(wǎng)絡(luò)營銷</A> </LI></UL>
<script>
function mmenuURL()//主導(dǎo)航、二級導(dǎo)航顯示函數(shù)
{
var thisURL = document.URL;
tmpUPage = thisURL.split( "/" );
thisUPage_s = tmpUPage[ tmpUPage.length-2 ];
thisUPage_s= thisUPage_s.toLowerCase();//小寫
//thisUPage=thisUPage.substring(0,4)
if(thisUPage_s=="test.hichina.com"||thisUPage_s=="www.net.cn"||thisUPage_s=="www.hichina.com")
{
getObject("mm1").className="menuhover"
getObject("mb1").className = "";
}
else if(thisUPage_s=="domain")
{
getObject("mm2").className="menuhover"
getObject("mb2").className = "";
}
else if(thisUPage_s=="hosting")
{
getObject("mm3").className="menuhover"
getObject("mb3").className = "";
}
else if(thisUPage_s=="mail")
{
getObject("mm4").className="menuhover"
getObject("mb4").className = "";
}
else if(thisUPage_s=="solutions"||thisUPage_s=="site"){
getObject("mm5").className="menuhover"
getObject("mb5").className = "";
}
else if(thisUPage_s=="promotion"){
getObject("mm6").className="menuhover"
getObject("mb6").className = "";
}
else if(thisUPage_s=="trade"||thisUPage_s=="phonetic"||thisUPage_s=="switchboard"||thisUPage_s=="note"){
getObject("mm7").className="menuhover"
getObject("mb7").className = "";
}
else if(thisUPage_s=="benefit"){
getObject("mm8").className="menuhover"
getObject("mb8").className = "";
}
else if(thisUPage_s=="userlogon"||thisUPage_s=="domain_service"||thisUPage_s=="hosting_service"||thisUPage_s=="mail_service"||thisUPage_s=="Payed"||thisUPage_s=="unPayed"||thisUPage_s=="Invoice"||thisUPage_s=="Finance"||thisUPage_s=="RegInfoModify"){
getObject("mm9").className="menuhover"
getObject("mb9").className = "";
}
else
{
getObject("mm1").className="";
getObject("mb1").className = "";
}
}
window.load=mmenuURL()
</script>
</DIV>
</DIV>
</body>
</html>
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
jQuery中$.get、$.post、$.getJSON和$.ajax的用法詳解
本文重點是來講講jQuery中調(diào)用ajax的4種方法：$.get、$.post、$getJSON、$ajax。如果讀者沒有javascript和jquery的知識，或者沒有ajax的概念，那么請先去問問度娘，再來讀本文。2014-11-11
這篇文章主要為大家詳細(xì)介紹了JS Canvas定時器模擬動態(tài)加載動畫,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要給大家推薦一款jQuery插件模板，這是本人最喜歡的一款了，原因很簡單，使用方便，可選擇性也比較多。有需要的小伙伴參考下吧2015-01-01
基于jQuery實現(xiàn)的百度導(dǎo)航li拖放排列效果，即時更新數(shù)據(jù)庫
基于jQuery實現(xiàn)的百度導(dǎo)航li拖放排列效果，即時更新數(shù)據(jù)庫，需要的朋友可以參考下2012-07-07
這篇文章主要介紹了jquery懸浮提示框?qū)崿F(xiàn)方法,涉及jQuery鼠標(biāo)事件響應(yīng)及頁面元素樣式的動態(tài)操作技巧,需要的朋友可以參考下2016-01-01
jqueryMobile 動態(tài)添加元素,展示刷新視圖的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨queryMobile 動態(tài)添加元素,展示刷新視圖的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
基于Jquery 解決Ajax請求的頁面 瀏覽器后退前進(jìn)功能，頁面刷新功能實效問題
做了幾個兼職，上天幫人完成頁面的時候順便做了一個ajax的請求。發(fā)現(xiàn)瀏覽器的刷新，后退，前進(jìn)按鈕失效。于是乎google了一下。2010-12-12
jQuery.extend()、jQuery.fn.extend()擴(kuò)展方法示例詳解
這篇文章主要介紹了jQuery.extend()、jQuery.fn.extend()擴(kuò)展方法的應(yīng)用,需要的朋友可以參考下2014-05-05
本篇文章主要是對文本框水印提示效果的簡單實現(xiàn)代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
各瀏覽器中querySelector和querySelectorAll的實現(xiàn)差異分析
querySelector和querySelectorAll的參數(shù)須是符合 css selector 的字符串。不同的是querySelector返回的是一個對象，querySelectorAll返回的一個集合(NodeList)2012-05-05