HTML CSS と JavaScript を使用した Navbar Drawer https://www.instagram.com/webstreet

HTML CSS と JavaScript を使用した Navbar Drawer https://www.instagram.com/webstreet_code/

Barbara Streisand

リリース： 2024-11-19 06:56:02

オリジナル

846 人が閲覧しました

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

インスタグラムでフォローしてください: https://www.instagram.com/webstreet_code/

<!DOCTYPE html>
<html lang="ja">

    <メタ文字セット="UTF-8">
    <meta name="ビューポート" content="width=
    、初期スケール=1.0">
    <title>ドロワー</title>
    <リンク rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
   

    *{
        マージン: 0;
        パディング: 0;
        ボックスのサイズ設定: ボーダーボックス;
        フォントファミリー: 'ポピンズ'、サンセリフ;
    }

    体 {
            背景色: #141625;
            ディスプレイ: フレックス;
            整列項目: 中央;
            justify-content: flex-start;
            高さ: 100vh;
            オーバーフロー: 非表示;
        }
        。ハンバーガー{
            位置: 絶対;
            上: 20ピクセル;
            左: 18ピクセル;
            カーソル: ポインタ;
            z インデックス: 10;
        }

        .ハンバーガー.ライン{
            幅: 35ピクセル;
            高さ: 4px;
            背景色: #f0a500;
            マージン:6px 0;
            境界半径: 2px;
            トランジション: すべて 0.4 秒の緩和。
        }

        .menu-bar {
            位置: 固定;
            トップ: 0;
            左: 0;
            幅: 80ピクセル;
            高さ: 100%;
            背景色: #1f2235;
            ボックスシャドウ: 2px 0 15px rgba(0, 0, 0, 0.6);
            オーバーフロー: 非表示;
            トランジション: 幅 0.4 秒の容易さ。

        }

        .menu-bar.open {
            幅: 220ピクセル;
        }

        .menu-bar ul {
            リストスタイル: なし。
            パディング: 80px 10px;
        }
        .menu-bar ul li {
            ディスプレイ: フレックス;
            整列項目: 中央;
            パディング: 15px;
            色: #b2becd;
            カーソル: ポインタ;
            トランジション: 背景色 0.3 秒の容易さ。
            境界左: 4 ピクセルの実線透明。
        }

        .menu-bar ul li i {
            フォントサイズ: 24px;
            マージン右: 20px;
            トランジション: トランスフォーム 0.3 秒の容易さ。
        }
        .menu-bar ul lispan {
            不透明度: 0;
            フォントサイズ: 16px;
            トランジション: 不透明度 0.4 秒の緩和。
            ホワイトスペース: ナラップ;
        }

        .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:hover 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 スパン {
            色: #1f2235;
        }

















   </スタイル>
</head>

    <div>




          </div>

ログイン後にコピー

以上がHTML CSS と JavaScript を使用した Navbar Drawer https://www.instagram.com/webstreet_code/の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。