CSS 边栏 sidebar 的制作
完整 HTML + CSS 在文章末尾
1. 考虑一个整体框架，页面由 sidebar 边栏和 main 主体内容组成
以下是 HTML 代码框架，分为两个 div，一个是 sidebar，一个是 main；
完整 HTML 在文章末尾
<div class="sidebar">
<ul>
<li>
<a href="#">
<i class="fa fa-users"></i>
<span>用户管理</span>
</a>
...
</li>
</ul>
</div>
<div class="main">
主体内容
</div>
2. 定义 sidebar 的 CSS 样式
完整 CSS 样式在末尾（style.css），下面是分析，获取源码直接滚动到最后。
.sidebar {
position: fixed;
left: 0;
top: 0;
width: 60px;
height: 100%;
background-color: black;
transition: 0.3s;
}1. 使用 position: fixed，固定定位，不会随着滚动条滚动
2. width: 60px，为 icon 图标预留的宽度，即 sidebar 收缩时的最小宽度
3. transition: 0.3s，增加渐变效果，在 sidebar 伸缩时不会那么“生硬”
悬浮宽度展开，也就是从 60px 到 200px
.sidebar:hover {
width: 200px;
}
3. 修饰 sidebar 的每一个列表
.sidebar ul li {
position: relative;
width: 100%;
height: 60px;
list-style: none;
}1. position: relative，定位，此处只是为了显示增加一个定位，但没有设置 top 等偏移量，因此这里位置不会变化
2. width: 100%，宽度，继承自祖先元素
3. height: 60px，保持宽度一致为 60px
4. list-style: none，去除 <li>前面的小圆点
sidebar 列表 hover 增加背景
风格一：荧光棒
.sidebar ul li:hover {
background-color: #06EB00;
box-shadow: 0 0 20px 20px #06EB00;
}
风格二：纯色
.sidebar ul li:hover {
background-color: #06EB00;
}如果有更好的方式，可以自定义风格
每个列表主要是由一个 <a> 标签组成，<a> 标签下有 <i> 和 <span>
.sidebar ul li a {
position: relative;
display: block;
width: 100%;
height: 60px;
overflow: hidden;
color: yellowgreen;
text-decoration: none;
white-space: nowrap;
}1. display: block，变成块元素，设置宽高。
2. overflow: hidden，过渡过程中，隐藏文字。
2. color: white，文字默认颜色
3. text-decoration: none，去除 <a> 标签的文字修饰。
4. white-space: nowrap; 不换行
如果不设置 overflow: hidden，则会看到如下画面
如果不设置 white-space: nowrap，则会在 sidebar 伸缩时看到如下过渡
为 <a> 标签下的 <i> 标签增加样式
.sidebar ul li a i {
position: absolute;
left: 0;
top: 0;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
}1. position: absolute，绝对布局，设置宽高。宽高均为 60px
2. line-height: 60px，保持与 height 一致，图标垂直居中。
3. text-align: center，图标水平居中。
为 <a> 标签下的 <span> 增加样式
.sidebar ul li a span {
position: absolute;
left: 60px;
top: 0;
right: 0;
height: 60px;
line-height: 60px;
text-align: start;
}1. position: absolute，绝对布局，左偏移 60px，右偏移 0，宽度自动占据剩余
2. line-height: 60px，与高度一致，文字垂直居中
3. text-align: start，文字左对齐
4. 定义 main 的样式
.main {
position: absolute;
left: 60px;
top: 0;
right: 0;
transition: 0.3s;
}
.main.active {
left: 200px;
}.main
1. position: absolute，绝对布局，默认 left: 60px，right: 0，宽度占据剩余
2. transition: 0.3s，附带过渡效果，防止“生硬”
.main.active
1. 当 .main 同时具有 .active 时，left: 60px 变为 left: 200px，即展开 sidebar，后面通过 JS 控制是否携带 active 样式
5. 使用 JS 控制 sidebar 的伸缩
给 sidebar 添加 onmouseover 和 onmouseout 事件
<div class="sidebar" onmouseover="toggle()" onmouseout="toggle()">事件定义如下：
function toggle() {
document.querySelector(".sidebar").classList.toggle("active");
document.querySelector(".main").classList.toggle("active");
}classList.toggle() 函数可以切换元素是否携带 class
HTML 代码
<!DOCTYPE HTML>
<html>
<head>
<title>sidebar</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="sidebar" onmouseover="toggle()" onmouseout="toggle()">
<ul>
<li>
<a href="#">
<i class="fa fa-users"></i>
<span>用户管理</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-folder-open"></i>
<span>文件管理</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-music"></i>
<span>音频管理</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-youtube-play"></i>
<span>视频管理</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-sitemap"></i>
<span>架构管理</span>
</a>
</li>
</ul>
</div>
<div class="main">
填充文字
</div>
<script>
function toggle() {
document.querySelector(".sidebar").classList.toggle("active");
document.querySelector(".main").classList.toggle("active");
}
</script>
</body>
</html>
CSS 代码
html, body, ul, li, a {
margin: 0;
padding: 0;
}
.sidebar {
position: fixed;
left: 0;
top: 0;
width: 60px;
height: 100%;
background-color: black;
transition: 0.3s;
}
.sidebar:hover {
width: 200px;
}
.sidebar ul li {
position: relative;
width: 100%;
height: 60px;
list-style: none;
}
.sidebar ul li:hover {
background-color: #06EB00;
}
.sidebar ul li a {
position: relative;
display: block;
width: 100%;
height: 60px;
overflow: hidden;
color: yellowgreen;
text-decoration: none;
white-space: nowrap;
}
.sidebar ul li a i {
position: absolute;
left: 0;
top: 0;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
}
.sidebar ul li a span {
position: absolute;
left: 60px;
top: 0;
right: 0;
height: 60px;
line-height: 60px;
text-align: start;
}
.main {
position: absolute;
left: 60px;
top: 0;
right: 0;
transition: 0.3s;
}
.main.active {
left: 200px;
}
本文地址：https://blog.csdn.net/qq_39291919/article/details/112438827
上一篇： Git合并分支的流程步骤