阿里巴巴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 id="slideBox"><div id="slide">  <ul>	  <li class="l_h">注册会员</li>	  <li class="r">找回密码</li>  </ul>  <div class="cont_l" id="sc_1">最新更新</div>  <div class="hide" id="sc_2">下载排行</div>   <ul>	  <li class="l">网页特效</li>	  <li class="r">发布源码</li>  </ul>   <div class="hide" id="sc_3">JAVA源代码</div> <div class="hide" id="sc_4">站长联盟</div>  <ul><li class="l">源码下载</li><li class="r">阿里软件</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>

上一篇：纯CSS黑色下拉导航条

下一篇：带三角导航的CSS菜单