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


Posted in Javascript onAugust 25, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 判断指定字符串是否为有效数字
May 11 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 Javascript
checkbox使用示例
Aug 23 Javascript
jQuery遍历Form示例代码
Sep 03 Javascript
js密码强度检测
Jan 07 Javascript
jquery实现页面常用的返回顶部效果
Mar 04 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
Apr 28 Javascript
JavaScript lodash常见用法系列小结
Aug 24 Javascript
javascript ASCII和Hex互转的实现方法
Dec 27 Javascript
js异步编程小技巧详解
Aug 14 Javascript
使用Angular Cli如何创建Angular私有库详解
Jan 30 Javascript
JavaScript函数柯里化
Nov 07 Javascript
jquery图片滚动放大代码分享(1)
Aug 25 #Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 #Javascript
jquery实现的3D旋转木马特效代码分享
Aug 25 #Javascript
jQuery+CSS实现的网页二级下滑菜单效果
Aug 25 #Javascript
jQuery实现点击小图显示大图代码分享
Aug 25 #Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 #Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
Aug 24 #Javascript
You might like
PHP扩展模块Pecl、Pear以及Perl的区别
2014/04/09 PHP
为你总结一些php系统类函数
2015/10/21 PHP
Yii2使用表单上传文件的实例代码
2017/08/03 PHP
PHP格式化显示时间date()函数代码
2018/10/03 PHP
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
2012/10/11 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
JavaScript获取页面上被选中文字的方法技巧
2015/03/13 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
2015/04/06 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
2015/10/26 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
2016/02/02 Javascript
JavaScript浏览器对象之一Window对象详解
2016/06/03 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
jQuery编写网页版2048小游戏
2017/01/06 Javascript
ES6中Math对象的部分扩展
2017/02/20 Javascript
深入理解Angular4中的依赖注入
2017/06/07 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
2017/08/16 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
2018/05/02 Javascript
解决vue单页面应用中动态修改title问题
2019/06/09 Javascript
解决layui 三级联动下拉框更新时回显的问题
2019/09/03 Javascript
django模型中的字段和model名显示为中文小技巧分享
2014/11/18 Python
Python IDE PyCharm的基本快捷键和配置简介
2015/11/04 Python
python列表生成式与列表生成器的使用
2018/02/23 Python
Selenium鼠标与键盘事件常用操作方法示例
2018/08/13 Python
python的依赖管理的实现
2019/05/14 Python
Python 实现遥感影像波段组合的示例代码
2019/08/04 Python
python conda操作方法
2019/09/11 Python
Pycharm修改python路径过程图解
2020/05/22 Python
Python爬虫获取豆瓣电影并写入excel
2020/07/31 Python
使用OpenCV校准鱼眼镜头的方法
2020/11/26 Python
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
介绍一下XMLHttpRequest对象
2012/02/12 面试题
中学生班主任评语
2014/01/30 职场文书
《桃林那间小木屋》教学反思
2014/05/01 职场文书
2015年度优秀员工推荐信
2015/03/23 职场文书
如何写观后感
2015/06/19 职场文书