艺灵设计

全部文章
×
当前位置：首页 >> jquery特效>>jquery特效之手风琴式导航

jquery特效之手风琴式导航

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2014-11-19 09:44:19　-　阅:　-　评:0　-　积分:0

前几天一网友在qq上面找我，让我看一个效果。具体是什么效果呢？打开链接才知道，原来是一个手风琴式导航。效果图如下： jquery特效之手风琴式导航 原网站链接：http://www.pcbaby.com.cn

下面来做下特效分析，有利于着手完成特效。
特效分析：鼠标滑过时，显示隐藏的二级导航并且一级导航颜色发生变化；鼠标离开后，二级导航隐藏并且一级导航颜色恢复原始色。
分析完成后我们大致就知道了该如何来写框架了，大致框架是这样的。

框架模型

  1. <ul>
  2. 　<li>
  3. 　　<a>一级导航</a>
  4. 　　<a>对应的二级导航隐藏，适情况循环</a>
  5. 　</li>
  6. 　<li>适情况循环</li>
  7. </ul>

这里可以有多种方法实现这种效果，而艺灵则用最精简的代码来完成这一效果。上面我们大致写出了框架，有了框架需要css来完成剩下的工作。那么，css又该如何精简呢？

仔细看上图，我们可以控制li的宽度来完成这一展开与收缩的动作。默认情况下，li是处于收缩状态；当鼠标滑过li时，宽度变长完成展开动作。为了兼容ie9以下的浏览器，在这里添加了jquery来处理动画过渡效果，下面来看完整的代码。

