阿里巴巴css滑動菜單 ,滑動門

2024-09-05 12:19:44

字體：大中小

來源：轉載

供稿：網友

阿里巴巴的一款滑動分類菜單,效果很不錯,但是使用了較多的圖片,不過這些圖片只是背景,不影響你修改菜單的文字,所以很值得大家使用,代碼稍嫌多,學習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(/jscss/demoimg/200905/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(/jscss/demoimg/200905/slideBox_tableft.gif);width:80px;} #slideBox .r{background:url(/jscss/demoimg/200905/slideBox_tabright.gif);width:94px;float:right} #slideBox .l_h{background:url(/jscss/demoimg/200905/slideBox_tableft_h.gif);width:80px;} #slideBox .r_h{background:url(/jscss/demoimg/200905/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(/jscss/demoimg/200905/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(/jscss/demoimg/200905/icon_zchy01_12x.gif) 5px 10px no-repeat;} .btn_cxt{background:url(/jscss/demoimg/200905/icon_cxt01_12x.gif) 5px 10px no-repeat;} .btn_tggs{background:url(/jscss/demoimg/200905/icon_tggs01_12x.gif) 5px 10px no-repeat;} .btn_fbxx{background:url(/jscss/demoimg/200905/icon_fbxx01_12x.gif) 5px 10px no-repeat;} .btn_xzmj{background:url(/jscss/demoimg/200905/icon_xzmj01_12x.gif) 5px 10px no-repeat;} .btn_alisoft{background:url(/jscss/demoimg/200905/icon_alisoft01_12x.gif) 5px 10px no-repeat;} #slideBox .cont_l{float:left;background:url(/jscss/demoimg/200905/slideBox_conleft.gif);width:157px;height:31px;padding:9px 7px 7px 14px;margin-bottom:4px;overflow:hidden} #slideBox .cont_r{float:left;background:url(/jscss/demoimg/200905/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   class="iwvjtn8m0"   id="slideBox"><div   class="iwvjtn8m0"   id="slide">  <ul>	  <li id="iwvjtn8m0"    class="l_h">注冊會員</li>	  <li id="iwvjtn8m0"    class="r">找回密碼</li>  </ul>  <div   id="iwvjtn8m0"   class="cont_l" id="sc_1">最新更新</div>  <div   id="iwvjtn8m0"   class="hide" id="sc_2">下載排行</div>   <ul>	  <li id="iwvjtn8m0"    class="l">網頁特效</li>	  <li id="iwvjtn8m0"    class="r">發布源碼</li>  </ul>   <div   id="iwvjtn8m0"   class="hide" id="sc_3">JAVA源代碼</div> <div   id="iwvjtn8m0"   class="hide" id="sc_4">站長聯盟</div>  <ul><li id="iwvjtn8m0"    class="l">源碼下載</li><li id="iwvjtn8m0"    class="r">阿里軟件</li>  </ul>  <div   id="iwvjtn8m0"   class="hide" id="sc_5">	   菜單特效  </div>  <div   id="iwvjtn8m0"   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>

上一篇：純CSS黑色下拉導航條

下一篇：帶三角導航的CSS菜單