艺灵设计

全部文章
×

爱淘宝商品类目侧边特效

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2015-03-24 18:34:42 - 阅: - 评:1 - 积分:0

话说好久没有给小伙伴们分享牛x炫酷特效了。今天抽空来一个吧。

到底是什么呢,还是侧边特效,跟去年的那个淘宝店铺装修之侧边导航模版有点类似,但效果要比去年的那个好些。还是先来看下爱淘宝官网的效果图吧。
爱淘宝商品类目侧边特效

下面我简单的来对此特效进行一下分析:默认情况下右侧菜单是折叠的,当鼠标移到左侧对应的栏目上时,左侧同辈元素的高度减少并且自身高度增加,右侧对应的菜单展开。哦,对了,官方这个是用js实现的。现在,我们需要用css来进行实现。对,你没有听错,确实是只用css并且最终的效果不亚于官方原版!

上面已经对爱淘宝的这个侧边栏特效进行了分析,我们可以大致理清了思路,下面是进行实战操作阶段。在实际操作过程中,我们需要围绕两点。
一.自身高度增加同时同辈高度减少;
二.对应的右侧栏展开与收缩。

先来放一段破解必用的css代码片段吧。

 

  1. .footer-more-trigger,.most-footer,.sn-simple-logo{position:absolute;left:auto;top:auto;width:auto;line-height:inherit;padding:0;border:0;}/*重置系统样式,清除边框、填充、背景等其它属性*/

