網(wǎng)頁特效代碼模板無憂>網(wǎng)頁特效>菜單導(dǎo)航特效代碼>

仿淘寶支付寶網(wǎng)站的漂亮導(dǎo)航菜單_菜單導(dǎo)航特效

仿淘寶支付寶網(wǎng)站的漂亮導(dǎo)航菜單，熱色調(diào)風(fēng)格，響應(yīng)鼠標(biāo)懸停動作，結(jié)構(gòu)清淅，不過用到了一些修飾圖片，你可以順著源代碼找到這些圖片地址，然后下載下來，這款菜單實在很不錯哦。

<!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>
<title>仿淘寶支付寶網(wǎng)站的漂亮導(dǎo)航菜單</title>
<meta http-equiv="mrc-type" mrc="text/html;charset=gb2312">
<style type="text/css">
#nav{
background-image:url(http://p1.mb5u.com/texiao/navM.gif);
}
#nav div{
background-image:url(http://p1.mb5u.com/texiao/nav_S.gif);
float:left;
width:4px; 
height:34px; 
font-size:0px; 
margin:0px 4px; 
background-repeat:no-repeat; 
background-position:top; 
background-repeat:no-repeat;
}
a.nav{
display:block; float:left; padding-left:12px; font-weight:bold; color:#fff; height:34px; font-size:14px; text-decoration:none; cursor:pointer;
}
a.nav span{
display:block; float:left; padding-right:12px; font-weight:bold; height:24px; padding-top:10px;
}
a.nav:hover{
display:block; float:left; padding-left:12px; font-weight:bold; color:#fff; height:34px; font-size:14px; background-image:url(http://p1.mb5u.com/texiao/nav_Over_L.gif); background-position:left center; background-repeat:no-repeat; text-decoration:none;
}
a.nav:hover span{
display:block; float:left; padding-right:12px; font-weight:bold; height:24px; padding-top:10px;background-image:url(http://p1.mb5u.com/texiao/nav_Over_R.gif); background-position:right center; background-repeat:no-repeat;
}
#curTab{
display:block; float:left; padding-left:12px; font-weight:bold; color:#f00; height:34px; font-size:14px;background-image:url(http://p1.mb5u.com/texiao/nav_On_L.gif); background-position:left center; background-repeat:no-repeat;
}
#curTab span{
display:block; float:left; padding-right:12px; font-weight:bold;height:24px; padding-top:10px;background-image:url(http://p1.mb5u.com/texiao/nav_On_R.gif);background-position:right center; background-repeat:no-repeat;
}
</style>
<script language="javascript">
function $(objId){
	return document.getElementById(objId);
}
function changeId(idName,obj){
	$(idName).id="";
	obj.id=idName;
	obj.blur();
}
</script>
</head>
<body>

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="3"><img src="http://p1.mb5u.com/texiao/navL.gif" width="3" height="34"></td>
    <td id="nav">
      <table width="960" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td>
            <a href="#" id="curTab" class="nav" onclick="changeId('curTab',this)"><span>網(wǎng)站首頁</span></a>
            <div></div>
            <a href="#" class="nav" onclick="changeId('curTab',this)"><span>最新更新</span></a>
            <div></div>
            <a href="/other/top100.shtml" class="nav" onclick="changeId('curTab',this)"><span>下載排行</span></a>
            <div></div>
            <a href="/sort/index.shtml" class="nav" onclick="changeId('curTab',this)"><span>源碼分類</span></a>
            <div></div>
            <a href="/jscss/" class="nav" onclick="changeId('curTab',this)"><span>網(wǎng)頁特效</span></a>
            <div></div>
            <a href="/sort/list_1_1.shtml" class="nav" onclick="changeId('curTab',this)"><span>ASP源碼</span></a>
            <div></div>
            <a href="/sort/list_2_1.shtml" class="nav" onclick="changeId('curTab',this)"><span>PHP源碼</span></a>
            <div></div>
            <a href="/sort/list_3_1.shtml" class="nav" onclick="changeId('curTab',this)"><span>.NET源碼</span></a>
            <div></div>
            <a href="/sort/list_5_1.shtml" class="nav" onclick="changeId('curTab',this)"><span>JAVA源碼</span></a>
          </td>
        </tr>
      </table>
    </td>
    <td width="3"><img src="http://p1.mb5u.com/texiao/navR.gif" width="3" height="34"></td>
  </tr>
</table>
</body>
</html>

所屬頻道：菜單導(dǎo)航特效/更新時間：2011-02-24

[收藏][報錯][返回列表]

相關(guān)菜單導(dǎo)航特效：

仿淘寶支付寶網(wǎng)站的漂亮導(dǎo)航菜單_菜單導(dǎo)航特效

菜單導(dǎo)航特效Rss訂閱特效代碼搜索

菜單導(dǎo)航特效推薦

猜你也喜歡看這些