[聚合文章] 用jquery插件写一个小米官网左侧二级菜单

  1. 首页
  2. 聚合文章
  3. 文章详情
jQuery 2017-12-19 14 阅读
原文链接: http://www.jianshu.com/p/026388ad750d
1.gif

知识点：静态布局思路，jquery动态布局，代码格式规范，jquery插件调用， 鼠标滑动二级菜单构建。
前两天写了一个美丽说的左侧二级菜单，有的小伙伴就说能不能写一个带图片的二级菜单呢？所以今天就写一个小米官网的左侧二级菜单分享给大家。

源码：
<!doctype html>
<html>
<head>

<meta charset="UTF-8">

<meta name="Keywords" content="">
<meta name="Description" content="">
<title>小米导航</title>
<style type="text/css">
/CSS层叠样式列表 美化 工厂/
{margin:0px;padding:0px;
font-family:"微软雅黑";}/通配符 1.统一所有元素的默认样式 2.不同浏览器之间的兼容性问题/
li{list-style:none;/去列表圆点/}
body{background:#434343;}
a{text-decoration:none;/去下划线/}
#Tz_banner{
width:237px;/px 像素 宽度/
height:458px;/高/
background:#333;/背景/
margin:130px 0px 0px 54px;/ 上 右 下 左 顺时针/
position:relative;/相对定位 参照物/
}
#Tz_banner .firstLi{
width:237px;
height:42px;
cursor:pointer;/鼠标样式/
font-size:14px;/字体大小/
text-indent:20px;/首行缩进/
line-height:42px;/行高/
color:#fff;/字体颜色/
}
#Tz_banner .firstLi:hover{background:#ff9900;}/鼠标划过后的样式/
#Tz_banner .firstLi .info{
height:458px;
background:#fff;
padding-left:10px;
position:absolute;/绝对定位 改变位置的盒子/
left:237px;
top:0px;
display:none;
}
#Tz_banner .firstLi .info li{
width:248px;
height:77px;
text-indent:0px;
margin-right:15px;
position:absolute;
}
#Tz_banner .firstLi .info li a.title{
height:77px;
display:block;/变成块级元素/
float:left;
line-height:77px;
left:0px;
top:0px;
}
#Tz_banner .firstLi .info li a.title img{
margin:16.5px 15px 0px 15px;
float:left;
}
#Tz_banner .firstLi .info li a.title span{
float:left;
height:77px;
line-height:77px;color:#222;
}
#Tz_banner .firstLi .info li a.buy{
width:60px;
display:block;
float:right;
margin-top:25px;
border:1px solid #f60;/边框 粗细 样式 颜色/
line-height:24px;
text-align:center;/文字居中*/
color:#f60;
}
#Tz_banner .firstLi .info li a.buy:hover{
background:#f60;
color:#fff;
}
</style>
</head>
<body>
<div id="Tz_banner">
<ul>
<li class="firstLi">手机 电话卡
<div class="info">
<ul>
<li><a class="title" href="#"><img src="images/1/1.jpg"><span>小米Note2</span></a><a
class="buy" href="#">选购</a></li>
<li><a class="title" href="#"><img src="images/1/2.jpg"><span>小米Note2</span></a><a class="buy" href="#">选购</a></li>
<li><a class="title" href="#"><img src="images/1/3.jpg"><span>小米Note2</span></a><a class="buy" href="#">选购</a></li>
<li><a class="title" href="#"><img src="images/1/4.jpg"><span>小米Note2</span></a><a class="buy" href="#">选购</a></li>
<li><a class="title" href="#"><img src="images/1/5.jpg"><span>小米Note2</span></a><a class="buy" href="#">选购</a></li>
<li><a class="title" href="#"><img src="images/1/6.jpg"><span>小米Note2</span></a><a class="buy" href="#">选购</a></li>
<li><a class="title" href="#"><img src="images/1/7.jpg"><span>小米Note2</span></a><a class="buy" href="#">选购</a></li>
<li><a class="title" href="#"><img src="images/1/8.jpg"><span>小米Note2</span></a><a class="buy" href="#">选购</a></li>
<li><a class="title" href="#"><img src="images/1/9.jpg"><span>小米Note2</span></a><a class="buy" href="#">选购</a></li>
<li><a class="title" href="#"><img src="images/1/10.jpg"><span>小米Note2</span></a><a class="buy" href="#">选购</a></li>
<li><a class="title" href="#"><img src="images/1/11.jpg"><span>小米Note2</span></a><a class="buy" href="#">选购</a></li>
<li><a class="title" href="#"><img src="images/1/12.jpg"><span>小米Note2</span></a><a class="buy" href="#">选购</a></li>
<li><a class="title" href="#"><img src="images/1/13.jpg"><span>小米Note2</span></a><a class="buy" href="#">选购</a></li>
<li><a class="title" href="#"><img src="images/1/16.jpg"><span>小米Note2</span></a><a class="buy" href="#">选购</a></li>
<li><a class="title" href="#"><img src="images/1/14.jpg"><span>小米Note2</span></a><a class="buy" href="#">选购</a></li>
<li><a class="title" href="#"><img src="images/1/15.jpg"><span>小米Note2</span></a><a class="buy" href="#">选购</a></li>
</ul>
</div>
</li>
<li class="firstLi">笔记本 平板
<div class="info">
<ul>
<li><a class="title" href="#"><img src="images/1/15.jpg"><span>小米Note2</span></a><a class="buy" href="#">选购</a></li>
<li><a class="title" href="#"><img src="images/1/15.jpg"><span>小米Note2</span></a><a class="buy" href="#">选购</a></li>
<li><a class="title" href="#"><img src="images/1/15.jpg"><span>小米Note2</span></a><a class="buy" href="#">选购</a></li>
<li><a class="title" href="#"><img src="images/1/15.jpg"><span>小米Note2</span></a><a class="buy" href="#">选购</a></li>
</ul>
</div>
</li>
<li class="firstLi">电视 盒子

            </li>            <li class="firstLi">路由器                            </li>            <li class="firstLi">手机 电话卡                            </li>            <li class="firstLi">笔记本 平板                            </li>            <li class="firstLi">电视 盒子                            </li>            <li class="firstLi">手机 电话卡                            </li>            <li class="firstLi">电视 盒子                            </li>            <li class="firstLi">耳机                            </li>        </ul>    </div></body><script type="text/javascript" src="js/jquery-1.11.1.min.js"></script><script type="text/javascript">$("#Tz_banner .firstLi .info").each(function(){    var $li = $(this).find("li");//获取到所有info下面的li    var length =$li.length;//得到info下面所有li的数量    var width = $li.width();//获取li的宽度    var height = $li.height();//获取li的高度    var col = Math.ceil(length/6);//向上取整    $(this).width(col*width);    $li.each(function(i){        var x = Math.floor(i/6);//向下取整        var y = i%6;//取余数        $(this).css({            left:x*width + "px",            top:y*height + "px"        });    });});$("#Tz_banner .firstLi").hover(function(){    $(this).find(".info").show();},function(){    $(this).find(".info").hide();});</script>

</html>

web前端学习群：482300337，分享源码、视频、企业级案例、最新知识点，欢迎初学者和在进阶中的小伙伴。
关注公众号→‘学习web前端’跟大佬一起学前端！

注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。