自己寫的CSS+JS滑動門菜單_菜單導航特效

自己寫的CSS+JS滑動門菜單，支持二級分類，當沒有鼠標動作的時候它自己會自動切換，假如不想要這個功能的話可以自己往掉，當初只是自己想研究一下。本人美感不太好，因此美化的不很好，高手再把它美化一下吧，應(yīng)該還是很不錯的。

<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    //標簽個數(shù)
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>

<div class="gaosugonglu">
<ul class="3ul">
<li id="m1" onmouseover="Menu(1)" class="menu1On">模板無憂</li>
<li id="m2" onmouseover="Menu(2)" class="menu2Off">網(wǎng)頁殊效</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">網(wǎng)站留言</li>
<li id="m6" onmouseover="Menu(6)" class="menu6Off">廣告聯(lián)系</li>
<li id="m7" onmouseover="Menu(7)" class="menu7Off">關(guān)于我們</li>
<li id="m8" onmouseover="Menu(8)" class="menu8Off">源碼分類</li>
<li id="m9" onmouseover="Menu(9)" class="menu9Off">網(wǎng)站首頁</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  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  style="text-decoration: none">
	<font color="#FF0000">www.hl5o.cn</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.hl5o.cn</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.hl5o.cn</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.hl5o.cn</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">模板無憂是一個注重質(zhì)量的源碼下載站.
<%=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>

所屬頻道：菜單導航特效/更新時間：2010-05-22

[收藏][報錯][返回列表]

相關(guān)菜單導航特效：

菜單導航特效Rss訂閱特效代碼搜索

菜單導航特效推薦

猜你也喜歡看這些

相關(guān)鏈接：
復制本頁鏈接| 搜索自己寫的CSS+JS滑動門菜單
特效說明：
菜單導航模板-自己寫的CSS+JS滑動門菜單。

日韩天天综合网_野战两个奶头被亲到高潮_亚洲日韩欧美精品综合_av女人天堂污污污_视频一区**字幕无弹窗_国产亚洲欧美小视频_国内性爱精品在线免费视频_国产一级电影在线播放_日韩欧美内地福利_亚洲一二三不卡片区

自己寫的CSS+JS滑動門菜單_菜單導航特效

菜單導航特效Rss訂閱特效代碼搜索

菜單導航特效推薦

猜你也喜歡看這些