查看: 2579|回复: 0

[DIV/CSS] 用一些简易的标签写一个美丽说左侧二级菜单

发表于 2018-4-6 08:00:00

用一些简易的标签写一个美丽说左侧二级菜单
知识点:html标签(div,ul,a),css样式属性(浮动,定位),布局思想,js基础,逻辑思维。

html代码

  1. <div id="Menu">
  2. <h3>全部商品</h3>
  3. <ul>
  4. <li>
  5. <a href="#">上衣</a><a href="#" class="c">呢大衣</a><a href="#">卫衣</a>
  6. <a href="#">针织衫</a><a href="#">套装</a>
  7. <div class="nav"><img src="images/xq.png" /></div>
  8. <div class="t"></div>
  9. <div class="b"></div>
  10. <div class="r"></div>
  11. </li>
  12. <li><a href="#">裙子</a> <a href="#" >连衣裙</a><a href="#" class="c">秋冬新品</a><a href="#">衣裙</a><a href="#">套装</a>
  13. <div class="t"></div>
  14. <div class="b"></div>
  15. <div class="nav"><img src="images/xq.png" /></div>
  16. <div class="r"></div>
  17. </li>
  18. <li><a href="#">裤子</a> <a href="#">阔腿裤</a> <a href="#">九分裤</a> <a href="#" class="c">牛仔裤</a>
  19. <div class="t"></div>
  20. <div class="b"></div>
  21. <div class="nav"><img src="images/xq.png" /></div>
  22. <div class="r"></div>
  23. </li>
  24. <li><a href="#">鞋子</a> <a href="#">秋季新品</a> <a href="#" class="c">短靴</a> <a href="#">单鞋</a> <a href="#">小白鞋</a>
  25. <div class="t"></div>
  26. <div class="b"></div>
  27. <div class="nav"><img src="images/xq.png" /></div>
  28. <div class="r"></div>
  29. </li>
  30. <li><a href="#">上衣</a> <a href="#" class="c">呢大衣</a><a href="#">卫衣</a><a href="#">针织衫</a><a href="#">套装</a>
  31. <div class="t"></div>
  32. <div class="b"></div>
  33. <div class="nav"><img src="images/xq.png" /></div>
  34. <div class="r"></div>
  35. </li>
  36. <li><a href="#">裙子</a> <a href="#" >连衣裙</a><a href="#" class="c">秋冬新品</a><a href="#">衣裙</a><a href="#">套装</a>
  37. <div class="t"></div>
  38. <div class="b"></div>
  39. <div class="nav"><img src="images/xq.png" /></div>
  40. <div class="r"></div>
  41. </li>
  42. <li><a href="#">裤子</a> <a href="#">阔腿裤</a> <a href="#">九分裤</a> <a href="#" class="c">牛仔裤</a>
  43. <div class="t"></div>
  44. <div class="b"></div>
  45. <div class="nav"><img src="images/xq.png" /></div>
  46. <div class="r"></div>
  47. </li>
  48. <li><a href="#">鞋子</a> <a href="#">秋季新品</a> <a href="#" class="c">短靴</a> <a href="#">单鞋</a> <a href="#">小白鞋</a>
  49. <div class="t"></div>
  50. <div class="b"></div>
  51. <div class="nav"><img src="images/xq.png" /></div>
  52. <div class="r"></div>
  53. </li>
  54. <li><a href="#">上衣</a> <a href="#" class="c">呢大衣</a><a href="#">卫衣</a><a href="#">针织衫</a><a href="#">套装</a>
  55. <div class="t"></div>
  56. <div class="b"></div>
  57. <div class="nav"><img src="images/xq.png" /></div>
  58. <div class="r"></div>
  59. </li>
  60. <li><a href="#">裙子</a> <a href="#" >连衣裙</a><a href="#" class="c">秋冬新品</a><a href="#">衣裙</a><a href="#">套装</a></li>
  61. <li><a href="#">裤子</a> <a href="#">阔腿裤</a> <a href="#">九分裤</a> <a href="#" class="c">牛仔裤</a></li>
  62. </ul>
  63. </div>
复制代码

css代码

  1. <style type="text/css">
  2. *{margin:0px; padding:0px; list-style-type:none; }
  3. #Menu{width:285px;height:500px; border:1px solid #ff3366; margin:50px 0px 0px 100px; }
  4. #Menu h3{height:45px; background:#ff3366; color:#fff; text-align:center; line-height:45px;
  5. font-size:14px; font-weight:100;}
  6. #Menu ul{width:285px; margin:0px auto; }
  7. #Menu ul li{height:40px; line-height:40px; font-size:12px;
  8. border-bottom:1px dashed #ddd; background:url("images/ts.png") no-repeat 270px 15px; position:relative;}
  9. #Menu ul li a{color:#666; text-decoration:none; margin:0px 8px; font-family:"微软雅黑"; }
  10. #Menu ul li a:nth-of-type(1){font-size:14px;}
  11. #Menu ul li a.c{color:#ff3366;}
  12. #Menu ul li .t{width:285px; height:1px; background:#ff3366; position:absolute; left:0px; top:-1px; display:none;}
  13. #Menu ul li .b{width:285px; height:1px; background:#ff3366; position:absolute; left:0px; bottom:-1px;display:none;}
  14. #Menu ul li .r{width:1px;height:40px; background:#fff; position:absolute; right:-1px; top:0px;display:none;}
  15. #Menu ul li .nav{position:absolute; left:285px; /*height:300px; width:200px;*/
  16. top:-1px; border:1px solid #ff3366;display:none;}
  17. </style>
复制代码

javascript代码:

  1. <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
  2. <script type="text/javascript">
  3. var timer=null;
  4. $("#Menu ul li").mouseover(function(){
  5. $(this).find("div").show();
  6. });
  7. $("#Menu ul li").mouseout(function(){
  8. $("#Menu ul li").find("div").hide();
  9. });
  10. </script>
复制代码


回复

使用道具 举报