本文執行個體講述了JS+CSS實現大氣的黑色首頁導覽功能表效果代碼。分享給大家供大家參考。具體如下：
這是一款JS+CSS實現的大氣的重色+紅色高強對比的菜單，可用作首頁導覽功能表，從設計的角度來講，挺專業，從實用角度來講，應用廣泛，是款人見人愛的經典風格菜單，超不錯的一個作品。
運行效果截圖如下：
線上示範地址如下：
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首頁導覽功能表</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)}/*主導覽功能表*/#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{ /*滑鼠經過時變換背景，方便JS擷取樣式*/ background-position:left 100%;}#nav li .nav_on span{ /*滑鼠經過時變換背景，方便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>網站首頁</SPAN></A></li> <li><a href="#" onmouseover="javascript:qiehuan(1)" id="mynav1" class="nav_off"><span>網站模板</span></a></li> <li><a href="#" onmouseover="javascript:qiehuan(2)" id="mynav2" class="nav_off"><span>後台模板</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>網頁特效</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>聯絡我們</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>
希望本文所述對大家的JavaScript程式設計有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
