滑动门式菜单 实现代码

</p> <p><title>自写的<a href="https://kunjuke.com/tag/1917/" title="滑动门" target="_blank">滑动门</a>式<a href="https://kunjuke.com/tag/148/" title="菜单" target="_blank">菜单</a>/</title> </p> <p>*{margin:0;padding:0;}<br /> body{ margin:auto;font:14px "宋体",verdana, arial, helvetica, sans-serif;color:#333;}<br /> ul,li{padding:0; list-style:none;}<br /> a:link,a:visited{color:#333;text-decoration:none;}<br /> a:hover{color:#d00;text-decoration:none;}<br /> #headnav{background:url(//files.jb51.net/imgby/_navbg.png) 0 -42px repeat-x; border-top:solid 1px #e5b0b1; height:42px;}<br /> #headnav ul li{float:left; padding:13px 0; text-align:center; cursor:pointer; }<br /> #headnav ul li a{display:block; font-size:14px; padding:0 9px; font-weight:bold; color:#fff;}<br /> #headnav ul li a.linelink{border-left:dotted 1px #fff;}<br /> .navnormallink{background:url(//files.jb51.net/imgby/_navbg.png) 0 -42px no-repeat; padding-bottom:4px;}<br /> .navnormalover{background:url(//files.jb51.net/imgby/_navbg.png) no-repeat; padding-bottom:4px;} </p> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <p> <!--<br /> var globalnavselectedindex=2;//当前导航选中<br /> var osel=document.getelementbyid("headnav").getelementsbytagname("a");<br /> var oli=document.getelementbyid("headnav").getelementsbytagname("li");<br /> for(var i=0;i<osel.length;i++)<br /> {<br /> if(i!=0){<br /> osel[i].classname="linelink";<br /> }<br /> if(globalnavselectedindex==i){<br /> oli[i].classname="navnormalover";<br /> }else{<br /> oli[i].classname="navnormallink";<br /> }<br /> }<br /> for(var i=0;i<oli.length;i++)<br /> {<br /> //切换滑动门<br /> // if(window.attatchevent){<br /> // oli[i].attatchevent("onmouseover",switchnav(i));<br /> // }else if(window.addeventlistener){<br /> // oli[i].addeventlistener("mouseover",switchnav(i),false);//此处请高手指点，谢谢。<br /> // }else{<br /> (function(i){oli[i].onmouseover=function(){switchnav(i)}})(i);<br /> // }<br /> }<br /> //切换滑动门<br /> function switchnav(arg)<br /> {<br /> for(var i=0;i </p> <p>
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]