escribir delante
Hola ~ Hola a todos, este artículo trae una barra de navegación lateral (diseño de cajón), que está implementada por (html + css), y el editor es WebStorm. Veamos el efecto a continuación.
Efecto
En primer lugar, necesitamos importar el archivo de estilo de icono de Ali (cómo usar este blog escrito por el tipo grande ), importar el estilo de icono y el estilo de fuente al proyecto y crear un nuevo archivo de estilo css.
importar
<link rel="stylesheet" href="css/css1.css" type="text/css">
<link rel="stylesheet" href="css/css2.css" type="text/css">
Primero configure todos los márgenes y las variables globales comunes (para problemas de coincidencia de color, puede consultar este sitio web de coincidencia de color , o puede descargar el archivo .chm. Pongo el enlace del archivo .chm a continuación)
*{
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;
}
Escriba primero el marco básico
<div class="content">
<div class="menu-box">
<input type="checkbox" id="menu-btn">
<label for="menu-btn"><i></i></label>
<div class="menu">
</div>
</div>
</div>
Luego escriba estas etiquetas de clase en el archivo de estilo 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);
}
Entonces aquí hay un detalle: tenemos que redefinir el tipo de entrada como casilla de verificación, de lo contrario será así
.menu-box input[type='checkbox'] {
display: none;
/*隐藏原生的多选框*/
}
Luego cambie la etiqueta de html a:
<label for="menu-btn"><i class="iconfont icon-page_returns"></i></label>
Luego escribe "Inicio" y "Lista 1"
<div class="menu-title">
<h1>首页</h1>
</div>
<div class="menu-item">
<input type="checkbox" id="menu-item1">
<label for="menu-item1">
<i class="menu-item-icom iconfont icon-a-01-data_center"></i>
<span>列表1</span>
<i class="menu-item-last iconfont icon-down"></i>
</label>
<div class="menu-content">
<span>列表1.a</span>
<span>列表1.b</span>
<span>列表1.c</span>
</div>
</div>
css escribe:
/*
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);
}
Abra la página web, luego se implementa la lista 1, la misma razón, copie y pegue, y luego modifique el texto
Finalmente se deja el setting, y se escribe el html y css:
<div class="set-line"></div>
<div class="menu-item">
<label>
<i class="menu-item-icon iconfont icon-a-08-Setting"></i>
<span>设置</span>
</label>
</div>
.set-line {
margin: 20px 0 10px 0;
width: 100%;
height: 2px;
background-color: var(--color-line-bg);
}
Haga clic para ejecutar, está bien
enlace .chm
Enlace: https://pan.baidu.com/s/1rPz854DX_FQc3-ifZt_uEQ
Código de extracción: 07js
(Buscando atención)