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 08 Javascript
JavaScript在XHTML中的用法详解
Apr 11 Javascript
使用javascript实现Iframe自适应高度
Dec 24 Javascript
JavaScript中原型和原型链详解
Feb 11 Javascript
jQuery对象的链式操作用法分析
May 10 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
Nov 17 Javascript
ES6学习之变量的两种命名方法示例
Jul 18 Javascript
Vue.js组件高级特性实例详解
Dec 24 Javascript
node.js express框架简介与实现
Jul 23 Javascript
WEB前端性能优化的7大手段详解
Feb 04 Javascript
js实现超级玛丽小游戏
Mar 18 Javascript
微信小程序拖拽排序列表的示例代码
Jul 08 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下用rmdir实现删除目录的三种方法小结
2008/04/20 PHP
PHP调用接口API封装的例子
2019/10/11 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
JQuery拖拽元素改变大小尺寸实现代码
2012/12/10 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2013/02/02 Javascript
javascript 得到文件后缀名的思路及实现
2020/05/09 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
2014/03/03 Javascript
JavaScript事件委托技术实例分析
2015/02/06 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
图解prototype、proto和constructor的三角关系
2016/07/31 Javascript
JavaScript Uploadify文件上传实例
2017/02/28 Javascript
Vue.js常用指令的使用小结
2017/06/23 Javascript
VUE中使用Vue-resource完成交互
2017/07/21 Javascript
qrcode生成二维码微信长按无法识别问题的解决
2019/04/04 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
2019/08/20 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
vue组件中传值EventBus的使用及注意事项说明
2020/11/16 Javascript
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
python 显示数组全部元素的方法
2018/04/19 Python
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
pyqt5的QWebEngineView 使用模板的方法
2018/08/18 Python
Django框架创建mysql连接与使用示例
2019/07/29 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
CSS3 实现的火焰动画
2020/12/07 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
2015/11/24 HTML / CSS
德国网上药房:Apotal
2017/04/04 全球购物
英国第一摩托车和摩托车越野配件商店:GhostBikes
2019/03/10 全球购物
销售人员自我评价
2014/02/01 职场文书
总经理助理职责
2014/02/04 职场文书
经典婚礼主持词
2014/03/13 职场文书
学雷锋树新风演讲稿
2014/05/10 职场文书
小学英语教师研修感悟
2015/11/18 职场文书
golang 比较浮点数的大小方式
2021/05/02 Golang