JS+CSS實(shí)現(xiàn)大氣的黑色首頁(yè)導(dǎo)航菜單效果代碼

更新時(shí)間：2015年09月10日 12:19:39 作者：企鵝

這篇文章主要介紹了JS+CSS實(shí)現(xiàn)大氣的黑色首頁(yè)導(dǎo)航菜單效果代碼,涉及JavaScript基于鼠標(biāo)事件實(shí)現(xiàn)頁(yè)面樣式動(dòng)態(tài)切換的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了JS+CSS實(shí)現(xiàn)大氣的黑色首頁(yè)導(dǎo)航菜單效果代碼。分享給大家供大家參考。具體如下：

這是一款JS+CSS實(shí)現(xiàn)的大氣的重色+紅色高強(qiáng)對(duì)比的菜單，可用作首頁(yè)導(dǎo)航菜單，從設(shè)計(jì)的角度來(lái)講，挺專(zhuān)業(yè)，從實(shí)用角度來(lái)講，應(yīng)用廣泛，是款人見(jiàn)人愛(ài)的經(jīng)典風(fēng)格菜單，超不錯(cuò)的一個(gè)作品。

運(yùn)行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/js-css-black-style-nav-menu-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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>大氣的黑色CSS首頁(yè)導(dǎo)航菜單</title>
<style>
body,div,form,ul,li,span{margin:0;padding:0; list-style-type:none;}
body {text-align:center;color:#444;font-family:"宋體";font-size:12px; background:url(images/bodybg.jpg) top repeat-x;}
img {border:0px;}
.ml12{margin-left:12px; display:inline}
a,a:Link,a:visited{font-size:12px;color:#444; text-decoration:none}
a:hover{color:#FF3300; text-decoration:underline;}
.nav{width:1000px;float:left}
.nav ul{width:1000px;float:left;}
.nav li{width:100px;float:left; height:38px; line-height:38px;margin-right:20px; display:inline;}
.nav li a:link,.nav li a:visited{color:#E4E4E4;font-size:14px;font-weight:bold;}
.nav li a:hover{ text-decoration:none;width:100px;float:left; height:38px; line-height:38px; background:url(images/home-bg.jpg)}
/*主導(dǎo)航菜單*/
#menu ul{
 padding:0;
 border:0;
 list-style:none;
 line-height:38px;
 margin-top: 0;
 margin-right: 0;
 margin-bottom: 0;
 margin-left: 15px;
 float:left;
}
#menu_out{
 width:1000px;float:left;
 margin-top:107px;
 padding-left:3px;
 margin-left:auto;
 margin-right:auto;
 height:38px; overflow:hidden;
}
#menu_in{
 padding-right:4px;
}
#menu{
 height:38px;
}
#nav{
 padding-left:20px;
}
#nav li{
 float:left;
 height:38px;
 margin-left:5px;margin-right:5px;
}
#nav li a{
 float:left;
 display:block;
 padding-left:6px;
 height:38px;
 cursor:pointer; 
 text-decoration:none;
  text-align:center;
}
#nav li a span{
 float:left; width:100px;
 line-height:38px;
 font-size:14px;
 font-weight:bold;
 color:#FFFFFF;
 text-decoration:none;
 text-align:center;
}
#nav li .nav_on{ /*鼠標(biāo)經(jīng)過(guò)時(shí)變換背景，方便JS獲取樣式*/
 background-position:left 100%;
}
#nav li .nav_on span{ /*鼠標(biāo)經(jīng)過(guò)時(shí)變換背景，方便JS獲取樣式*/
 background-position:right 100%;
 color:#fff;
 text-decoration:none;
 width:100px;background:url(images/home-bg.jpg) no-repeat;
}
.nav-bot{width:1000px;float:left; height:20px;overflow:hidden; line-height:20px; padding-top:12px; padding-bottom:10px;}
.nav-botinfo{width:680px;background:url(images/ico01.jpg) no-repeat left;text-align:left;padding-left:20px;margin-left:10px; display:inline;color:#9F9F9F;}
</style>
<script type="text/javascript">
 function qiehuan(num){
  for(var id = 0;id<=7;id++)
  {
   if(id==num)
   {
    document.getElementById("qh_con"+id).style.display="block";
    document.getElementById("mynav"+id).className="nav_on";
   }
   else
   {
    document.getElementById("qh_con"+id).style.display="none";
    document.getElementById("mynav"+id).className="";
   }
  }
 }
</script>
</head>
<body style="text-align:center">
<div id=menu_out>
  <div id=menu_in>
   <div id=menu>
    <UL id=nav>
     <li><A class=nav_on id=mynav0 onmouseover=javascript:qiehuan(0) href="#"><SPAN>網(wǎng)站首頁(yè)</SPAN></A></li>
     <li><a href="#" onmouseover="javascript:qiehuan(1)" id="mynav1" class="nav_off"><span>網(wǎng)站模板</span></a></li>
     <li><a href="#" onmouseover="javascript:qiehuan(2)" id="mynav2" class="nav_off"><span>后臺(tái)模板</span></a></li>
     <li><a href="#" onmouseover="javascript:qiehuan(3)" id="mynav3" class="nav_off"><span>CSS菜單</span></a></li>
     <li><a href="#" onmouseover="javascript:qiehuan(4)" id="mynav4" class="nav_off"><span>腳本下載</span></a></li>
     <li><a href="#" onmouseover="javascript:qiehuan(5)" id="mynav5" class="nav_off"><span>網(wǎng)頁(yè)特效</span></a></li>
     <li><a href="#" onmouseover="javascript:qiehuan(6)" id="mynav6" class="nav_off"><span>新聞中心</span></a></li>
     <li><a href="#" onmouseover="javascript:qiehuan(7)" id="mynav7" class="nav_off"><span>聯(lián)系我們</span></a></li>
    </UL>
    <div id=menu_con>
     <div id=qh_con0 style="DISPLAY: block"></div> 
     <div id=qh_con1 style="DISPLAY: none"></div> 
     <div id=qh_con2 style="DISPLAY: none"></div> 
     <div id=qh_con3 style="DISPLAY: none"></div> 
     <div id=qh_con4 style="DISPLAY: none"></div> 
     <div id=qh_con5 style="DISPLAY: none"></div> 
     <div id=qh_con6 style="DISPLAY: none"></div> 
     <div id=qh_con7 style="DISPLAY: none"></div>
    </div>
   </div>
  </div>
 </div> 
</body>
</html>

希望本文所述對(duì)大家的JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: