這么簡單就實現了CSS滑動菜單(滑動門)_菜單導航特效

一個簡單方法實現了CSS滑動門菜單，正研究滑動門的朋友請關注一下，這個代碼可以讓你了解滑動門的實現過程，沒有用什么復雜的方法，只用簡單配合JS，就完成了一個流行的滑動導航。

<html>
<head>
<title>如此簡單就實現了CSS滑動門</title>
<style type="text/css">
*{font-size:9pt;}
 ul li { list-style: none; }
 ul, li { margin: 0; padding: 0;}
.tabs,.tabs_act{float:left;width:103px;border-bottom:1px solid #ccc;border-right:1px solid #ccc;height:25px;text-align:center;line-height:25px;display:block;}
.tabs_act{font-weight:bold;color:#FC7404;border-bottom:1px solid #fff;background-image:url(http://www.wf0088.com/jscss/demoimg/200904/bgOFF4.gif)}
.Sliding_tab{width:513px;border-left:1px solid #ccc;height:27px;} 
.Sliding_tab li{float:left;border-top:1px solid #ccc;}
.Sliding_tab li.table_li{border-bottom:1px solid #ccc;border-top:0px;width:305px;height:26px;line-height:26px;}
.tablist { clear:both; width:513px;border:1px solid #ccc;border-top:0px;height:300px;overflow:hidden;}
</style>
<SCRIPT language=javascript type=text/javascript>
    function g(o){return document.getElementById(o);}
       function Hovertab(num,counts,tabname,tabclass){
          for (i=1;i<=counts;i++)          { 
             g(tabname+'tab0'+i).className=tabclass+'tabs';
              g(tabname+'div0'+i).style.display='none'; 
         }  
            g(tabname+'tab0'+num).className=tabclass+'tabs_act';
              g(tabname+'div0'+num).style.display='block'; 
     }   </SCRIPT> 
</HEAD>
<BODY>
 <div style=" width:513px; float:left; clear:both;">
<DIV class="Sliding_tab">
<UL> 
<LI><A class=tabs_act id=set_tab01 onMouseOver="Hovertab('1','2','set_','');" href="#">CSS</A></LI>
<LI><A class=tabs id=set_tab02 onMouseOver="Hovertab('2','2','set_','');" href="#">AJAX</A> </LI>                                 <LI class="table_li"></LI>
</UL>
</DIV>
<DIV class=tablist id=set_div01>CSS內容</DIV>
<DIV class=tablist id=set_div02 style="DISPLAY: none">AJAX內容</DIV>
</div>
</BODY>
</HTML>

所屬頻道：菜單導航特效/更新時間：2012-11-21

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

相關菜單導航特效：

這么簡單就實現了CSS滑動菜單(滑動門)_菜單導航特效

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

菜單導航特效推薦

猜你也喜歡看這些