HTML+CSS - 侧边导航栏

<body><div class="navbar"><input type="checkbox" name="" id="checkbox"><!--复选框的id属性值和label元素的for属性值必须是相同的,才能够通过点击label选中复选框--><label for="checkbox"><i class="fa fa-bars"></i></label><ul><li><img src="./img/1.jpg" alt=""><span>欢迎您！管理员</span></li><li><a href="#"><i class="fa fa-home"></i><span>后台首页</span></a></li><li><a href="#"><i class="fa fa-sitemap"></i><span>商品列表</span></a></li><li><a href="#"><i class="fa fa-user"></i><span>用户列表</span></a></li><li><a href="#"><i class="fa fa-shopping-cart"></i><span>订单列表</span></a></li><li><a href="#"><i class="fa fa-windows"></i><span>功能列表</span></a></li></ul></div>
</body>

/*页面初始化清除元素原有的内外边距*/
*{margin: 0;padding: 0;
}
body{overflow: hidden;
}
.navbar{position: relative;width: 100%;
}
.navbar input{display: none;
}
.navbar label{position: absolute;top: 0;left: 70px;/*宽度占浏览器可视区域的宽度*/width: 100%;height: 43px;padding-left: 20px;font-size: 30px;color: #5a738e;background-color: #ededed;border: 1px solid #d9dee4;cursor: pointer;transition: 0.5s;
}
.navbar ul{overflow: hidden;list-style: none;width: 70px;/*高度占浏览器可视区域的高度*/height: 100vh;background-color: #2a3f54;transition: 0.5s;
}
.navbar ul li{height: 70px;margin-bottom: 10px;
}
.navbar ul li:first-child{display: flex;justify-content: center;align-items: center;padding: 10px 0;
}
.navbar ul li:first-child img{width: 50px;border-radius: 50%;
}
.navbar ul li:first-child span{color: #fff;white-space: nowrap;display: none;
}
.navbar ul li a{display: flex;justify-content: center;align-items: center;flex-direction: column;color: #d1d1d1;text-decoration: none;width: 100%;height: 100%;
}
.navbar ul li a i{font-size: 25px;margin-bottom: 10px;
}
.navbar ul li a span{font-size: 10px;white-space: nowrap;
}
.navbar ul li a:hover{color: #fff;background-color: #35495d;
}
/*: checked选择器判断复选框是否被选中*Ⅰ
/*+是相邻兄弟选择器找到了input的下一个兄弟label */
.navbar input:checked + label{left: 200px;
}
/* ~也是兄弟选择器但是可以找到隔了几代的兄弟*/
.navbar input:checked ~ ul{width: 200px;
}
.navbar input:checked ~ ul li:first-child{justify-content: flex-start;
}
.navbar input:checked ~ ul li:first-child span{margin-left: 14px;display: block;
}
.navbar input:checked ~ ul li a{flex-direction: row;justify-content: center;
}
.navbar input:checked ~ ul li a i{font-size: 18px;margin: 0 15px;
}
.navbar input:checked ~ ul li a span{font-size: 13px;
}

HTML+CSS - 侧边导航栏相关推荐

直播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 ...
【源码分享】jquery+css实现侧边导航栏
jquery+css实现侧边导航栏最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...
css中侧边导航栏怎么隐藏,CSS3手机侧边导航栏滑动隐藏特效
[温馨提示]源码包解压密码:www.youhutong.com 效果图: 描述说明: 共4种CSS3手机侧边导航栏滑动隐藏特效 1.默认的点击滑动侧边栏菜单效果. 2.带3D transforms的滑 ...
侧边导航栏（抽屉式设计）界面 (html + css)
写在前面哈喽~大家好,这篇呢带来的是侧边导航栏(抽屉式设计),采用 (html + css) 来实现的,编辑器是 WebStorm .接下来来看看效果吧. 效果首先我们要导入阿里的图标样式文件( ...
html中关于侧边导航栏和导航栏的编写
侧边导航栏 <style>.box{width: 50px;height: 50px;background-color: #483957;transition: width .5s,bac ...
HTML5+CSS3小实例：后台管理系统的侧边导航栏
HTML5+CSS3做一个后台管理系统的侧边导航栏,点击三条杠,可以收起或展开侧边导航栏.收起时,图标变大,文本在图标下方,管理员头像右侧的欢迎语隐藏:展开时图标变小,文本在图标的右侧显示,管理员头像 ...
js实现，点击侧边导航栏，可以平缓的跳到界面指定位置，同时当界面某个元素在浏览器可视范围的时候，相应的导航栏也显示相应的样式
注:要下载安装好jquery和element-ui "element-ui": "^2.15.8" "jquery": "^3.6 ...
利用layui实现侧边导航栏
主要利用element模块插件实现侧边导航栏第一种展示的侧边导航栏是依据菜单展示的内容来展示其背景样式的 <link rel="stylesheet" type=" ...

HTML+CSS - 侧边导航栏

HTML+CSS - 侧边导航栏相关推荐

最新文章

热门文章