写在前面

哈喽~大家好，这篇呢带来的是侧边导航栏（抽屉式设计），采用 (html + css) 来实现的，编辑器是 WebStorm 。接下来来看看效果吧。

 

效果 

首先我们要导入阿里的图标样式文件（如何使用参考这篇大佬写的博客），将图标样式、字体样式导入到项目中，新建 css 样式文件。

导入

先设置全部的边距与常用的全局变量（配色问题的话可以参考这个配色网站，或者可以下载 .chm 文件，.chm 的文件链接我放在下面）

*{    margin: 0;    padding: 0;/*    全局设置为0内外边距*/}:root{    /*:root是指文档的根元素，在其中定义的变量可作为全局变量*/    /*可以理解为 c语言 在main函数，定义的全局变量*/    --color-menu-bg: #fff;    --font-color-mi: #fdb095;    --font-color-mi-hover: #7facd6;    --color-bg-mi-hover: #e8b7d4;    --border-radius-mi:2px;    --transition-menu-time: 0.2s;    --color-line-bg: #d3d3d3;    --color-zidingyi:#210440;}

 先写入 基本框架

然后在 css 样式文件写入这些类标记

.content{    background-color: #e7e7e7;    min-height: 100vh;}.menu-box{    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Sans', Arial, sans-serif;    letter-spacing: 0.5px;    /*设置字母之间的间距*/    font-weight: 600;    position: relative;    width: fit-content;    /* fit-content 作用: 根据内容自适应宽度 可以结合margin-auto 来实现居中*/    min-height: 100vh;    /*浏览器可见视口【高度】的百分比（1vh代表视窗【高度】的1%）*/    padding: 6px 12px;    box-sizing: border-box;    /*border-box是指将边框border和内边距padding在现有元素的宽度和高度内设置*/    /*background-color: var(--color-menu-bg);*/    background-color: var(--color-zidingyi);}.menu-box>input#menu-btn:checked+label>i{    transform: rotate(180deg);}/*A+B{}这个+是选择相邻兄弟，称作“相邻兄弟选择器”，如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器，例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：　　h1 + p {margin-top:50px;}　　这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。｝；*/.menu{    font-size: 18px;    width: 250px;    min-height: 100%;    cursor: pointer;    overflow: hidden;    transition: width var(--transition-menu-time);    color: var(--font-color-mi);}

然后这里有一个细节:我们在 input 的 type 为 checkbox 这里要重新定义，否则的话会这样

.menu-box input[type='checkbox'] {    display: none;    /*隐藏原生的多选框*/}

然后将 html 的 label 改为：

 再则写入 “首页” 与 “列表1” 

  
      
首页
  
  
                  列表1               
   列表1.a   列表1.b   列表1.c      
  

css 写入：

/*    A~B 选择前面有A元素的每个 B 元素，即选择 A 之后出现的所有 B，两种元素必须拥有相同的父元素，但 B 不必紧随 A。*/.menu-box > input#menu-btn:checked ~ .menu{    width: 0;}.menu-title{    text-align: center;    margin-bottom: 10px;}.menu-item>label{    position: relative;    display: flex;    width: 100%;    height: 50px;    border-radius: var(--border-radius-mi);    align-items: center;}.menu-item>label:hover{    color: var(--font-color-mi-hover);}.menu-item>label>i:first-child{    flex: none;    margin-right: 6px;    font-size: 24px;}.menu-item>label>span{    flex: 1;}.menu-item>label>i:last-child{    flex: none;    font-size: 20px;    font-weight: 900;    transform: rotate(0deg);    transition: transform var(--transition-menu-time);}.menu-item>input:checked+label>i:last-child{    transform: rotate(180deg);}.menu-content{    height: 0;    overflow: hidden;    /*清除浮动*/    transition: height var(--transition-menu-time);    display: flex;    /*规定弹性项目会在需要时换行。*/    flex-wrap: wrap;    background-color: var(--color-zidingyi);}

打开网页，这时实现了列表1，同样的道理，复制粘贴，然后修改文字

最后剩下了设置那一块了，写入 html 与 css ：

  
  
            设置        

.set-line {    margin: 20px 0 10px 0;    width: 100%;    height: 2px;    background-color: var(--color-line-bg);}

点击运行，就 ok 了

.chm 链接

链接：https://pan.baidu.com/s/1rPz854DX_FQc3-ifZt_uEQ 
提取码：07js

（求关注）