简洁版css仿京东分类菜单开发过程详解

2016-07-07 15:00 来源：www.chinab4c.com 作者：ecshop专家

一直都在找 仿京东商城分类树菜单的源码及开发教程，可搜遍百度谷歌也没有找到相关教程，一咬牙还是自己研究吧！
参考京东商城的源码，及其他源码，提炼出这个简单易懂的分类树源码！

先看截图：

本人不懂设计，样式做得不好看，就各位站长见谅,功能实现就行，对吧！

类似的源码，网站上有好多，功能比这个要强大得太多，我只求明白基本的原理。所以就挑了一个实现起来最简单的来分享给大家，这个没有那么的js脚本，样式嘛也不是太多！
看一下html前台代码：

  1. <div class="category_tree">
  2. <h2 class="cat_tree_title">商品分类</h2>
  3. <div class="cat_title" onmouseover="this.className='cat_title active_cat'" onmouseout="this.className='cat_title'">
  4. <div class="category_name"><a href="http://www.bdjdw.com">空调</a></div>

  6. <div class="show_border">
  7. <ul>
  8. <li><a href="http://www.bdjdw.com">立柜式</a></li>
  9. <li><a href="http://www.bdjdw.com">壁挂式</a></li>
  10. <li><a href="http://www.bdjdw.com">嵌入式</a></li>
  11. </ul></div>
  12. </div>
  13. <div class="cat_title" onmouseover="this.className='cat_title active_cat'" onmouseout="this.className='cat_title'">
  14. <div class="category_name"><a href="http://www.bdjdw.com">冰箱</a></div>

  16. <div class="show_border">
  17. <ul>
  18. <li><a href="http://www.bdjdw.com">单门</a></li>
  19. <li><a href="http://www.bdjdw.com">双开门</a></li>
  20. <li><a href="http://www.bdjdw.com">对开门</a></li>
  21. <li><a href="http://www.bdjdw.com">三开门</a></li>
  22. </ul></div></div>

  24. <div class="cat_title" onmouseover="this.className='cat_title active_cat'" onmouseout="this.className='cat_title'">
  25. <div class="category_name"><a href="http://www.bdjdw.com">厨卫电器</a></div>

  27. <div class="show_border">
  28. <ul>
  29. <li><a href="http://www.bdjdw.com">抽油烟机</a></li>
  30. <li><a href="http://www.bdjdw.com">灶具</a></li>
  31. <li><a href="http://www.bdjdw.com">微波炉</a></li>
  32. <li><a href="http://www.bdjdw.com">电压力锅</a></li>
  33. <li><a href="http://www.bdjdw.com">电饼铛</a></li>
  34. <li><a href="http://www.bdjdw.com">电磁炉</a></li>
  35. <li><a href="http://www.bdjdw.com">消毒柜</a></li>
  36. <li><a href="http://www.bdjdw.com">热水器</a></li>
  37. <li><a href="http://www.bdjdw.com">电烤箱</a></li>
  38. </ul></div></div>
  39. <div class="cat_title" onmouseover="this.className='cat_title active_cat'" onmouseout="this.className='cat_title'">
  40. <div class="category_name"><a href="http://www.bdjdw.com">液晶电视</a></div>

  42. <div class="show_border">
  43. <ul>
  44. <li><a href="http://www.bdjdw.com">液晶电视</a></li>
  45. <li><a href="http://www.bdjdw.com">电视底座</a></li>
  46. <li><a href="http://www.bdjdw.com">电视挂架</a></li>
  47. <li><a href="EVDhttp://www.bdjdw.com">EVD</a></li>
  48. </ul></div></div>
  49. <div class="cat_title" onmouseover="this.className='cat_title active_cat'" onmouseout="this.className='cat_title'">
  50. <div class="category_name"><a href="http://www.bdjdw.com">洗衣机</a></div>
  51. <div class="show_border">
  52. <ul>
  53. <li><a href="http://www.bdjdw.com">全自洗衣机</a></li>
  54. <li><a href="http://www.bdjdw.com">**洗衣机</a></li>
  55. <li><a href="http://www.bdjdw.com">滚筒洗衣机</a></li>
  56. </ul></div></div>
  57. <div style="height:5px;"></div>

  59. </div>
复制代码




其实也不复杂哈，再看css样式代码，这是关键：

  1. a{color:#000;text-decoration:none;font-size:13px;}
  2. /*商品分类树区域样式*/
  3. .category_tree{width:180px;border:1px solid #ccc}
  4. /*分类树标题样式*/
  5. .cat_tree_title{
  6. font-weight:normal;
  7. margin:1px;
  8. padding:0;
  9. padding-left:10px;
  10. font-size:13px;
  11. color:#ffffff;
  12. height:24px;
  13. line-height:24px;
  14. background:url(titlebg.png) repeat-x left bottom
  15. }

  17. .category_name a{font-size:14px;}
  18. /*主分类 默认样式*/
  19. .cat_title{
  20. padding-left: 10px;
  21. width:160px;
  22. height:27px;
  23. background:url(my_menubg.gif) no-repeat right top ;
  24. line-height:27px;
  25. font-weight:normal;
  26. font-color:#333333;
  27. }
  28. /*主分类 当鼠标指上去时样式*/
  29. .active_cat{
  30. z-index:99;
  31. background-position:0 -25px;
  32. cursor:pointer;
  33. }

  35. /*设定子类所在层的显示*/
  36. .active_cat .show_border{display:block;}

  38. .show_border{
  39. display:none;
  40. margin-top:-26px;
  41. cursor:auto;
  42. left:153px;
  43. position:absolute;
  44. width:200px;
  45. background:url(shadow_border.gif) no-repeat 0px 21px;
  46. background-color:#ffffff;
  47. border:1px solid #959595;
  48. border-left-width:0px;
  49. margin-bottom:3px
  50. }
  51. /*设定子类层的列表显示样式*/
  52. .show_border ul{
  53. list-style:none;
  54. margin:0;
  55. padding:0;
  56. margin-left:15px
  57. }
  58. .show_border ul li {
  59. list-style:none;
  60. padding-left:10px;
  61. background-image:url(my_cat_sub_menu_dot.gif);
  62. background-repeat:no-repeat;
  63. background-position:0px 8px;
  64. float:left;
  65. width:75px;
  66. height:26px;
  67. overflow:hidden;
  68. letter-spacing:0px;
  69. }
  70. .show_border ul li a:hover{color:#FF9B6A;text-decoration:underline;}
复制代码




多吗？不多！看着多，其实是重复的多，可以把重复的都去掉，先看一个：
  1. <div class="cat_title" onmouseover="this.className='cat_title active_cat'" onmouseout="this.className='cat_title'">
  2. <div class="category_name"><a href="http://www.bdjdw.com">空调</a></div>

  4. <div class="show_border">
  5. <ul>
  6. <li><a href="http://www.bdjdw.com">立柜式</a></li>
  7. <li><a href="http://www.bdjdw.com">壁挂式</a></li>
  8. <li><a href="http://www.bdjdw.com">嵌入式</a></li>
  9. </ul></div>
  10. </div>
复制代码


这样一来，可以说的就没多少了！关键是子类所在层（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兼容这东西太麻烦了，还是交给高手去做吧