Tip: you can modify some code before running
<!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"><style type="text/css"> <title>Sliding menu, sliding door menu, css sliding menu, js sliding menu, Yanda sliding menu, how to get sliding menu</title>/* The style is defined here. Because the width of the left and right sliding areas is different, the code is slightly more */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;}: hover {color: # FF6600; text-decoration: underline;} # slideBox {background: url (yun_qi_img/slideBox_bg.gif); height: 168px; width: 178px; padding-left: 5px; padding-right: 5px;} # slide {padding-top: 5px} # slide li img {marg In-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 (yun_qi_img/slideBox_tableft.gif); width: 80px ;}# slideBox. r {background: url (yun_qi_img/slideBox_tabright.gif); width: 94px; float: right} # slideBox. l_h {background: url (yun_qi_img/slideBox_tableft_h.gif); width: 80px ;}# slideBox. r_h {background: url (yun_qi_img/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 (yun_qi_img/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 (yun_qi_img/icon_zchy01_12x.gif) 5px 10px no-repeat ;}. btn_cxt {background: url (yun_qi_img/icon_cxt01_12x.gif) 5px 10px no-repeat ;}. btn_tggs {background: url (yun_qi_img/icon_tggs01_12x.gif) 5px 10px no-repeat ;}. btn_fbxx {background: url (yun_qi_img/icon_fbxx01_12x.gif) 5px 10px no-repeat ;}. btn_xzmj {background: url (yun_qi_img/icon_xzmj01_12x.gif) 5px 10px no-repeat ;}. btn_alisoft {background: url (yun_qi_img/icon_alisoft01_12x.gif) 5px 10px no-repeat;}/* cont */# slideBox. cont_l {float: left; background: url (yun_qi_img/slideBox_conleft.gif); width: 157px; height: 31px; padding: 9px 7px 14px; margin-bottom: 4px; overflow: hidden} # slideBox. cont_r {float: left; background: url (yun_qi_img/slideBox_conright.gif); width: 157px; height: 31px; padding: 9px 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">Registered Member</li> <li class="r">Join TrustPass</li> </ul> <div class="cont_l" id="sc_1">Content 1</div> <div class="hide" id="sc_2">Content 1</div> <ul> <li class="l">Promotion Company</li> <li class="r">Publish information</li> </ul> <div class="hide" id="sc_3">Content 1</div> <div class="hide" id="sc_4">Content 1</div> <ul> <li class="l">Looking for buyers</li> <li class="r">Alibaba Software</li> </ul> <div class="hide" id="sc_5">Content 1</div> <div class="hide" id="sc_6">Content 1</div></div> </div><!--slidebox end--><script type="text/javascript">/* Alitab author: alicn-wd-ym all js implementations here. The code is relatively small, mainly clever. The classname relationship is used */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>
Tip: you can modify some code before running
