JS+CSS实现滑动切换tab菜单效果

前端技术 2023/09/02 JavaScript

本文实例讲述了JS+CSS实现滑动切换tab菜单效果。分享给大家供大家参考。具体如下：

这是风格简单的一款JS+CSS滑动门特效代码，当鼠标滑过菜单的时候，二级菜单自动切换，鼠标不需要点击，滑动门效果是个比较流行的网页菜单效果，在网上经常可看到这种菜单的身影。本菜单在火狐、IE8、Chrome下测试通过，代码兼容性还可以，自己用的化再美化一下风格。

运行效果截图如下：

在线演示地址如下：

http://demo.phpstudy.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\">在线学习</li>
   <li class=\"label\">运动休闲</li>
   <li class=\"label\">编程社区</li>
   <li class=\"label\">文化娱乐</li>
   <li class=\"label\">休息项目</li>
   <li class=\"label\">人际往来</li>
  </ul>
  </div>
  <div id=\"linksContent\">
   <div class=\"category-1\" style=\"display:block;\">
   <ul>
   <li class=\"link\"><span>html学习</span></li>
   <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>开车</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>技术文档</span></li>
   </ul>
  </div>
  <div class=\"category-2\" style=\"display:none;\">
   <ul>
    <li class=\"link\"><span>java学习</span></li>
   <li class=\"link\"><span>html学习</span></li>
   <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>html学习</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学习</span></li>
   <li class=\"link\"><span>html学习</span></li>
   <li class=\"link\"><span>算法设计</span></li>
   </ul>
  </div> 
  </div>
 </div>
 <div id=\"footer\"></div>
 </div>
<script>
 tab($(\"menu\",\"li\"),$(\"linksContent\",\"div\"));
</script>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

本文地址：https://www.stayed.cn/item/5642

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案