实例：侧边导航栏
技术栈：HTML+CSS
字体图标库：font-awesome
效果：
源码：
【html】
<!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">
<link rel="stylesheet" href="../css/59.css">
</head>
<body>
<nav>
<ul class="menus">
<li class="li">
<i class="fa fa-th-large" aria-hidden="true"></i>
基础组件
<ul>
<li>Button 按钮</li>
<li>Cell 单元格</li>
<li>Icon 图标</li>
<li>Image 图片</li>
<li>Layout 布局</li>
<li>Popup 弹出层</li>
<li>Toast 轻提示</li>
</ul>
</li>
<li class="li">
<i class="fa fa-check-square" aria-hidden="true"></i>
表单组件
<ul>
<li>Calendar 日历</li>
<li>Cascader 级联选择</li>
<li>Checkbox 复选框</li>
<li>Field 输入框</li>
<li>Picker 选择器</li>
<li>Radio 单选框</li>
<li>Rate 评分</li>
<li>Slider 滑块</li>
<li>Stepper 步进器</li>
<li>Switch 开关</li>
</ul>
</li>
<li class="li">
<i class="fa fa-comment" aria-hidden="true"></i>
反馈组件
<ul>
<li>Dialog 弹出框</li>
<li>Loading 加载</li>
<li>Notify 消息通知</li>
<li>Overlay 遮罩层</li>
</ul>
</li>
<li class="li">
<i class="fa fa-tags" aria-hidden="true"></i>
展示组件
<ul>
<li>Badge 徽标</li>
<li>Circle 环形进度条</li>
<li>Collapse 折叠面板</li>
<li>CountDown 倒计时</li>
<li>List 列表</li>
<li>NoticeBar 通知栏</li>
<li>Progress 进度条</li>
<li>Steps 步骤条</li>
<li>Tag 标签</li>
</ul>
</li>
<li class="li">
<i class="fa fa-bars" aria-hidden="true"></i>
导航组件
<ul>
<li>Grid 宫格</li>
<li>IndexBar 索引栏</li>
<li>NavBar 导航栏</li>
<li>Pagination 分页</li>
<li>Sidebar 侧边导航</li>
<li>Tab 标签页</li>
<li>Tabbar 标签栏</li>
<li>TreeSelect 分类选择</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
【css】
*{
/* 初始化 */
margin: 0;
padding: 0;
}
body{
/* 100%窗口高度 */
height: 100vh;
/* 弹性布局 居中 */
display: flex;
justify-content: center;
align-items: center;
/* background-color: #d3dafa; */
background-color: #E2C8DB;
}
ul{
list-style: none;
}
nav{
/* 固定定位 */
position: fixed;
width: 300px;
height: 650px;
/* background-color: #8a98c9; */
background-color: #C584B3;
}
.menus{
margin: 50px 0;
color: #fff;
}
.li{
letter-spacing: 2px;
font-size: 17px;
font-weight: 600;
padding: 16px 0;
/* 动画过渡 */
transition: 0.3s;
}
/* .li::after{
content: "";
position: absolute;
left: 18px;
margin-top: -20px;
display: block;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
} */
.menus li:hover{
/* background-color: #beb5df; */
background-color: #D2A6C6;
}
.li .fa{
font-size: 20px;
width: 50px;
height: 20px;
text-align: center;
margin-left: 5px;
}
.li ul{
width: 0;
height: 550px;
padding: 50px 0;
/* 绝对定位 */
position: absolute;
top: 0;
right: 0;
overflow: hidden;
/* background-color: #59699b; */
background-color: #a06993;
transition: 0.3s;
}
.li ul li{
padding: 16px 24px;
/* 文字禁止换行 */
white-space: nowrap;
transition: 0.3s;
}
.li:hover ul{
width: 250px;
}
.li ul li:hover{
/* background-color: #828eb9; */
background-color: #c28fb4;
}
