Side navigation bar (drawer design) interface (html + css)

write in front

Hello~ Hello everyone, this article brings a side navigation bar (drawer design), which is implemented by (html + css), and the editor is WebStorm. Let's see the effect next.

 

Effect 

First of all, we need to import Ali's icon style file (how to use this blog written by the big guy ), import the icon style and font style into the project, and create a new css style file.

import

    <link rel="stylesheet" href="css/css1.css" type="text/css">
    <link rel="stylesheet" href="css/css2.css" type="text/css">

First set all the margins and common global variables (for color matching problems, you can refer to this color matching website , or you can download the .chm file. I put the .chm file link below)

 

*{
    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;
}

 Write the basic framework first

	<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>

Then write these class tags in the css style file

.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);
}

Then here is a detail: we have to redefine the input type as checkbox, otherwise it will be like this

 

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

Then change the label of html to:

<label for="menu-btn"><i class="iconfont icon-page_returns"></i></label>

 Then write "Home" and "List 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 writes:

/*
    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);
}

Open the web page, then list 1 is implemented, the same reason, copy and paste, and then modify the text

 

 

Finally, the setting is left, and the html and css are written:

                <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);
}

Click to run, it's ok

.chm link

Link: https://pan.baidu.com/s/1rPz854DX_FQc3-ifZt_uEQ 
Extraction code: 07js

(Seeking attention)