The side navigation bar is very commonly used when we write. Many websites have side navigation bar applications, so how to make a side navigation bar?
Let's take a look at the side navigation bar of the Xiaomi Mall I made.
Look at the following code:
<body>
<div class="box3-1">
<ul>
<li>
<a href="#">手机</a>
<div class="Sidebar">
</div>
</li>
<li>
<a href="#">电脑</a>
<div class="Sidebar">
</div>
</li>
<li>
<a href="#">笔记本 平板</a>
<div class="Sidebar">
</div>
</li>
<li>
<a href="#">出行 穿戴</a>
<div class="Sidebar">
</div>
</li>
<li>
<a href="#">耳机 音箱</a>
<div class="Sidebar">
</div>
</li>
<li>
<a href="#">家电</a>
<div class="Sidebar">
</div>
</li>
<li>
<a href="#">智能 路由器</a>
<div class="Sidebar">
</div>
</li>
<li>
<a href="#">电源 配件</a>
<div class="Sidebar">
</div>
</li>
<li>
<a href="#">健康 儿童</a>
<div class="Sidebar">
</div>
</li>
<li>
<a href="#">生活 箱包</a>
<div class="Sidebar">
</div>
</li>
</ul>
</div>
</body>
The idea of our implementation is to make a list first, set the style of the list, and then complete the content we need in the list.
The knowledge points involved include positioning and formatting documents.
Let's take a look at the css code:
<style>
.box3-1 {
width: 234px;
height: 460px;
background-color: rgba(128, 128, 128, .5);
}
/* 制作列表大小和样式 */
.box3-1 ul {
height: 418px;
padding: 20px 0px;
position: relative;
border-right: 1px solid #6e6a6a;
}
.box3-1 li {
list-style: none;
padding: 0px 23px 0px 30px;
height: 42px;
line-height: 42px;
}
.box3-1 li>a {
text-decoration: none;
color: #ffffff;
font-size: 14px;
}
/* 鼠标移入是背景颜色改变 */
.box3-1 li:hover {
background-color: rgb(255, 103, 0);
}
/* 下拉框部分 */
.Sidebar {
position: absolute;
left: 236px;
top: 0px;
width: 994px;
height: 460px;
background-color: rgb(162, 79, 79);
box-shadow: 0px 0px 5px #b0b0b0;
/* 将元素隐藏 */
display: none;
}
/* 鼠标移入列表元素出现 */
.box3-1 li:hover .Sidebar {
display: block;
}
</style>The css code snippet is shown above
My idea is to write the drop-down box in the list, then position the drop-down box absolutely, and relative position ul, because I did not set relative positioning for li, then the reference of the drop-down box is the relatively positioned ul, and the drop-down box After the location is set, the mouse moves into the drop-down box to appear, and the mouse moves out of the drop-down box to disappear.
The knowledge point that needs attention here is the position positioning attribute. Absolute positioning at position:absolute. Generate top, left and other four attributes. Adjust the position through these four attributes, which are described in detail in the previous article, you can take a look.
See the above code for details
page element hidden
Ways to hide page elements:
1.display: none;
2. visibility: hidden; The visibility attribute specifies whether the element is visible. Visible and inheritable by default
3. opacity:0;
4. position:absolute;left:-10000px;
Take a look at the running effect:
This is a very simple exercise, but there are a lot of little knowledge points in it, you can try it.