UDN-企业互联网技术人气社区
UDN 企业互联网技术社区 前端精选 JavaScript精选 JS+CSS实现滑动切换tab菜单效果

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

芭芭拉 论坛 2016-5-5 15:23
分享到:
摘要: 这是风格简单的一款JS+CSS滑动门特效代码,当鼠标滑过菜单的时候,二级菜单自动切换,鼠标不需要点击,滑动门效果是个比较流行的网页菜单效果,在网上经常可看到这种菜单的身影。本菜单在火狐、IE8、Chrome下测试通 ...
  本文实例讲述了JS+CSS实现滑动切换tab菜单效果。分享给大家供大家参考。具体如下:

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

  运行效果截图如下:
1.jpg

  具体代码如下:
  1. <!doctype html>
  2. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" lang="zh_CN" xml:lang="zh_CN">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <script type="text/JavaScript">
  6. var $=function(a,b){
  7. var ID = document.getElementById(a);
  8. var OBJ= (b)?ID.getElementsByTagName(b):ID;
  9. return OBJ
  10. }
  11. var n=0;
  12. var tab = function(MENU,BODY){
  13. var l = MENU.length;
  14. for(var i=0;i<l;i++){
  15.   MENU[i].onmouseover=function(a){
  16.    return function(){
  17.     MENU[n].className="label"
  18.     BODY[n].style.display = "none";
  19.     MENU[a].className="label label-selected";
  20.     BODY[a].style.display = "block";
  21.     n=a;
  22.    }
  23.   }(i);
  24. }
  25. }
  26. </script>
  27. <style>
  28. body{font-family: "微软雅黑","SimSun","宋体","Arial Narrow";}
  29. #header,#main,#footer{width: 1050px;background: #F1F9D9;margin: 5px auto;}
  30. #header{height: 50px;}
  31. #main{height: auto;}
  32. #footer{height: 50px;}
  33. #menu{height: 36px;padding: 2px 0 0 0;}
  34. li{list-style: none;cursor: pointer;}
  35. .category{margin: 0;height: 35px;border-bottom: 1px solid #b5e2f3;text-align: center;}
  36. .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;}
  37. .label-selected{background: #FFF;border-bottom: 1px solid #FFF;}
  38. #linksContent{margin-top: -1;height: 600px;padding: 10px;border: 1px solid #b5e2f3;border-top: 0;background: #FFF;}
  39. .link{float: left;width: 180px;display: block;margin: 10px 0;}
  40. </style>
  41. <title>myLinks</title>
  42. </head>
  43. <body>
  44. <div id="container">
  45. <div id="header"></div>
  46. <div id="main">
  47.   <div id="menu">
  48.    <ul class="category">
  49.    <li class="label label-selected">在线学习</li>
  50.    <li class="label">运动休闲</li>
  51.    <li class="label">编程社区</li>
  52.    <li class="label">文化娱乐</li>
  53.    <li class="label">休息项目</li>
  54.    <li class="label">人际往来</li>
  55.   </ul>
  56.   </div>
  57.   <div id="linksContent">
  58.    <div class="category-1" style="display:block;">
  59.    <ul>
  60.    <li class="link"><span>html学习</span></li>
  61.    <li class="link"><span>编译原理</span></li>
  62.    <li class="link"><span>人工智能</span></li>
  63.    <li class="link"><span>算法设计</span></li>
  64.    </ul>
  65.   </div>
  66.   <div class="category-2" style="display:none;">
  67.    <ul>
  68.    <li class="link"><span>开车</span></li>
  69.    <li class="link"><span>郊游</span></li>
  70.    <li class="link"><span>音乐</span></li>
  71.    </ul>
  72.   </div>
  73.   <div class="category-2" style="display:none;">
  74.    <ul>
  75.    <li class="link"><span>MSDN</span></li>
  76.    <li class="link"><span>编译原理</span></li>
  77.    <li class="link"><span>科幻电影</span></li>
  78.    <li class="link"><span>技术文档</span></li>
  79.    </ul>
  80.   </div>
  81.   <div class="category-2" style="display:none;">
  82.    <ul>
  83.     <li class="link"><span>java学习</span></li>
  84.    <li class="link"><span>html学习</span></li>
  85.    <li class="link"><span>编译原理</span></li>
  86.    <li class="link"><span>人工智能</span></li>
  87.    <li class="link"><span>算法设计</span></li>
  88.    </ul>
  89.   </div>
  90.   <div class="category-2" style="display:none;">
  91.    <ul>
  92.    <li class="link"><span>html学习</span></li>
  93.    <li class="link"><span>编译原理</span></li>
  94.    <li class="link"><span>人工智能</span></li>
  95.    </ul>
  96.   </div>
  97.   <div class="category-2" style="display:none;">
  98.    <ul>
  99.     <li class="link"><span>java学习</span></li>
  100.    <li class="link"><span>html学习</span></li>
  101.    <li class="link"><span>算法设计</span></li>
  102.    </ul>
  103.   </div>
  104.   </div>
  105. </div>
  106. <div id="footer"></div>
  107. </div>
  108. <script>
  109. tab($("menu","li"),$("linksContent","div"));
  110. </script>
  111. </body>
  112. </html>
复制代码

相关阅读

分享到:
已有4条评论

最新评论

gxxf
炫舞狂魔
我是被标题吸引进来的
botao
霸王歸来
jq现在应该算是最火的js框架类了吧?确实很强大extjs基于Yahoo UI的扩展,界面布局和效果方面很给力,但就是有点复杂

一周焦点

关注我们:
关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
返回顶部