侧边导航栏（抽屉式设计）界面 (html + css)

写在前面

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

效果

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

导入

    <link rel="stylesheet" href="css/css1.css" type="text/css"><link rel="stylesheet" href="css/css2.css" type="text/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;
}

先写入基本框架

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

然后在 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 改为：

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

再则写入 “首页” 与 “列表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 写入：

/*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 ，原理都一样，这里不就一一显示了

点击运行，就 ok 了

.chm 链接

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

源码见链接

侧边导航栏（抽屉式设计）界面 (html + css)相关推荐

ldaptemplate 分页_UI设计干货分享：设计语言 - 侧边导航栏/分页
原文作者:罗耀_UI 侧边导航栏.分页.步骤条的绘制方法不管是做设计(感性)还是设计规范(理性),都是仁者见仁智者见智的,都很主观.我是想阐述出自己的想法供大家参考,文章中的数值也不是固定标准,还是 ...
直播app开发搭建，纯css/html实现侧边导航栏
直播app开发搭建,纯css/html实现侧边导航栏 css代码: *{margin: 0px;padding: 0px;}#box{position: absolute;height: 300px; ...
【HTML+CSS】页内侧边导航栏页内导航
页内侧边导航栏页内导航源码 HTML部分 CSS部分效果源码 HTML部分 <!DOCTYPE html> <html><head><meta cha ...
js实现，点击侧边导航栏，可以平缓的跳到界面指定位置，同时当界面某个元素在浏览器可视范围的时候，相应的导航栏也显示相应的样式
注:要下载安装好jquery和element-ui "element-ui": "^2.15.8" "jquery": "^3.6 ...
【源码分享】jquery+css实现侧边导航栏
jquery+css实现侧边导航栏最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...
css中侧边导航栏怎么隐藏,CSS3手机侧边导航栏滑动隐藏特效
[温馨提示]源码包解压密码:www.youhutong.com 效果图: 描述说明: 共4种CSS3手机侧边导航栏滑动隐藏特效 1.默认的点击滑动侧边栏菜单效果. 2.带3D transforms的滑 ...
layui隐藏侧边栏_layui禁用侧边导航栏点击事件的处理方法
layui是一款优秀的前端模块化css框架.我用layui做过两个完整的项目,对她的感觉就是,这货非常适合做后台管理界面,且基于jquery,很容易上手.当然,她最大的优点我觉得还是她的模块化方式,相 ...
【机器学习实践】Jupyter Notebook安装侧边导航栏功能操作及其他常用扩展功能介绍...
安装过程: 1. 首先我们引入jupyter_contrib_nbextension这个第三方库. 2. 在Anaconda Promot中输入命令: pip install jupyter_con ...
html中关于侧边导航栏和导航栏的编写
侧边导航栏 <style>.box{width: 50px;height: 50px;background-color: #483957;transition: width .5s,bac ...

侧边导航栏（抽屉式设计）界面 (html + css)

写在前面

效果

导入

侧边导航栏（抽屉式设计）界面 (html + css)相关推荐

最新文章

热门文章