简洁版css仿京东分类菜单开发过程详解
2016-07-07 15:00 来源:www.chinab4c.com 作者:ecshop专家
一直都在找 仿京东商城分类树菜单的源码及开发教程,可搜遍百度谷歌也没有找到相关教程,一咬牙还是自己研究吧! 参考京东商城的源码,及其他源码,提炼出这个简单易懂的分类树源码! 先看截图: 本人不懂设计,样式做得不好看,就各位站长见谅,功能实现就行,对吧! 类似的源码,网站上有好多,功能比这个要强大得太多,我只求明白基本的原理。所以就挑了一个实现起来最简单的来分享给大家,这个没有那么的js脚本,样式嘛也不是太多! 看一下html前台代码:
其实也不复杂哈,再看css样式代码,这是关键:
多吗?不多!看着多,其实是重复的多,可以把重复的都去掉,先看一个:
这样一来,可以说的就没多少了!关键是子类所在层(show_border)的控制,如何设置show_border层左边的边框? 左边的边框通过背景图片来实现,设置背景图不平铺(no-repeat),然后设置其位置处于层边缘,即(0 21px)x轴方向位置为0,y轴方向位置为21px! 另外,show_border样式中,background、background-color、border、border-left-width这四个属性前后顺序也决定着show_border层左边框是否能够准确显示,有兴趣的朋友可以试一下! 其余的就没有什么了,有什么问题,跟贴吧! |
回答:
好东西,顶你 |
不错。拿去试试 |
样式嘛也不是太多! |
感谢楼主分享,我们家这个不知道这样做好不好,奇货网www.qihom.com |
求解我也在研究这个。~~。。。。 |
很好,谢谢楼主分享了 |
那你研究得怎么样了?分享一下吧 |
付费 求仿京东 分类树,会的联系我, Q:1307076510 |
firefox好像不行!CSS估计要调一下 |
恩,这个我没测试,css兼容这东西太麻烦了,还是交给高手去做吧 |
最近更新
常用插件
- ecshop二次开发详细页面生
插件介绍: ECSHOP系统,在很多时候,很多商品没有人购买,不但购买的人...
- ecshop2.7.1打印发货单插件
ecshop2.7.1打印发货单插件介绍:ecshop2.7.1和以前的ecshop版本不一样,ecs...
- ecshop分类批量扩展插件
ecshop分类批量扩展插件,这个插件是ecshop插件里面比较核心的插件。我们...
- ecshop二次商品订购人信息
ecshop二次商品订购人信息填写插件,有时候给朋友送花,或者是送礼品的...
- ecshop商品分类名称增加样
ecshop插件介绍:本插件可以方便在后台管理,为ecshop商品分类名称增加样...
ecshop热门问答
ecshop热门资料
筛选排序
ecshopredis
ecshopmssql
ecshop商品属性分类
ecshop显示不正常
ecshop英国
ecshop数据库表前缀
ecshop模版使用问题
ecshop杂志订阅
ecshop放进
ecshopexists
ecshop订单统计
ecshop机器
ecshop颜色属性
ecshop模板管理
ecshop钱包批发
ecshop好心人帮忙
ecshop淘宝图片
ecshop在线订购
ecshop上班
ecshop订单附言
ecshop关于我们
ecshop立即购买
ecshop来安
ecshop网通
ecshop注册域名
ecmallmodel
ecshop荷兰
ecshop静态化
ecshopsupplied