自己写的CSS+JS滑动门菜单

2024-09-05 12:19:44

字体：大中小

来源：转载

供稿：网友

自己写的CSS+JS滑动门菜单，支持二级分类，当没有鼠标动作的时候它自己会自动切换，如果不想要这个功能的话可以自己去掉，当初只是自己想研究一下。本人美感不太好，因此美化的不很好，高手再把它美化一下吧，应该还是很不错的。

<html><head><title>滑动门菜单</title><style type="text/css"></style><script language="JavaScript" type="text/javascript">//<![CDATA[var cur_index=1var num=9    //标签个数var settimefunction 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=indexif(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><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"><font color="#FF0000">网站导航</font><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">		<font color="#FF0000">网页特效</font><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">		<font color="#FF0000">最新下载</font><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"><font color="#FF0000">更新排行</font><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"><font color="#FF0000">网站留言</font><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"><font color="#FF0000">广告联系</font><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>

上一篇：银灰色三级CSS下拉菜单

下一篇：绿色带阴影滑过变色自适应宽度的纯CSS菜单