js實現(xiàn)仿愛微網(wǎng)兩級導(dǎo)航菜單效果代碼

更新時間：2015年08月31日 11:39:02 作者：企鵝

這篇文章主要介紹了js實現(xiàn)仿愛微網(wǎng)兩級導(dǎo)航菜單效果代碼,通過javascript自定義函數(shù)結(jié)合鼠標(biāo)點擊事件實現(xiàn)tab切換的功能,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了js實現(xiàn)仿愛微網(wǎng)兩級導(dǎo)航菜單效果代碼。分享給大家供大家參考。具體如下：

這是一款仿愛微網(wǎng)兩級導(dǎo)航菜單，tab選項卡形式的導(dǎo)航菜單，原生js做的tab選項卡型的導(dǎo)航菜單，需要鼠標(biāo)點擊才切換出二級子菜單，可修改成鼠標(biāo)移過去就更換內(nèi)容的形式。

運行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/js-fawei-web-nav-menu-style-codes/

具體代碼如下：

<html>
<head>
<title>一個兩級的網(wǎng)頁菜單</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'>網(wǎng)頁前端</a></li>
 <li class='aa' onclick='qh(3);' id='ta_3'><a href="#" class='dd' id='a3'>網(wǎng)頁特效</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基礎(chǔ)</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導(dǎo)航菜單</a> | 
<a href="#">js表單特效</a> | 
<a >js幻燈片</a> |
<a href="#">js文本特效</a> | 
<a href="#">js彈出層</a> | 
<a href="#">js網(wǎng)頁特效</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程序設(shè)計有所幫助。

您可能感興趣的文章: