快捷導(dǎo)航

JS+CSS實(shí)現(xiàn)滑動(dòng)切換tab菜單效果

更新時(shí)間：2015年08月25日 10:22:48 作者：企鵝

這篇文章主要介紹了JS+CSS實(shí)現(xiàn)滑動(dòng)切換tab菜單效果,涉及javascript鼠標(biāo)事件及頁(yè)面元素樣式的動(dòng)態(tài)切換效果實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了JS+CSS實(shí)現(xiàn)滑動(dòng)切換tab菜單效果。分享給大家供大家參考。具體如下：

這是風(fēng)格簡(jiǎn)單的一款JS+CSS滑動(dòng)門特效代碼，當(dāng)鼠標(biāo)滑過菜單的時(shí)候，二級(jí)菜單自動(dòng)切換，鼠標(biāo)不需要點(diǎn)擊，滑動(dòng)門效果是個(gè)比較流行的網(wǎng)頁(yè)菜單效果，在網(wǎng)上經(jīng)?？煽吹竭@種菜單的身影。本菜單在火狐、IE8、Chrome下測(cè)試通過，代碼兼容性還可以，自己用的化再美化一下風(fēng)格。

運(yùn)行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/js-css-move-cha-tab-menu-style-codes/

具體代碼如下：

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" lang="zh_CN" xml:lang="zh_CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var $=function(a,b){
 var ID = document.getElementById(a);
 var OBJ= (b)?ID.getElementsByTagName(b):ID;
 return OBJ
}
var n=0;
var tab = function(MENU,BODY){
 var l = MENU.length;
 for(var i=0;i<l;i++){
  MENU[i].onmouseover=function(a){
   return function(){
    MENU[n].className="label"
    BODY[n].style.display = "none";
    MENU[a].className="label label-selected";
    BODY[a].style.display = "block";
    n=a;
   }
  }(i);
 }
}
</script>
<style>
body{font-family: "微軟雅黑","SimSun","宋體","Arial Narrow";}
#header,#main,#footer{width: 1050px;background: #F1F9D9;margin: 5px auto;}
#header{height: 50px;}
#main{height: auto;}
#footer{height: 50px;}
#menu{height: 36px;padding: 2px 0 0 0;}
li{list-style: none;cursor: pointer;}
.category{margin: 0;height: 35px;border-bottom: 1px solid #b5e2f3;text-align: center;}
.label{border: 1px solid #b5e2f3;float: left;width: 100px;height: 25px;margin: 0 3px;background: #F1FEF3;padding: 9px 0 0 0;outline: 0;-moz-border-radius: 5px 5px 0 0;}
.label-selected{background: #FFF;border-bottom: 1px solid #FFF;}
#linksContent{margin-top: -1;height: 600px;padding: 10px;border: 1px solid #b5e2f3;border-top: 0;background: #FFF;}
.link{float: left;width: 180px;display: block;margin: 10px 0;}
</style>
<title>myLinks</title> 
</head>
<body>
 <div id="container">
 <div id="header"></div>
 <div id="main">
  <div id="menu">
   <ul class="category">
   <li class="label label-selected">在線學(xué)習(xí)</li>
   <li class="label">運(yùn)動(dòng)休閑</li>
   <li class="label">編程社區(qū)</li>
   <li class="label">文化娛樂</li>
   <li class="label">休息項(xiàng)目</li>
   <li class="label">人際往來</li>
  </ul>
  </div>
  <div id="linksContent">
   <div class="category-1" style="display:block;">
   <ul>
   <li class="link"><span>html學(xué)習(xí)</span></li>
   <li class="link"><span>編譯原理</span></li>
   <li class="link"><span>人工智能</span></li>
   <li class="link"><span>算法設(shè)計(jì)</span></li>
   </ul>
  </div>
  <div class="category-2" style="display:none;">
   <ul>
   <li class="link"><span>開車</span></li>
   <li class="link"><span>郊游</span></li>
   <li class="link"><span>音樂</span></li>
   </ul>
  </div>
  <div class="category-2" style="display:none;">
   <ul>
   <li class="link"><span>MSDN</span></li>
   <li class="link"><span>編譯原理</span></li>
   <li class="link"><span>科幻電影</span></li>
   <li class="link"><span>技術(shù)文檔</span></li>
   </ul>
  </div>
  <div class="category-2" style="display:none;">
   <ul>
    <li class="link"><span>java學(xué)習(xí)</span></li>
   <li class="link"><span>html學(xué)習(xí)</span></li>
   <li class="link"><span>編譯原理</span></li>
   <li class="link"><span>人工智能</span></li>
   <li class="link"><span>算法設(shè)計(jì)</span></li>
   </ul>
  </div>
  <div class="category-2" style="display:none;">
   <ul>
   <li class="link"><span>html學(xué)習(xí)</span></li>
   <li class="link"><span>編譯原理</span></li>
   <li class="link"><span>人工智能</span></li>
   </ul>
  </div>
  <div class="category-2" style="display:none;">
   <ul>
    <li class="link"><span>java學(xué)習(xí)</span></li>
   <li class="link"><span>html學(xué)習(xí)</span></li>
   <li class="link"><span>算法設(shè)計(jì)</span></li>
   </ul>
  </div> 
  </div>
 </div>
 <div id="footer"></div>
 </div>
<script>
 tab($("menu","li"),$("linksContent","div"));
</script>
</body>
</html>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: