阿里巴巴css滑動門菜單_菜單導航特效

阿里巴巴的一款滑動分類菜單,效果很不錯,但是使用了較多的圖片,不過這些圖片只是背景,不影響你修改菜單的文字,所以很值得大家使用,代碼稍嫌多,學習CSS的朋友好好研究一下.

<!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" xml:lang="gb2312">
<title>滑動菜單,滑動門菜單,css滑動菜單</title>
<style type="text/css"> 
/*樣式定義,由于左右滑動區寬度不同,所以代碼略多*/ 
*{font-size:12px;}
body {margin:0px;border:0px;font-size:12px;background-color:#fff;} 
a:link{color: #003278;text-decoration: none;} 
a:visited{color: #003278;text-decoration: none;} 
a:hover{color: #FF6600;text-decoration: underline;} 
#slideBox{background:url(http://p1.mb5u.com/texiao/slideBox_bg.gif);height:168px;width:178px;padding-left:5px;padding-right:5px;} 
#slide{padding-top:5px} 
#slide li img{margin-right:3px} 
#slideBox ul{padding:0;margin:0;clear:both;list-style:none;overflow:hidden} 
#slideBox li{float:left;font-weight:bold;height:37px !important;height:27px;} 
#slideBox li a:link,#slideBox li a:visited{color:#000;} 
#slideBox li a:hover{color:#ff7300;text-decoration: none} 
#slideBox .l{background:url(http://p1.mb5u.com/texiao/slideBox_tableft.gif);width:80px;} 
#slideBox .r{background:url(http://p1.mb5u.com/texiao/slideBox_tabright.gif);width:94px;float:right} 
#slideBox .l_h{background:url(http://p1.mb5u.com/texiao/slideBox_tableft_h.gif);width:80px;} 
#slideBox .r_h{background:url(http://p1.mb5u.com/texiao/slideBox_tabright_h.gif);width:94px;float:right;} 
#slideBox .hide{display:none} 
#slideBox .l a{width:52px;} 
#slideBox .r a{width:68px;} 
.arrow{padding-left:8px;background:url(http://p1.mb5u.com/texiao/icon_arrow03_right_08x.gif) no-repeat;} 
#slideBox .l a,#slideBox .r a,#slideBox .l_h a,#slideBox .r_h a{padding-left:24px;display:block;height:100%;padding-top:10px;} 
.btn_zchy{background:url(http://p1.mb5u.com/texiao/icon_zchy01_12x.gif) 5px 10px no-repeat;} 
.btn_cxt{background:url(http://p1.mb5u.com/texiao/icon_cxt01_12x.gif) 5px 10px no-repeat;} 
.btn_tggs{background:url(http://p1.mb5u.com/texiao/icon_tggs01_12x.gif) 5px 10px no-repeat;} 
.btn_fbxx{background:url(http://p1.mb5u.com/texiao/icon_fbxx01_12x.gif) 5px 10px no-repeat;} 
.btn_xzmj{background:url(http://p1.mb5u.com/texiao/icon_xzmj01_12x.gif) 5px 10px no-repeat;} 
.btn_alisoft{background:url(http://p1.mb5u.com/texiao/icon_alisoft01_12x.gif) 5px 10px no-repeat;} 
#slideBox .cont_l{float:left;background:url(http://p1.mb5u.com/texiao/slideBox_conleft.gif);width:157px;height:31px;padding:9px 7px 7px 14px;margin-bottom:4px;overflow:hidden} 
#slideBox .cont_r{float:left;background:url(http://p1.mb5u.com/texiao/slideBox_conright.gif);width:157px;height:31px;padding:9px 7px 7px 14px;margin-bottom:4px;overflow:hidden} 
#slideBox .oneline{line-height:33px;} 
</style>
</head>
<body>

<div id="slideBox">
<div id="slide">
  <ul>
	  <li class="l_h"><a href="/" class="btn_zchy">注冊會員</a></li>
	  <li class="r"><a href="/" class="btn_cxt">找回密碼</a></li>
  </ul>
  <div class="cont_l" id="sc_1">最新更新</div>
  <div class="hide" id="sc_2">下載排行</div>
   <ul>
	  <li class="l"><a href="/jscss/" class="btn_tggs">網頁特效</a></li>
	  <li class="r"><a href="/" class="btn_fbxx">發布源碼</a></li>
  </ul>
   <div class="hide" id="sc_3">JAVA源代碼</div>
 <div class="hide" id="sc_4">站長聯盟</div>
  <ul>
<li class="l"><a href="/" class="btn_xzmj">源碼下載</a></li>
<li class="r"><a href="#" class="btn_alisoft">阿里軟件</a></li>
  </ul>
  <div class="hide" id="sc_5">
	   菜單特效
  </div>
  <div class="hide" id="sc_6">
	   層和布局
  </div>
</div>    
</div>

<script type="text/javascript">
var slideTabIndex=1; 
var sTabList = document.getElementById("slideBox").getElementsByTagName("li"); 
for(var i=0;i<sTabList.length;i++){ 
var obj = sTabList[i].getElementsByTagName("a")[0]; 
sTabList[i].getElementsByTagName("a")[0].id="slideBtn_"+(i+1); 
if (obj.addEventListener) { 
obj.addEventListener( "mouseover", overSlide, false ); 
} 
else if (obj.attachEvent) { 
obj.attachEvent( "onmouseover", overSlide ); 
} 
} 
function overSlide(e){ 
e = window.event || e; 
var srcElement = e.srcElement || e.target; 
var newTabIndex=srcElement.id.replace("slideBtn_",""); 
var pos = srcElement.parentNode.className; 
if(newTabIndex==""||pos.indexOf("_h")!=-1)return; 
document.getElementById("slideBtn_"+slideTabIndex).parentNode.className=document.getElementById("slideBtn_"+slideTabIndex).parentNode.className.replace("_h",""); 
document.getElementById("sc_"+slideTabIndex).className="hide"; 
document.getElementById("sc_"+newTabIndex).className="cont_"+pos; 
srcElement.parentNode.className = pos+"_h"; 
slideTabIndex=newTabIndex; 
}

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

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

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

相關菜單導航特效：

阿里巴巴css滑動門菜單_菜單導航特效

菜單導航特效Rss訂閱特效代碼搜索

菜單導航特效推薦

猜你也喜歡看這些