ホームページ > 記事 > ウェブフロントエンド > HTML CSS と JavaScript を使用した Navbar Drawer https://www.instagram.com/webstreet_code/
HTML CSS と JavaScript を使用した Navbar Drawer https://www.instagram.com/webstreet_code/
- Barbara Streisandオリジナル
- 2024-11-19 06:56:02843ブラウズ
インスタグラムでフォローしてください: 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 サイトの他の関連記事を参照してください。
JavaScript css ajax html using pointer href display position overflow margin padding border viewport background transform transition flex ul li https
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。