艺灵设计

全部文章
×

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权限框架了,那个在详情页早封杀了。

转载声明:
  若亲想转载本文到其它平台,请务必保留本文出处!
本文链接:http://www.yilingsj.com/jquery/2014-11-19/223.html

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

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

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

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

评论区