查看: 218|回复: 0

[DIV/CSS] 用jquery插件写一个小米官网左侧二级菜单

发表于 6 天前

用jquery插件写一个小米官网左侧二级菜单
知识点:静态布局思路,jquery动态布局,代码格式规范,jquery插件调用, 鼠标滑动二级菜单构建。

html代码

  1. <div id="Tz_banner">
  2. <ul>
  3. <li class="firstLi">手机 电话卡
  4. <div class="info">
  5. <ul>
  6. <li><a class="title" href="#"><img src="images/1/1.jpg"><span>小米Note2</span><!--没有任何意义的行内元素--></a><!--超链接--><a
  7. class="buy" href="#">选购</a></li>
  8. <li><a class="title" href="#"><img src="images/1/2.jpg"><span>小米Note2</span><!--没有任何意义的行内元素--></a><!--超链接--><a class="buy" href="#">选购</a></li>
  9. <li><a class="title" href="#"><img src="images/1/3.jpg"><span>小米Note2</span><!--没有任何意义的行内元素--></a><!--超链接--><a class="buy" href="#">选购</a></li>
  10. <li><a class="title" href="#"><img src="images/1/4.jpg"><span>小米Note2</span><!--没有任何意义的行内元素--></a><!--超链接--><a class="buy" href="#">选购</a></li>
  11. <li><a class="title" href="#"><img src="images/1/5.jpg"><span>小米Note2</span><!--没有任何意义的行内元素--></a><!--超链接--><a class="buy" href="#">选购</a></li>
  12. <li><a class="title" href="#"><img src="images/1/6.jpg"><span>小米Note2</span><!--没有任何意义的行内元素--></a><!--超链接--><a class="buy" href="#">选购</a></li>
  13. <li><a class="title" href="#"><img src="images/1/7.jpg"><span>小米Note2</span><!--没有任何意义的行内元素--></a><!--超链接--><a class="buy" href="#">选购</a></li>
  14. <li><a class="title" href="#"><img src="images/1/8.jpg"><span>小米Note2</span><!--没有任何意义的行内元素--></a><!--超链接--><a class="buy" href="#">选购</a></li>
  15. <li><a class="title" href="#"><img src="images/1/9.jpg"><span>小米Note2</span><!--没有任何意义的行内元素--></a><!--超链接--><a class="buy" href="#">选购</a></li>
  16. <li><a class="title" href="#"><img src="images/1/10.jpg"><span>小米Note2</span><!--没有任何意义的行内元素--></a><!--超链接--><a class="buy" href="#">选购</a></li>
  17. <li><a class="title" href="#"><img src="images/1/11.jpg"><span>小米Note2</span><!--没有任何意义的行内元素--></a><!--超链接--><a class="buy" href="#">选购</a></li>
  18. <li><a class="title" href="#"><img src="images/1/12.jpg"><span>小米Note2</span><!--没有任何意义的行内元素--></a><!--超链接--><a class="buy" href="#">选购</a></li>
  19. <li><a class="title" href="#"><img src="images/1/13.jpg"><span>小米Note2</span><!--没有任何意义的行内元素--></a><!--超链接--><a class="buy" href="#">选购</a></li>
  20. <li><a class="title" href="#"><img src="images/1/16.jpg"><span>小米Note2</span><!--没有任何意义的行内元素--></a><!--超链接--><a class="buy" href="#">选购</a></li>
  21. <li><a class="title" href="#"><img src="images/1/14.jpg"><span>小米Note2</span><!--没有任何意义的行内元素--></a><!--超链接--><a class="buy" href="#">选购</a></li>
  22. <li><a class="title" href="#"><img src="images/1/15.jpg"><span>小米Note2</span><!--没有任何意义的行内元素--></a><!--超链接--><a class="buy" href="#">选购</a></li>
  23. </ul>
  24. </div>
  25. </li>
  26. <li class="firstLi">笔记本 平板
  27. <div class="info">
  28. <ul>
  29. <li><a class="title" href="#"><img src="images/1/15.jpg"><span>小米Note2</span><!--没有任何意义的行内元素--></a><!--超链接--><a class="buy" href="#">选购</a></li>
  30. <li><a class="title" href="#"><img src="images/1/15.jpg"><span>小米Note2</span><!--没有任何意义的行内元素--></a><!--超链接--><a class="buy" href="#">选购</a></li>
  31. <li><a class="title" href="#"><img src="images/1/15.jpg"><span>小米Note2</span><!--没有任何意义的行内元素--></a><!--超链接--><a class="buy" href="#">选购</a></li>
  32. <li><a class="title" href="#"><img src="images/1/15.jpg"><span>小米Note2</span><!--没有任何意义的行内元素--></a><!--超链接--><a class="buy" href="#">选购</a></li>
  33. </ul>
  34. </div>
  35. </li>
  36. <li class="firstLi">电视 盒子
  37. </li>
  38. <li class="firstLi">路由器
  39. </li>
  40. <li class="firstLi">手机 电话卡
  41. </li>
  42. <li class="firstLi">笔记本 平板
  43. </li>
  44. <li class="firstLi">电视 盒子
  45. </li>
  46. <li class="firstLi">手机 电话卡
  47. </li>
  48. <li class="firstLi">电视 盒子
  49. </li>
  50. <li class="firstLi">耳机
  51. </li>
  52. </ul>
  53. </div>
