簡單二級菜單實現
看了公開課視頻，挺基礎的，但一節課看下來，還是能發下自己的知識點的不足，學習浮躁的狀態
主要知識點
- 背景圖片定位
- 行內元素控制
- fixed, relative, absolute的差別使用
值得注意的內容
<a href="#">1</a><a href="#">1</a><a href="#">1</a><a href="#">1</a><a href="#">1</a>與
<a href="#">1</a>
<a href="#">1</a>
<a href="#">1</a>
<a href="#">1</a>
<a href="#">1</a>在顯示上存在着差異，是之前一直沒有注意過的
效果圖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二級菜單</title>
<meta name="keyword" content="">
<meta name="description">
<style>
* {
margin: 0;
padding: 0;
}
body {
user-select: none;
}
.menu {
width: 280px;
height: 500px;
background: #fff;
border: 1px solid #49A3DF;
margin-top: 70px;
margin-left: 50px;
}
.menu .title {
width: 280px;
height: 50px;
background: #49A3DF;
color: #fff;
text-align: center;
line-height: 50px;
}
.menu ul li {
list-style: none;
height: 40px;
border-bottom: 1px dotted #ddd;
line-height: 40px;
text-indent: 10px;
background: url('../images/ts.png') no-repeat;
background-position: 260px center;
position: relative;
}
.menu ul li a {
color: #666;
text-decoration: none;
margin-right: 10px;
}
.menu ul li .top {
width: 280px;
height: 1px;
position: absolute;
background: #49A3DF;
top: -1px;
left: 0;
display: none;
}
.menu ul li .bottom {
width: 280px;
height: 1px;
position: absolute;
background: #49A3DF;
top: 41px;
left: 0;
display: none;
}
.menu ul li .right {
width: 1px;
height: 40px;
position: absolute;
background: #fff;
top: 0px;
right: -1px;
display: none;
}
.menu ul li .nav {
width: 259px;
height: 251px;
border: 1px solid #49A3DF;
position: absolute;
background: #fff;
top: -1px;
right: -261px;
display: none;
}
</style>
</head>
<body>
<div class="menu">
<div class="title">全部商品</div>
<ul>
<li>
<a href="#">上衣</a><a href="#">呢大衣</a><a href="#">衛衣</a><a href="#">針織衫</a><a href="#">套衫</a>
<div class="top"></div>
<div class="bottom"></div>
<div class="nav"><img src="images/xq.png" alt=""></div>
<div class="right"></div>
</li>
<li>
<a href="#">上衣</a><a href="#">呢大衣</a><a href="#">衛衣</a><a href="#">針織衫</a><a href="#">套衫</a>
<div class="top"></div>
<div class="bottom"></div>
<div class="nav"><img src="images/xq.png" alt=""></div>
<div class="right"></div>
</li>
<li>
<a href="#">上衣</a><a href="#">呢大衣</a><a href="#">衛衣</a><a href="#">針織衫</a><a href="#">套衫</a>
<div class="top"></div>
<div class="bottom"></div>
<div class="nav"><img src="images/xq.png" alt=""></div>
<div class="right"></div>
</li>
<li>
<a href="#">上衣</a><a href="#">呢大衣</a><a href="#">衛衣</a><a href="#">針織衫</a><a href="#">套衫</a>
<div class="top"></div>
<div class="bottom"></div>
<div class="nav"><img src="images/xq.png" alt=""></div>
<div class="right"></div>
</li>
<li>
<a href="#">上衣</a><a href="#">呢大衣</a><a href="#">衛衣</a><a href="#">針織衫</a><a href="#">套衫</a>
<div class="top"></div>
<div class="bottom"></div>
<div class="nav"><img src="images/xq.png" alt=""></div>
<div class="right"></div>
</li>
<li>
<a href="#">上衣</a><a href="#">呢大衣</a><a href="#">衛衣</a><a href="#">針織衫</a><a href="#">套衫</a>
<div class="top"></div>
<div class="bottom"></div>
<div class="nav"><img src="images/xq.png" alt=""></div>
<div class="right"></div>
</li>
<li>
<a href="#">上衣</a><a href="#">呢大衣</a><a href="#">衛衣</a><a href="#">針織衫</a><a href="#">套衫</a>
<div class="top"></div>
<div class="bottom"></div>
<div class="nav"><img src="images/xq.png" alt=""></div>
<div class="right"></div>
</li>
<li>
<a href="#">上衣</a><a href="#">呢大衣</a><a href="#">衛衣</a><a href="#">針織衫</a><a href="#">套衫</a>
<div class="top"></div>
<div class="bottom"></div>
<div class="nav"><img src="images/xq.png" alt=""></div>
<div class="right"></div>
</li>
<li>
<a href="#">上衣</a><a href="#">呢大衣</a><a href="#">衛衣</a><a href="#">針織衫</a><a href="#">套衫</a>
<div class="top"></div>
<div class="bottom"></div>
<div class="nav"><img src="images/xq.png" alt=""></div>
<div class="right"></div>
</li>
<li>
<a href="#">上衣</a><a href="#">呢大衣</a><a href="#">衛衣</a><a href="#">針織衫</a><a href="#">套衫</a>
<div class="top"></div>
<div class="bottom"></div>
<div class="nav"><img src="images/xq.png" alt=""></div>
<div class="right"></div>
</li>
<li>
<a href="#">上衣</a><a href="#">呢大衣</a><a href="#">衛衣</a><a href="#">針織衫</a><a href="#">套衫</a>
<div class="top"></div>
<div class="bottom"></div>
<div class="nav"><img src="images/xq.png" alt=""></div>
<div class="right"></div>
</li>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</ul>
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$('.menu ul li').hover(function() {
$(this).find('div').show();
},function() {
$(this).find('div').hide();
});
</script>
</body>
</html>