仿阿里巴巴菜單
來源：易賢網 閱讀：804 次 日期：2014-10-09 12:04:18
溫馨提示：易賢網小編為您整理了“仿阿里巴巴菜單”,方便廣大網友查閱！

將代碼保存為html運行！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="" xml:lang="gb2312">

<style type="text/css">

/*這里定義樣式,由于左右滑動區(qū)寬度不同,所以代碼略多*/

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(;}

#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(;}

#slideBox .r{background:url(http://img.china.alibaba.com/images/cn/home/0110/slideBox_tabright.gif);width:94px;float:right}

#slideBox .l_h{background:url(http://img.china.alibaba.com/images/cn/home/0110/slideBox_tableft_h.gif);width:80px;}

#slideBox .r_h{background:url(http://img.china.alibaba.com/images/cn/home/0110/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://img.china.alibaba.com/images/cn/common/icon/v2/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://img.china.alibaba.com/images/cn/common/icon/v2/icon_zchy01_12x.gif) 5px 10px no-repeat;}

.btn_cxt{background:url(http://img.china.alibaba.com/images/cn/common/icon/v2/icon_cxt01_12x.gif) 5px 10px no-repeat;}

.btn_tggs{background:url(http://img.china.alibaba.com/images/cn/common/icon/v2/icon_tggs01_12x.gif) 5px 10px no-repeat;}

.btn_fbxx{background:url(http://img.china.alibaba.com/images/cn/common/icon/v2/icon_fbxx01_12x.gif) 5px 10px no-repeat;}

.btn_xzmj{background:url(http://img.china.alibaba.com/images/cn/common/icon/v2/icon_xzmj01_12x.gif) 5px 10px no-repeat;}

.btn_alisoft{background:url(http://img.china.alibaba.com/images/cn/common/icon/v2/icon_alisoft01_12x.gif) 5px 10px no-repeat;}

/*cont*/

#slideBox .cont_l{float:left;background:url(http://img.china.alibaba.com/images/cn/home/0110/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://img.china.alibaba.com/images/cn/home/0110/slideBox_conright.gif);width:157px;height:31px;padding:9px 7px 7px 14px;margin-bottom:4px;overflow:hidden}

#slideBox .oneline{line-height:33px;}

</style>

<!--slidebox start-->

<div id="slideBox">

<div id="slide">

<ul>

<li class="l_h"><a class="btn_zchy">注冊會員</a></li>

<li class="r"><a 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 class="btn_tggs">推廣公司</a></li>

<li class="r"><a class="btn_fbxx">發(fā)布信息</a></li>

</ul>

<div class="hide" id="sc_3">

內容一

</div>

<div class="hide" id="sc_4">

內容一

</div>

<ul>

<li class="l"><a class="btn_xzmj">尋找買家</a></li>

<li class="r"><a class="btn_alisoft">阿里軟件</a></li>

</ul>

<div class="hide" id="sc_5">

內容一

</div>

<div class="hide" id="sc_6">

內容一

</div>

</div>

</div>

<!--slidebox end-->

<script type="text/javascript">

/*alitab

author:alicn-wd-ym

這里是所有js實現,代碼比較少,主要還是取巧,利用了classname的關系

*/

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;

}

<!--slidebox end-->

</script>

更多信息請查看IT技術專欄

更多信息請查看腳本欄目
上一篇：圖片向左滾動
下一篇：window.open
易賢網手機網站地址：仿阿里巴巴菜單

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關于我們 | 聯系我們 | 人才招聘 | 網站聲明 | 網站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 加入群交流 | 手機站點 | 投訴建議
工業(yè)和信息化部備案號：滇ICP備2023014141號-1 云南省教育廳備案號：云教ICP備0901021 滇公網安備53010202001879號 人力資源服務許可證：（云）人服證字（2023）第0102001523號
聯系電話：0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號：hfpxwx
咨詢QQ：526150442（9:00—18:00）版權所有:易賢網