复制代码

css代码

  1. <style type="text/css">
  2. /*CSS层叠样式列表 美化 工厂*/
  3. *{margin:0px;padding:0px;
  4. font-family:"微软雅黑";}/*通配符 1.统一所有元素的默认样式 2.不同浏览器之间的兼容性问题*/
  5. li{list-style:none;/*去列表圆点*/}
  6. body{background:#434343;}
  7. a{text-decoration:none;/*去下划线*/}
  8. #Tz_banner{
  9. width:237px;/*px 像素 宽度*/
  10. height:458px;/*高*/
  11. background:#333;/*背景*/
  12. margin:130px 0px 0px 54px;/* 上 右 下 左 顺时针*/
  13. position:relative;/*相对定位 参照物*/
  14. }
  15. #Tz_banner .firstLi{
  16. width:237px;
  17. height:42px;
  18. cursor:pointer;/*鼠标样式*/
  19. font-size:14px;/*字体大小*/
  20. text-indent:20px;/*首行缩进*/
  21. line-height:42px;/*行高*/
  22. color:#fff;/*字体颜色*/
  23. }
  24. #Tz_banner .firstLi:hover{background:#ff9900;}/*鼠标划过后的样式*/
  25. #Tz_banner .firstLi .info{
  26. height:458px;
  27. background:#fff;
  28. padding-left:10px;
  29. position:absolute;/*绝对定位 改变位置的盒子*/
  30. left:237px;
  31. top:0px;
  32. display:none;
  33. }
  34. #Tz_banner .firstLi .info li{
  35. width:248px;
  36. height:77px;
  37. text-indent:0px;
  38. margin-right:15px;
  39. position:absolute;
  40. }
  41. #Tz_banner .firstLi .info li a.title{
  42. height:77px;
  43. display:block;/*变成块级元素*/
  44. float:left;
  45. line-height:77px;
  46. left:0px;
  47. top:0px;
  48. }
  49. #Tz_banner .firstLi .info li a.title img{
  50. margin:16.5px 15px 0px 15px;
  51. float:left;
  52. }
  53. #Tz_banner .firstLi .info li a.title span{
  54. float:left;
  55. height:77px;
  56. line-height:77px;color:#222;
  57. }
  58. #Tz_banner .firstLi .info li a.buy{
  59. width:60px;
  60. display:block;
  61. float:right;
  62. margin-top:25px;
  63. border:1px solid #f60;/*边框 粗细 样式 颜色*/
  64. line-height:24px;
  65. text-align:center;/*文字居中*/
  66. color:#f60;
  67. }
  68. #Tz_banner .firstLi .info li a.buy:hover{
  69. background:#f60;
  70. color:#fff;
  71. }
  72. </style>
复制代码

javascript代码:

  1. <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
  2. <script type="text/javascript">
  3. $("#Tz_banner .firstLi .info").each(function(){
  4. var $li = $(this).find("li");//获取到所有info下面的li
  5. var length =$li.length;//得到info下面所有li的数量
  6. var width = $li.width();//获取li的宽度
  7. var height = $li.height();//获取li的高度
  8. var col = Math.ceil(length/6);//向上取整
  9. $(this).width(col*width);
  10. $li.each(function(i){
  11. var x = Math.floor(i/6);//向下取整
  12. var y = i%6;//取余数
  13. $(this).css({
  14. left:x*width + "px",
  15. top:y*height + "px"
  16. });
  17. });
  18. });
  19. $("#Tz_banner .firstLi").hover(function(){
  20. $(this).find(".info").show();
  21. },function(){
  22. $(this).find(".info").hide();
  23. });
  24. </script>
复制代码


回复

使用道具 举报