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

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

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

运行效果截图如下：

在线演示地址如下：

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

具体代码如下：







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;}

mylinks 


 
 
 
  
   
   在线学习
   运动休闲
   编程社区
   文化娱乐
   休息项目
   人际往来
  
  
  
   
   
   html学习
   编译原理
   人工智能
   算法设计
   
  
  
   
   开车
   郊游
   音乐
   
  
  
   
   MSDN
   编译原理
   科幻电影
   技术文档
   
  
  
   
    java学习
   html学习
   编译原理
   人工智能
   算法设计
   
  
  
   
   html学习
   编译原理
   人工智能
   
  
  
   
    java学习
   html学习
   算法设计

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

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

JavaScript相关栏目本月热门文章