完整代码

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>jquery特效之手风琴式导航--艺灵设计,qq群:231749938</title>
  6. <meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com">
  7. <meta name="keywords" content="jquery鼠标滑过特效,手风琴式导航,手风琴特效,导航特效,jquery展开与收缩">
  8. <style type="text/css">
  9. *{margin:0;padding:0}
  10. ul,ol{list-style:none}
  11. body{background-color:#f8f8f8;}
  12. .clearfix{*zoom:1}
  13. .clearfix:after{content:"";clear:both;display:block}
  14. .ylsj-sfq_nav_w{width:100%;height:59px;border-top:2px solid #f33;border-bottom:2px solid #ececec;background-color:#fff}
  15. .ylsj-sfq_nav{margin:0 auto;width:999px;border-right:1px solid #ececec}
  16. .ylsj-sfq_nav li{float:left;width:128px;height:59px;line-height:59px;text-align:center;font-family:微软雅黑;border-left:1px solid #ececec;overflow:hidden;}
  17. .ylsj-sfq_nav li a {float:left;font-size:18px;line-height:59px;color:#333;margin:0 10px;text-decoration:none}
  18. .ylsj-sfq_nav li a.ylsj-tit{width:128px;height:59px;display:block;margin:0;font-size:12px;color:#ccc;}
  19. .ylsj-sfq_nav li a span{height:14px;line-height:14px;font-size:12px;display:block;}
  20. .ylsj-sfq_nav li a .ylsj-tit_t{height:30px;line-height:30px;display:block;padding-top:7px;font-size:24px;color:#333;}
  21. .ylsj-sfq_nav li.hover .ylsj-tit_t{color:#f33}
  22. .ylsj-sfq_nav li a:hover span{color:#ccc}
  23. .ylsj-sfq_nav li a:hover {text-decoration:none;color:#f33;}
  24. </style>
  25. <!--引入jquery库-->
  26. <script type="text/javascript" src="http://www.yilingsj.com/skin/yilingsj/js/jquery-1.8.3.min.js"></script>
  27. <script type="text/javascript">
  28. $(function(){
  29. /*定义一个简短的对象名*/
  30. 　var $li=$('.ylsj-sfq_nav_w li');
  31. /*li的滑过事件*/
  32. 　$li.on('hover',function(){
  33. /*li滑过时，本身执行动画将长度变长*/
  34. 　$(this).stop().animate({width:'482px'}).addClass('hover')
  35. /*同辈的li则恢复原始长度*/
  36. 　.siblings('li').stop().animate({width:'128px'}).removeClass('hover');
  37. 　});
  38. });
  39. </script>
  40. </head>
  41. <body>
  42. <div class="ylsj-sfq_nav_w">
  43. <ul class="ylsj-sfq_nav clearfix">
  44. <li class="hover" style="width:482px">
  45. <a href="" target="_blank" class="ylsj-tit"><span class="ylsj-tit_t">怀孕</span><span>PREGNANCY</span></a>
  46. <a href="" target="_blank">备孕</a>
  47. <a href="" target="_blank">孕早期</a>
  48. <a href="" target="_blank">孕中期</a>
  49. <a href="" target="_blank">孕晚期</a>
  50. <a href="" target="_blank">分娩</a>
  51. </li>
  52. <li>
  53. <a href="" target="_blank" class="ylsj-tit"><span class="ylsj-tit_t">产后</span><span>POSTNATAL CAPE</span></a>
  54. <a href="" target="_blank">月子</a>
  55. <a href="" target="_blank">减肥</a>
  56. <a href="" target="_blank">避孕</a>
  57. <a href="" target="_blank">大姨妈</a>
  58. <a href="" target="_blank">女性健康</a>
  59. </li>
  60. <li>
  61. <a href="" target="_blank" class="ylsj-tit"><span class="ylsj-tit_t">育儿</span><span>PARENTNG</span></a>
  62. <a href="" target="_blank">新生儿</a>
  63. <a href="" target="_blank">0-1岁</a>
  64. <a href="" target="_blank">1-3岁</a>
  65. <a href="" target="_blank">3-6岁</a>
  66. <a href="" target="_blank">早教</a>
  67. </li>
  68. <li>
  69. <a href="" target="_blank" class="ylsj-tit"><span class="ylsj-tit_t">生活</span><span>LIFE</span></a>
  70. <a href="" target="_blank">营养</a>
  71. <a href="" target="_blank">食谱</a>
  72. <a href="" target="_blank">潮妈</a>
  73. <a href="" target="_blank">儿童房</a>
  74. <a href="" target="_blank">二胎指南</a>
  75. </li>
  76. <li>
  77. <a href="" target="_blank" class="ylsj-tit"><span class="ylsj-tit_t">精选</span><span>INTERACTIVE</span></a>
  78. <a href="" target="_blank">工具</a>
  79. <a href="" target="_blank">图说</a>
  80. <a href="" target="_blank">专栏</a>
  81. <a href="" target="_blank">部落</a>
  82. <a href="" target="_blank">问编辑</a>
  83. </li>
  84. 　</ul>
  85. </div>
  86. </body>
  87. </html>

点此下载→→jquery特效之手风琴式导航.zip

点击上面的“运行代码”可以在新页面展示最终效果。怎么样，效果还不错吧，代码比原网站的要精简哦！而且原网站的还没有做ie下的兼容性处理~

最后说一下，这个手风琴式导航特效可以用到淘宝或天猫店铺的哦！但是，前提是需要开通旺铺css权限。别想着用破解版的css权限框架了，那个在详情页早封杀了。

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/jquery/2014-11-19/223.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！

Tag: jquery鼠标滑过特效 手风琴式导航 手风琴特效 导航特效 jquery展开与收缩

上一篇: jquery批量控制图片大小高度取整数　　　下一篇: 让ie6到ie9完美兼容placeholder属性的jquery.yilingsj-placeholder.js插件

相关文章

微信小程序从入坑到放弃之十四：竖向淘宝海蓝色系导航特效淘宝黑色系导航特效全屏海报+侧边栏导航特效淘宝侧边栏导航特效淘宝系统自带导航坑点之右边框炫酷弹性导航生成器仿淘宝UED左侧导航跟随鼠标特效css3导航特效之跟随鼠标二css3导航特效之跟随鼠标一

评论区

我要评论

近期更新

权限破解之一键复制某sdn上的代码块 浅聊某sdn是如何实现未登录时屏蔽复制的 bug复盘之如何优雅的实现表格跨页勾选 记一次APP内调起微信支付时首次成功唤醒，后面 记一次注销联通卡的吐血经历 2023年敬业福获取方法 bug复盘之除数为0会怎样？ Vite2项目优化之线上功能有异常，如何快速排查 bug复盘之Vite2项目在线上报错，修复后却意外发 工具分享之图片压缩

热门标签

微信小程序 小程序 用户体验 uni-app gulp教程 @vuecli3 vue.js 路由守卫 vuex vue项目实战 路由 自动化构建 破解 网站管理系统 ajax php二次开发 在线生成 京东装修 破解淘宝css权限 jquery插件制作 淘宝店铺装修教程 ie6 bug jquery特效 css3 注册插件 源码分享 悬浮代码 视频教程 全屏模板框架 footer-more-trigger 鼠标滑过特效 sn-simple-logo 淘宝店铺装修经验汇总 喜欢代码 弹出层 宝贝分享代码 购物车代码 登陆插件 宝贝收藏代码 详情页全屏 天猫关注带数字 导航特效 遮罩层特效 修改淘宝销量 flash动画 模块下10px问题 二级下拉菜单 轮播特效 京东店铺装修 插件下载 淘宝漏洞 鼠标跟随 隐藏的店招/模块 css3边框阴影 赚积分

点击排行

2016淘宝完全自定义css工具淘宝天猫2016最新css悬浮工具淘宝基础版店铺自由编辑页头页面工具淘宝基础版店铺自主授权工具淘宝基础版店铺真正去除页头10px工具2016淘宝天猫全屏全家桶工具淘宝基础版店铺自由编辑页尾工具为了抓包某app,我折腾了10天,原来他是这样防抓包的纯css实现超宽图片全屏居中（兼容淘宝店铺）css3边框阴影效果

站长推荐

在线生成软件帮助文档实现淘宝基础版详情页导航全屏背景的方法第二期:玩转淘宝店铺装修网站部分文章更新动态一览表淘宝天猫店铺装修问题与技巧性经验汇总淘宝Widget库中轮播特效从入门到精通曝淘宝网往期改销量多处漏洞淘宝卖家有无必要开通css纯css实现超宽图片全屏居中（兼容淘宝店铺）鼠标滑过图片显示遮罩层特效集合(16种不同特效任你挑选)
关于艺灵网站地图艺灵团队
Copyright © 2012 - 2022 艺灵设计, all rights reserved. 技术支持：艺灵设计 网站备案：豫ICP备13015019号
特别申明：本站内容仅供个人学习参考，不做其它用途。