本文實例講述了js實現仿愛微網兩級導航菜單效果代碼。分享給大家供大家參考。具體如下：
這是一款仿愛微網兩級導航菜單，tab選項卡形式的導航菜單，原生js做的tab選項卡型的導航菜單，需要鼠標點擊才切換出二級子菜單，可修改成鼠標移過去就更換內容的形式。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/js-fawei-web-nav-menu-style-codes/
具體代碼如下：
<html><head><title>一個兩級的網頁菜單</title><style>*{margin:0;padding:0;}.subnav { background-color: #3188DA; color: #C0DEF9; height: 20px;}.subnav a { color: #FFFFFF; margin-bottom: 0; margin-left: 5px; margin-right: 5px; margin-top: 0;}.subnav a.cur { color: #FAEC04;}.aa { background-image: url("images/ui1.png"); background-origin: padding-box; background-position: left -92px; background-repeat: no-repeat;}.bb { background-color: #75BAFB; background-image: url("images/ui1.png"); background-position: left -183px; background-repeat: no-repeat;}.cc{color:#ffffff;}.dd{color:#000}ul,li{list-style-type:none}#navbox { margin-bottom: 15px; position: relative; width:960px;}.mainnav { border-bottom-color: #3188DA; border-bottom-style: solid; border-bottom-width: 5px; height: 31px;}.mainnav li { color: #FFFFFF; float: left; font-size: 14px; font-weight: bold; line-height: 31px; margin-right: 5px; text-align: center; width: 90px;}.mainnav li a { display: block; font-weight: normal; height: 31px;}.uhide{display:none;}.ushow{display:block;}</style></head><body><div id="navbox"><ul class="mainnav"> <li class='bb' onclick='qh(0);' id='ta_0'><a href="#" class='cc' id='a0'>首頁</a></li> <li class='aa' onclick='qh(1);' id='ta_1'><a href="#" class='dd' id='a1'>PHP教程</a></li> <li class='aa' onclick='qh(2);' id='ta_2'><a href="#" class='dd' id='a2'>網頁前端</a></li> <li class='aa' onclick='qh(3);' id='ta_3'><a href="#" class='dd' id='a3'>網頁特效</a></li> <li class='aa' onclick='qh(4);' id='ta_4'><a href="#" class='dd' id='a4'>腳本下載</a></li></ul><div style="padding-left:20px;" class="uhide" id='tab_0'></div><div style="padding-left:20px;" class="subnav uhide" id='tab_1'><a >PHP基礎</a> | <a href="#">mysql教程</a> | <a href="#">smarty教程</a> |<a href="#">PHP框架</a> | <a href="#">PHP開源</a> | <a href="#">Linux教程</a> </div><div style="padding-left:20px;" class="subnav uhide" id='tab_2'><a >DIV+CSS布局</a> | <a href="#">javascript教程</a> | <a href="#">jquery教程</a> |<a href="#">ajax教程</a> | <a href="#">flash開源</a> | <a href="#">photoshop教程</a> </div><div style="padding-left:20px;" class="subnav uhide" id='tab_3'><a >js導航菜單</a> | <a href="#">js表單特效</a> | <a >js幻燈片</a> |<a href="#">js文本特效</a> | <a href="#">js彈出層</a> | <a href="#">js網頁特效</a> </div><div style="padding-left:20px;" class="uhide" id='tab_4'></div></div><script>function g(o){return document.getElementById(o);}function qh(n){ for(var i=0;i<=6;i++){ g('ta_'+i).className='aa'; g('ta_'+n).className='bb'; g('a'+i).className='dd'; g('a'+n).className='cc'; g('tab_'+i).className='uhide subnav'; g('tab_'+n).className='ushow subnav'; g('tab_0').className='uhide'; g('tab_0').className='uhide'; g('tab_4').className='uhide'; g('tab_4').className='uhide'; }}</script></body></html>希望本文所述對大家的javascript程序設計有所幫助。
新聞熱點
疑難解答
