HTML+CSS实现隐藏式侧边栏菜单！！附源码！!

yycvip · 发表于 7 天前

效果展示：

完整源码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>隐藏式侧边栏菜单</title>
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
*{
/* 初始化 */
margin: 0;
padding: 0;
}
body{
/* 100%窗口高度 */
height: 100vh;
background-color: rgb(138, 130, 137);
}
.container{
width: 30px;/* 设置左边显示（鼠标为选中时状态的宽度）*/
height: 600px;/* 设置左边显示（鼠标为选中时状态的高度）*/
/* 绝对固定定位 */
position: fixed;
left: 0px;
/* 垂直居中 */
top: 20%;
/* transform: translateY(-50%); */
background-color: #222;
/* 右上右下圆角 */
border-radius: 0 15px 15px 0;
overflow: hidden;/* 溢出隐藏 */
/* 动画过渡 */
transition: 0.3s;
}
.container:hover{
/* 鼠标移入，展开+改变圆角大小 */
width: 130px;
border-radius: 0 50px 50px 0;
}
.container:hover li a{
/* 鼠标移入，改变字体颜色 */
color: rgb(255, 255, 255);
}
/* 添加左侧橙色条状 */
.container::before{
content: "";
width: 50%;/*鼠标悬停时显示左侧橙色条宽度*/
height: 100%;/*鼠标悬停时显示左侧橙色条高度*/
position: absolute;/*绝对定位*/
top: 0px;
left: 0px;
z-index: -1;/* 将z轴设置为-1不让其遮挡图标*/
background-color: rgb(255, 136, 0);
}
/* 设置上方快 */
.container .top{
width: calc(100% - 30px);/* 动态设置宽度：宽度比100%的宽度少30px。*/
margin-left: 30px;/*左外间距设为30px与上面的.container{}中的width一致*/
height: 20%;/*鼠标悬停时从20%开始计算（也就是第一个块）*/
background-color: #222;/*设置跟着块的上方的块颜色*/
border-radius: 0 0 0 20px;/*设置上方的黑块的左下角的弧度*/
/* 动画过渡 */
transition: 0.2s;
}
/* 这只中间快 */
.container .middle{
width: calc(100% - 60px);
height: 10%;/*每次鼠标悬停时选中的部分为10%（也就是一个橙色的块）*/
background-color: rgb(255, 136, 0);/*设置中间选择时的快的背景色*/
margin-left: 30px;/*左外间距设为30px与上面的.container{}中的width一致*/
border-radius: 20px;/*设置边角弧度*/
}
/* 设置下方块原理上上方快一样*/
.container .bottom{
width: calc(100% - 30px);
height: 100%;
margin-left: 30px;
background-color: #222;
border-radius: 20px 0 0 0;
}
.container li{
/* 绝对定位 */
position: absolute;
/* 通过var函数调用自定义属性--lqj */
top: var(--lqj);
width: 100%;
height: 10%;
font-size: 30px;
/* 弹性布局水平垂直居中 */
display: flex;
justify-content: center;
align-items: center;
}
.container li a{
/* 字体颜色透明 */
color: transparent;
/* 动画过渡 */
transition: 0.3s;
}
/* 分别为每一个li元素设置.top的高度 */
/* ~是兄弟选择器 */
.container li:nth-child(1):hover ~ .top{
height: 20%;
}
.container li:nth-child(2):hover ~ .top{
height: 30%;
}
.container li:nth-child(3):hover ~ .top{
height: 40%;
}
.container li:nth-child(4):hover ~ .top{
height: 50%;
}
.container li:nth-child(5):hover ~ .top{
height: 60%;
}
.container li:nth-child(6):hover ~ .top{
height: 70%;
}
</style>
</head>
<body>
<div class="container">
<li style="--lqj:20%;">
<a href="#">
<i class="fa fa-home" aria-hidden="false"></i>
</a>
</li>
<li style="--lqj:30%;">
<a href="#">
<i class="fa fa-th-large" aria-hidden="true"></i>
</a>
</li>
<li style="--lqj:40%;">
<a href="#">
<i class="fa fa-shopping-bag" aria-hidden="true"></i>
</a>
</li>
<li style="--lqj:50%;">
<a href="#">
<i class="fa fa-user" aria-hidden="true"></i>
</a>
</li>
<li style="--lqj:60%;">
<a href="#">
<i class="fa fa-cog" aria-hidden="true"></i>
</a>
</li>
<li style="--lqj:70%;">
<a href="#">
<i class="fa fa-sign-out" aria-hidden="true"></i>
</a>
</li>
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
</body>
</html>

复制代码

		自动登录	找回密码
密码			立即注册