在 Instagram 上关注我们：https://www.instagram.com/webstreet_code/
<html lang="zh-cn">
<头>
<元名称=“视口”内容=“宽度=
, 初始比例=1.0">
<标题>抽屉</标题>
<链接 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
*{
保证金：0；
填充：0；
框大小：边框框；
字体系列：'Poppins'，sans-serif；
}
身体 {
背景颜色：#141625；
显示：柔性；
对齐项目：居中；
justify-content：flex-start；
高度：100vh；
溢出：隐藏；
}
。汉堡包{
位置：绝对；
顶部：20 像素；
左：18 像素；
光标：指针；
z 索引：10；
}
.汉堡.线{
宽度：35 像素；
高度：4px；
背景颜色：#f0a500；
边距：6px 0；
边框半径：2px；
过渡：全部 0.4s 缓和；
}
.菜单栏{
位置：固定；
顶部：0；
左：0；
宽度：80px；
高度：100%；
背景颜色：#1f2235；
盒子阴影：2px 0 15px rgba(0, 0, 0, 0.6);
溢出：隐藏；
过渡：宽度0.4s缓和；
}
.menu-bar.open {
宽度：220px；
}
.菜单栏 ul {
列表样式：无；
内边距：80px 10px；
}
.menu-bar ul li {
显示：柔性；
对齐项目：居中；
内边距：15px；
颜色：#b2becd；
光标：指针；
过渡：背景颜色 0.3s 缓动；
左边框：4px实心透明；
}
.menu-bar ul li i {
字体大小：24px；
右边距：20px；
过渡：变换0.3s缓和；
}
.menu-bar ul li span {
不透明度：0；
字体大小：16px；
过渡：不透明度 0.4s 缓动；
空白：nowrap；
}
.menu-bar.open ul li span {
不透明度：1；
}
.menu-bar ul li:hover {
背景颜色：#282a40；
盒子阴影：0 4px 8px rgba(0, 0, 0, 0.2);
}
.menu-bar ul li:悬停 i {
变换：缩放（1.2）；
}
.menu-bar ul li.active {
背景颜色：#f0a500；
边框半径：20px；
颜色：#1f2235；
左边框：4px 实线#f0a500；
}
.menu-bar ul li.active i {
颜色：#1f2235；
}
.menu-bar ul li.active span {
颜色：#1f2235；
}
</风格>
</头>
<div>
</div>以上是使用 html css 和 javascript 的导航栏抽屉 https://www.instagram.com/webstreet_code/的详细内容。更多信息请关注PHP中文网其他相关文章！
