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

側(cè)邊欄導(dǎo)航菜單，溢出式導(dǎo)航_菜單導(dǎo)航特效

側(cè)邊欄溢出式導(dǎo)航菜單，溢出的意思也就是當(dāng)鼠標(biāo)滑向某菜單項(xiàng)的時(shí)候，所屬的子菜單內(nèi)容從主菜單中剝離到邊框外顯示，這樣會使導(dǎo)航效果更清淅，目前有不少的網(wǎng)站都在改進(jìn)這種導(dǎo)航功能，特別是一些產(chǎn)品類網(wǎng)站。

<!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" mrc="text/html; charset=utf-8" />
<title>側(cè)邊欄導(dǎo)航菜單</title>
<style>
*{margin:0;padding:0;}
body{background:#FFF;color:#000;text-align:center;font:normal 12px Georgia, Arial, Helvetica, sans-serif;}
a:link,a:visited{color:#369;text-decoration:underline;}
a:hover{color:#C80000;text-decoration:none;}
span,li,dt,dd,p,h1,h2,h3,h4,h5,h6{text-align:left;}
img{border:0;}
ul,li{list-style-type:none;}
p{line-height:150%;}
h1{margin:0 auto;width:100%;background:#353535 font-size:28px;height:60px;color:#FFF;line-height:60px;text-indent:60px;overflow:hidden;border-bottom:3px solid #999;}
#YMenu{margin:30px auto;width:590px;height:450px;overflow:hidden;border:3px solid #B0BEC7;padding:4px;}
#YMenu-side{position:relative;z-index:2;float:left;width:200px;height:450px;border-right:3px solid #B0BEC7;}
#YMenu-side h3{float:left;width:196px;clear:both;line-height:28px;font-size:14px;text-indent:10px;color:#369;background-color:#EAEFF5;overflow:hidden;clear:both;}
.YM-mainmnu{float:left;width:100%;clear:both;}
.YM-mainmnu li{position:relative;z-index:2;cursor:pointer;float:left;width:180px;clear:both;min-height:28px;line-height:28px;text-indent:10px;color:#999;}
.YM-mainmnu li.current{border-top:1px solid #B0BEC7;border-left:1px solid #B0BEC7;border-bottom:2px solid #B0BEC7;border-right:1px solid #EAEFF5;background-color:#EAEFF5;}
.YM-mainmnu li.current a{font-size:14px;font-weight:bold;color:#C80000;}
.YM-mainmnu li.current span{display:none;}
.YM-mainmnu li .YM-submnu{position:absolute;z-index:3;left:179px;top:-1px;display:none;width:200px;overflow:hidden;border:solid #B0BEC7;border-width:1px 2px 2px 0;background:#EAEFF5 url(../img/mnu-bg.gif) 0 0 no-repeat;}
.YM-mainmnu li .YM-submnu li{float:left;clear:none;margin-left:10px;display:inline;text-indent:0;width:90px;overflow:hidden;line-height:24px;color:#000;border:0;}
.YM-mainmnu li .YM-submnu li a{font-size:12px;font-weight:normal;color:#369;}
#YMenu-main{position:relative;z-index:1;float:right;width:383px;overflow:hidden;}
#YMenu-main h2{margin:0 auto;width:100%;height:28px;line-height:28px;background-color:#EAEFF5;font-size:18px;text-align:center;overflow:hidden;}
#YMenu-main p{margin:10px auto;width:100%;line-height:150%;font-size:14px;overflow:hidden;text-indent:28px;}
.even{background-color:#F8F8F8;}
.odd{background-color:#EAEFF5;}
.hover{background-color:#B0BEC7;color:#FFF;cursor:pointer;}
.hidden{display:none;clear:both;}
#footer{margin:0 auto;width:960px;padding:15px 0;overflow:hidden;border-top:1px solid #999;}
#footer p{margin:0 auto;padding:5px 0;width:960px;line-height:20px;text-align:center;font-size:14px;}
</style>
</head>
<body>
<h1>YTabs！側(cè)邊欄導(dǎo)航菜單</h1>
<div id="YMenu">
     <div id="YMenu-side">
     	  <h3>家用電器</h3>
          <ul class="YM-mainmnu">
          	  <li class="YM-Tab">
          	  <a href="#">大家電</a><span> - 電視機(jī)、平板電視...</span>
          	     <ul class="YM-submnu">
          	  	     <li><a href="#1">洗衣機(jī)</a></li>
          	  	     <li><a href="#1">平板電視</a></li>
          	  	     <li><a href="#1">電熱水器</a></li>
          	  	     <li><a href="#1">家庭音響</a></li>
          	  	     <li><a href="#1">燃?xì)鉄崴?lt;/a></li>
          	  	     <li><a href="#1">空調(diào)</a></li>
          	  	     <li><a href="#1">冰箱冷柜</a></li>
          	  	     <li><a href="#1">DVD播放器</a></li>
          	  	     <li><a href="#1">電視附件</a></li>
          	  	     <li><a href="#1">家電服務(wù)</a></li>
          	  	     <li><a href="#1">家電下鄉(xiāng)</a></li>
          	     </ul>	
          	  </li>
          	  <li class="YM-Tab">
          	  <a href="#">大家電</a><span> - 電視機(jī)、平板電視...</span>
          	     <ul class="YM-submnu">
          	  	     <li><a href="#1">洗衣機(jī)</a></li>
          	  	     <li><a href="#1">平板電視</a></li>
          	  	     <li><a href="#1">電熱水器</a></li>
          	  	     <li><a href="#1">家庭音響</a></li>
          	  	     <li><a href="#1">燃?xì)鉄崴?lt;/a></li>
          	  	     <li><a href="#1">空調(diào)</a></li>
          	  	     <li><a href="#1">冰箱冷柜</a></li>
          	  	     <li><a href="#1">DVD播放器</a></li>
          	  	     <li><a href="#1">電視附件</a></li>
          	  	     <li><a href="#1">家電服務(wù)</a></li>
          	  	     <li><a href="#1">家電下鄉(xiāng)</a></li>
          	     </ul>	
          	  </li>
          	  <li class="YM-Tab">
          	  <a href="#">大家電</a><span> - 電視機(jī)、平板電視...</span>
          	     <ul class="YM-submnu">
          	  	     <li><a href="#1">洗衣機(jī)</a></li>
          	  	     <li><a href="#1">平板電視</a></li>
          	  	     <li><a href="#1">電熱水器</a></li>
          	  	     <li><a href="#1">家庭音響</a></li>
          	  	     <li><a href="#1">燃?xì)鉄崴?lt;/a></li>
          	  	     <li><a href="#1">空調(diào)</a></li>
          	  	     <li><a href="#1">冰箱冷柜</a></li>
          	  	     <li><a href="#1">DVD播放器</a></li>
          	  	     <li><a href="#1">電視附件</a></li>
          	  	     <li><a href="#1">家電服務(wù)</a></li>
          	  	     <li><a href="#1">家電下鄉(xiāng)</a></li>
          	     </ul>	
          	  </li>
          	  <li class="YM-Tab">
          	  <a href="#">大家電</a><span> - 電視機(jī)、平板電視...</span>
          	     <ul class="YM-submnu">
          	  	     <li><a href="#1">洗衣機(jī)</a></li>
          	  	     <li><a href="#1">平板電視</a></li>
          	  	     <li><a href="#1">電熱水器</a></li>
          	  	     <li><a href="#1">家庭音響</a></li>
          	  	     <li><a href="#1">燃?xì)鉄崴?lt;/a></li>
          	  	     <li><a href="#1">空調(diào)</a></li>
          	  	     <li><a href="#1">冰箱冷柜</a></li>
          	  	     <li><a href="#1">DVD播放器</a></li>
          	  	     <li><a href="#1">電視附件</a></li>
          	  	     <li><a href="#1">家電服務(wù)</a></li>
          	  	     <li><a href="#1">家電下鄉(xiāng)</a></li>
          	     </ul>	
          	  </li>
          </ul>
     	  <h3>手機(jī)數(shù)碼</h3>
          <ul class="YM-mainmnu">
          	  <li class="YM-Tab">
          	  <a href="#">大家電</a><span> - 電視機(jī)、平板電視...</span>
          	     <ul class="YM-submnu">
          	  	     <li><a href="#1">洗衣機(jī)</a></li>
          	  	     <li><a href="#1">平板電視</a></li>
          	  	     <li><a href="#1">電熱水器</a></li>
          	  	     <li><a href="#1">家庭音響</a></li>
          	  	     <li><a href="#1">燃?xì)鉄崴?lt;/a></li>
          	  	     <li><a href="#1">空調(diào)</a></li>
          	  	     <li><a href="#1">冰箱冷柜</a></li>
          	  	     <li><a href="#1">DVD播放器</a></li>
          	  	     <li><a href="#1">電視附件</a></li>
          	  	     <li><a href="#1">家電服務(wù)</a></li>
          	  	     <li><a href="#1">家電下鄉(xiāng)</a></li>
          	     </ul>	
          	  </li>
          	  <li class="YM-Tab">
          	  <a href="#">大家電</a><span> - 電視機(jī)、平板電視...</span>
          	     <ul class="YM-submnu">
          	  	     <li><a href="#1">洗衣機(jī)</a></li>
          	  	     <li><a href="#1">平板電視</a></li>
          	  	     <li><a href="#1">電熱水器</a></li>
          	  	     <li><a href="#1">家庭音響</a></li>
          	  	     <li><a href="#1">燃?xì)鉄崴?lt;/a></li>
          	  	     <li><a href="#1">空調(diào)</a></li>
          	  	     <li><a href="#1">冰箱冷柜</a></li>
          	  	     <li><a href="#1">DVD播放器</a></li>
          	  	     <li><a href="#1">電視附件</a></li>
          	  	     <li><a href="#1">家電服務(wù)</a></li>
          	  	     <li><a href="#1">家電下鄉(xiāng)</a></li>
          	     </ul>	
          	  </li>
          	  <li class="YM-Tab">
          	  <a href="#">大家電</a><span> - 電視機(jī)、平板電視...</span>
          	     <ul class="YM-submnu">
          	  	     <li><a href="#1">洗衣機(jī)</a></li>
          	  	     <li><a href="#1">平板電視</a></li>
          	  	     <li><a href="#1">電熱水器</a></li>
          	  	     <li><a href="#1">家庭音響</a></li>
          	  	     <li><a href="#1">燃?xì)鉄崴?lt;/a></li>
          	  	     <li><a href="#1">空調(diào)</a></li>
          	  	     <li><a href="#1">冰箱冷柜</a></li>
          	  	     <li><a href="#1">DVD播放器</a></li>
          	  	     <li><a href="#1">電視附件</a></li>
          	  	     <li><a href="#1">家電服務(wù)</a></li>
          	  	     <li><a href="#1">家電下鄉(xiāng)</a></li>
          	     </ul>	
          	  </li>
          	  <li class="YM-Tab">
          	  <a href="#">大家電</a><span> - 電視機(jī)、平板電視...</span>
          	     <ul class="YM-submnu">
          	  	     <li><a href="#1">洗衣機(jī)</a></li>
          	  	     <li><a href="#1">平板電視</a></li>
          	  	     <li><a href="#1">電熱水器</a></li>
          	  	     <li><a href="#1">家庭音響</a></li>
          	  	     <li><a href="#1">燃?xì)鉄崴?lt;/a></li>
          	  	     <li><a href="#1">空調(diào)</a></li>
          	  	     <li><a href="#1">冰箱冷柜</a></li>
          	  	     <li><a href="#1">DVD播放器</a></li>
          	  	     <li><a href="#1">電視附件</a></li>
          	  	     <li><a href="#1">家電服務(wù)</a></li>
          	  	     <li><a href="#1">家電下鄉(xiāng)</a></li>
          	     </ul>	
          	  </li>
          </ul>
     </div>
</div>
<script language="javascript" type="text/javascript" src="http://www.wf0088.com/jscss/demoimg/200908/yao.js"></script>
<script language="javascript" type="text/javascript">

</script>
</body>
</html>

所屬頻道：菜單導(dǎo)航特效/更新時(shí)間：2012-11-13

[收藏][報(bào)錯][返回列表]

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

側(cè)邊欄導(dǎo)航菜單，溢出式導(dǎo)航_菜單導(dǎo)航特效

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

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

猜你也喜歡看這些