【前端经典】隐藏的侧边导航栏,侧边导航条,css实现弹出导航栏,网页
ctrl+alt+方向键,同时控制多行内容更改
难点:
解决块状显示时,圆角也变成块状,形状改变:nav标签添加overflow: hidden;
当点击按钮时,右侧弹出,需要label与动作响应标签(此例中nav)是同级元素且为下一个元素
最终效果:
源代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 初始化样式 */
*{
margin: 0;;
padding: 0;
text-decoration: none;
list-style: none;
}
.nav{
width: 150px;
height: 400px;
background-color: orange;
/* 固定定位 */
position: fixed;
/* 定位后的位置,先把导航栏隐藏起来*/
right: -150px;
border-radius: 12px 0 0 12px;
/* 把导航栏隐藏起来 */
overflow: hidden;
/* 让点击有个过渡,效果是从右平滑进入*/
transition: 0.5s;
}
/* 点击=*/
#cb:checked ~ .nav{
right: 0px;
}
.nav li{
width: 150px;
height: 40px;
/* 水平垂直居中 */
text-align: center;
line-height: 40px;
}
.nav a:hover{
background-color: #fc0;
}
.nav a{
color: #000;
display: block;
}
#cb{
display: none;
}
label{
width: 40px;
height: 40px;
background-color: orange;
border-radius: 12px;
display: inline-block;
color: #fff;
font-size: 40px;
text-align: center;
line-height: 40px;
/* 绝对定位 */
position: fixed;
right: 150px;
cursor: pointer;
}
</style>
</head>
<body>
<!-- 弹出的按钮要两个标签来配合实现 -->
<input type="checkbox" id="cb">
<label for="cb">≡</label>
<div class="nav">
<ul>
<li><a href="#">我是菜单项</a></li>
<li><a href="#">我是菜单项</a></li>
<li><a href="#">我是菜单项</a></li>
<li><a href="#">我是菜单项</a></li>
<li><a href="#">我是菜单项</a></li>
</ul>
</div>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
<p>我是换行</p>
</body>
</html>