使用 html css 和 javascript 的导航栏抽屉 https://www.instagram.com/webstreet

使用 html css 和 javascript 的导航栏抽屉 https://www.instagram.com/webstreet_code/

Barbara Streisand

发布： 2024-11-19 06:56:02

原创

897 人浏览过

Navbar Drawer using html css and javascript https://www.instagram.com/webstreet_code/

在 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中文网其他相关文章！