小米二级菜单介绍
- 小米这个菜单栏跟别的二级还有所不同,她二级菜单是通栏的如果按照普通的写法肯定是写不出来的需要再此之上延申一个,就是需要控制二级菜单里通栏的哪个大盒子擦可以实现跟小米官网同样的效果我们先看效果图
- 效果就是这样子的具体原理最后将我把代码也发上来这个代码需要jQuery 需要你们自己引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;padding: 0;
}
.parent{
}
.top{
width: 1226px;
height: 80px;
background-color: #ff6700;
margin: 0 auto;
}
.bom{
background-color: #c48;
width: 100%;
display: none;
height: 80px;
}
.content{
background-color: #999999;
height: 100%;
width: 1226px;
margin: 0 auto;
}
ul{
}
li{
text-align: center;
padding: 0 5px;
display: inline-block;
line-height: 80px;
height: 100%;
}
</style>
</head>
<body>
<div class="parent">
<div class="top">
<ul class="ul">
<li>手机</li>
<li>飞机</li>
<li>乐色</li>
<span>456</span>
</ul>
</div>
<div class="bom">
<div class="content">
<ul class="ss" style="display: none">
<li>手机</li>
<li>飞机</li>
<li>乐色</li>
</ul>
<ul class="uls">
<li>第二个</li>
<li>第二个</li>
<li>第二个</li>
</ul>
</div>
</div>
</div>
</body>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.ul>li').mouseover(function(){
$('.uls').css("display", "block")
$('.bom').css("display", "block")
})
$('.content').mouseover(function () {
$('.uls').css("display", "block")
$('.bom').css("display", "block")
})
$('.ul>li').mouseout(function () {
$('.bom').css("display", "none")
})
$('.bom').mouseleave(function () {
$('.bom').css("display", "none")
})
})
</script>
</html>