然后再放这个侧边栏特效用到的css样式。

 

  1. /*********侧边栏特效 2015-03-24 艺灵设计**********/
  2. /*侧边栏最外层框架*/
  3. .ylsj-sidebar-w{width: 289px;position: relative;}
  4. /*左侧每个li的样式名,避免与右侧自定义的li重名*/
  5. .ylsj-sidebar{height: 74px;overflow:hidden;border: 1px solid #ff5a00;border-width: 0 1px 1px 0;-webkit-transition: .4s ease-out;transition: .4s ease-out;}
  6. /*滑过本身及同辈发生变化*/
  7. .ylsj-sidebar-w:hover .ylsj-sidebar{height: 44px;background-color: #EFEFEF;}
  8. .ylsj-sidebar-w:hover .ylsj-sidebar:hover{height: 254px;background-color: #fff;}
  9. /*侧边栏中全局a的样式*/
  10. .ylsj-sidebar a{display: inline-block;line-height: 36px;padding-right: 15px;text-decoration: none;color: #333;font-size: 12px;font-family: tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;}
  11. .ylsj-sidebar a:hover{text-decoration: underline;color:#ff5a00;}
  12. /*侧边栏一分为二,.l为左类目名,.r为右对应细分类*/
  13. .ylsj-sidebar .l{float: left;width: 58px;height: 100%;text-align: center;font-size: 14px;}
  14. .ylsj-sidebar .l h3{font-size: 14px;margin-top: 15px;line-height: 22px;}
  15. .ylsj-sidebar .l i{width: 25px; height: 25px; border-radius: 16px; margin:8px auto 0;color: #fff; display: block;background: url(/d/file/code/2015-03-24/ico.png) no-repeat;}
  16. /*ico图标背景偏移*/
  17. .ylsj-sidebar i.ico_2{background-position: 0 -25px;}
  18. .ylsj-sidebar i.ico_3{background-position: 0 -50px;}
  19. .ylsj-sidebar i.ico_4{background-position: 0 -75px;}
  20. .ylsj-sidebar i.ico_5{background-position: 0 -100px;}
  21. .ylsj-sidebar i.ico_6{background-position: 0 -125px;}
  22. .ylsj-sidebar i.ico_7{background-position: 0 -150px;}
  23. .ylsj-sidebar .r{overflow: hidden; }
  24. /*右侧待展开面板(注意这里有一个小坑,绝对定位,你懂的)*/
  25. .ylsj-sidebar .box{position: absolute; overflow: hidden; top: -1px; left: 289px; width:0; padding:0; height: 514px;background: #ff5a00; opacity: .94;-webkit-transition: cubic-bezier(0.58,0,0.3,2.3) 0.2s;transition: cubic-bezier(0.58,0,0.3,2.3) 0.2s;}
  26. .ylsj-sidebar:hover .box{width:269px;padding:5px; border: 1px solid #eee;border-left: 0 }
  27. /*右侧待展开面板,可通过下列样式名进行分别控制背景色或其它样式*/
  28. .ylsj-sidebar .box_2{}
  29. .ylsj-sidebar .box_3{}
  30. .ylsj-sidebar .box_4{}
  31. .ylsj-sidebar .box_5{}
  32. .ylsj-sidebar .box_6{}
  33. .ylsj-sidebar .box_7{}
  34. .ylsj-sidebar .box_8{}

最后再放侧边栏的html源码。

 

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>爱淘宝商品类目侧边特效--艺灵设计,qq群:231749938</title>
  6. <meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com">
  7. <meta name="keywords" content="侧边栏特效,鼠标滑过特效,悬浮侧边特效,炫酷侧边特效,淘宝店铺特效,.most-footer,.sn-simple-logo">
  8. <link type="text/css" rel="stylesheet" href="/d/file/code/2015-03-24/ylsj-sidebar.css" />
  9. </head>
  10. <body>
  11. <!--爱淘宝商品类目侧边栏特效-->
  12. <ul class="ylsj-sidebar-w">
  13. <li class="ylsj-sidebar">
  14. <div class="l">
  15. <h3>女人</h3>
  16. <i class="ico"> </i>
  17. </div>
  18. <div class="r">
  19. <a>cachecache</a><a >s.deer</a><a >森马</a><a>柚子美衣</a><a>春秋外套</a><a>单肩包</a><a>船袜</a><a>斜挎包</a><a>娃娃衫</a><a>衬衣裙</a><a>bf风外套</a><a>春秋连衣裙</a><a>打底裤</a><a>短袜</a><a>闺蜜装</a><a>连休裤</a><a>连休裤</a><a>连休裤 连休裤</a><a>连休裤 连休裤 </a><a>连休裤 连休裤 连休裤</a>
  20. </div>
  21. <div class="box">右侧内容自己填写</div>
  22. </li>
  23. <li class="ylsj-sidebar">
  24. <div class="l">
  25. <h3>男人</h3>
  26. <i class="ico_2"> </i>
  27. </div>
  28. <div class="r">自己放内容</div>
  29. <div class="box box_2">右侧内容自己填写</div>
  30. </li>
  31. <li class="ylsj-sidebar">
  32. <div class="l">
  33. <h3>美妆</h3>
  34. <i class="ico_3"> </i>
  35. </div>
  36. <div class="r">自己放内容</div><div class="
  37. box box_3">右侧内容自己填写</div>
  38. </li>
  39. <li class="ylsj-sidebar">
  40. <div class="l">
  41. <h3>数码</h3>
  42. <i class="ico_4"> </i>
  43. </div>
  44. <div class="r">自己放内容</div>
  45. <div class="box box_4">右侧内容自己填写</div>
  46. </li>
  47. <li class="ylsj-sidebar">
  48. <div class="l">
  49. <h3>家居</h3>
  50. <i class="ico_5"> </i>
  51. </div>
  52. <div class="r">自己放内容</div>
  53. <div class="box box_5">右侧内容自己填写</div>
  54. </li>
  55. <li class="ylsj-sidebar">
  56. <div class="l">
  57. <h3>母婴</h3>
  58. <i class="ico_6"> </i>
  59. </div>
  60. <div class="r">自己放内容</div>
  61. <div class="box box_6">右侧内容自己填写</div>
  62. </li>
  63. <li class="ylsj-sidebar">
  64. <div class="l">
  65. <h3>美食</h3>
  66. <i class="ico_7"> </i>
  67. </div>
  68. <div class="r">自己放内容</div>
  69. <div class="box box_7">右侧内容自己填写</div>
  70. </li>
  71. </ul>
  72. </body>
  73. </html>

艺灵在此演示的只是一个框架,各位看官可根据自身情况进行改造。改造时请务必将上面的css中的注释看完,以免改造过程中产生错误。源码已经打包好了,下面可以进行下载。

 

  1. 爱淘宝商品类目侧边特效.zip (已将天猫代码和淘宝代码进行分开)

嗯.....,好像还少了点什么。不对呀,代码没有进行破解我怎么用呢?

确实如此,不过也不要紧,此代码只适用于已开通旺铺css(2400/年)的用户,对于未开通的用户也是可以使用的。那就是:点击导航上面的“在线生成”,进去后点击一款名叫“破解淘宝css权限工具”的工具,然后将html代码粘贴进去进行破解即可。目前破解功能以及悬浮功能只针对赞助会员以上级别提供使用,也就50大洋,还不够你们老板刷单的,真的!

最后再说一点,凡是破解代码样式中含有position:absolute;的对应样式名均需要添加系统样式名,淘宝的添加footer-more-trigger most-footer,天猫的添加sn-simple-logo即可。刚我已经在css注释中提到一个小坑的那里,现在就以淘宝举例:

将出现过box的地方都修改成box footer-more-trigger most-footer即可。

转载声明:
  若亲想转载本文到其它平台,请务必保留本文出处!
本文链接:http://www.yilingsj.com/code/2015-03-24/252.html

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

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

Tag: 侧边栏特效 鼠标滑过特效 悬浮侧边特效 炫酷侧边特效 淘宝店铺特效 .most-footer .sn-simple-logo

上一篇: 淘宝天猫店铺装修问题与技巧性经验汇总   下一篇: 谈谈破解淘宝悬浮代码的进化史

评论区