- 3/5
- 1
- 2
- 3
- 4
- 5
织梦DedeCMS视频教程买空间 租服务器 选网硕互联！ 无忧站长工具,百度权重一键全查!
自己写的CSS+JS滑动门菜单，支持二级分类，当没有鼠标动作的时候它自己会自动切换，假如不想要这个功能的话可以自己往掉，当初只是自己想研究一下。本人美感不太好，因此美化的不很好，高手再把它美化一下吧，应该还是很不错的。
<html> <head> <title>滑动门菜单- mb5u.com</title> <style type="text/css"> <!-- body{text-align:center;font-size:9pt;} .cont_le { background:#FFF; border:1px solid #A3D8E0; padding:8px 0 8px 0; height:34px; width:792px; text-align:left;} .cont_all { background:#EBF8FB; border:1px solid #A3D8E0; border-top:none; padding:8px 0 8px 0;}/*/*/.menu1Off,.menu1On,.menu2Off,.menu2On,.menu3Off,.menu3On,.menu4Off,.menu4On,.menu5Off,.menu5On,.menu6Off,.menu6On,.menu7Off,.menu7On,.menu8Off,.menu8On,.menu9Off,.menu9On {margin:0; background:red; width:88; height:25px; color:blue; text-align:center; cursor:pointer; padding-top:3px; border-top:0px solid #34AEBE; border-left:0px solid #34AEBE; border-right:1px solid #fff;display:inline;} .menu1On,.menu2On,.menu3On,.menu4On,.menu5On,.menu6On,.menu7On,.menu8On,.menu9On{ color:#FFF; background:#bb7241; border-top:0px solid #34AEBE; border-left:1px solid #34AEBE; border-right:1px solid #34AEBE;} .3ul { list-style-type:none; margin:0; padding:0;display:inline ; } .gaosugonglu{width:792px;} --> </style> <script language="JavaScript" type="text/javascript"> //<![CDATA[ var cur_index=1 var num=9 //标签个数 var settime function GetObj(objName){ if(document.getElementById){ return eval('document.getElementById("' + objName + '")'); }else if(document.layers){ return eval("document.layers['" + objName +"']"); }else{ return eval('document.all.' + objName); } } function change_Menu(index){ for(var i=1;i<=num;i++){/* 最多支持8个标签 */ if(GetObj("con"+i)&&GetObj("m"+i)){ GetObj("con"+i).style.display = 'none'; GetObj("m"+i).className = "menu"+i+"Off"; } } if(GetObj("con"+index)&&GetObj("m"+index)){ GetObj("con"+index).style.display = 'block'; GetObj("m"+index).className = "menu"+index+"On"; } cur_index=index if(cur_index<num){ cur_index++ } else{ cur_index=1 } settime=setTimeout("change_Menu(cur_index)",2000)//延迟时间 } function Menu(c_index){ clearTimeout(settime) change_Menu(c_index) } //]]> </script> </head> <body> <!--//您可以将onmouseover 改成 onclick;试试--> <div class="gaosugonglu"> <ul class="3ul"> <li id="m1" onmouseover="Menu(1)" class="menu1On">模板无忧</li> <li id="m2" onmouseover="Menu(2)" class="menu2Off">网页殊效</li> <li id="m3" onmouseover="Menu(3)" class="menu3Off">最新下载</li> <li id="m4" onmouseover="Menu(4)" class="menu4Off">更新排行</li> <li id="m5" onmouseover="Menu(5)" class="menu5Off">网站留言</li> <li id="m6" onmouseover="Menu(6)" class="menu6Off">广告联系</li> <li id="m7" onmouseover="Menu(7)" class="menu7Off">关于我们</li> <li id="m8" onmouseover="Menu(8)" class="menu8Off">源码分类</li> <li id="m9" onmouseover="Menu(9)" class="menu9Off">网站首页</li> </ul> </div> <div id="con1" class="cont_le picfff"> <a href="/" style="text-decoration: none"> <font color="#FF0000">模板无忧</font></a><font color="#FF0000"> <%=TopList(13,"sort","new",8,40,false,false,false,false,false,false,false,1)%> </font> </div> <div id="con2" style="display:none;" class="cont_le picfff"> <a href="http://mb5u.com/" style="text-decoration: none"> <font color="#FF0000">mb5u.com</font></a><font color="#FF0000"> <%=TopList(15,"sort","new",8,40,false,false,false,false,false,false,false,1)%></font> </div> <div id="con3" style="display:none;" class="cont_le picfff"> <a href="http://mb5u.com/" style="text-decoration: none"> <font color="#FF0000">www.mb5u.com</font></a><font color="#FF0000"> <%=TopList(7,"sort","new",8,40,false,false,false,false,false,false,false,1)%></font> </div> <div id="con4" style="display:none;" class="cont_le picfff"> <a href="/" style="text-decoration: none"> <font color="#FF0000">www.mb5u.com</font></a><font color="#FF0000"> <%=TopList(15,"sort","new",8,40,false,false,false,false,false,false,false,1)%></font> </div> <div id="con5" style="display:none;" class="cont_le picfff"> <a href="/" style="text-decoration: none"> <font color="#FF0000">www.mb5u.com</font></a><font color="#FF0000"> <%=TopList(7,"sort","new",8,40,false,false,false,false,false,false,false,1)%></font> </div> <div id="con6" style="display:none;" class="cont_le picfff"> <a href="/" style="text-decoration: none"> <font color="#FF0000">www.mb5u.com</font></a><font color="#FF0000"> <%=TopList(15,"sort","new",8,40,false,false,false,false,false,false,false,1)%></font> </div> <div id="con7" style="display:none;" class="cont_le picfff"> <font color="#FF0000">模板无忧欢迎您!! <%=TopList(7,"sort","new",8,40,false,false,false,false,false,false,false,1)%></font> </div> <div id="con8" style="display:none;" class="cont_le picfff"> <font color="#FF0000">模板无忧是一个注重质量的源码下载站. <%=TopList(15,"sort","new",8,40,false,false,false,false,false,false,false,1)%></font> </div> <div id="con9" style="display:none;" class="cont_le picfff"> <font color="#FF0000">模板无忧欢迎您!! <%=TopList(7,"sort","new",8,40,false,false,false,false,false,false,false,1)%></font> </div> </div> </body> </html>