艺灵设计

全部文章
×
当前位置：首页 >> 淘宝经验>>爱淘宝商品类目侧边特效

爱淘宝商品类目侧边特效

作者:艺灵设计　-　来源: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即可。

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/code/2015-03-24/252.html

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

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

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

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

相关文章

鼠标滑过遮罩特效鼠标滑过图片旋转180度特效-破解版tips提示框特效-破解版鼠标滑过换图特效-破解版鼠标滑过变亮特效-破解版js网页特效之鼠标移入时弹出隐藏内京东鼠标滑过变亮特效京东鼠标滑过变暗特效多功能鼠标滑过换图特效-破解版淘宝店铺背景音乐制作教程

评论区

我要评论

近期更新

权限破解之一键复制某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号
特别申明：本站内容仅供个人学习参考，不做其它用途。