【超簡単】メニューバー（ナビゲーションバー）をドロップダウン式にする方法！画像＆動画付き「過保護説明」
この記事では、メニューバー、ナビゲーションバーを階層構造にし、ドロップダウン式にする超簡単な方法について説明します。
検索者が読みたい記事に簡単に辿り着けるように、サイトやブログに、下記のようなメニューバー（ナビゲーションバー）があると便利ですよね(^^)
いろいろある中でも、一番簡単であろう方法を、画像＆動画付きで詳しく説明していきますね！
大まかな方法はこうです！
メニューバーに階層構造にして、ドロップダウン式にする方法として、一番簡単なのは、
１．通常は「入れ子」の部分は
２．マウスが乗ったら
display: none;で、非表示２．マウスが乗ったら
display: block;で表示するという2ステップで出来る方法ではないかなと思います。
今回はその方法を説明していきますね！
まずはhtmlではこう書く！！
ご存知のように、＜ul＞タグ、＜li＞タグを使っていくのですが、階層を作るには、＜li＞タグにもう一つ＜ul＞、＜li＞を入れ子します。
書き方は下記の通りです(^^)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<ul id="navigation"> <li><a href="#">About</a> /*Aboutグループ（メニューバーに表示されている部分）*/ <ul> /*入れ子の部分（マウスを合わせると出てくる）*/ <li><a href="#">link1</a></li> <li><a href="#">link2</a></li> </ul> /*入れ子ここまで*/ </li> /*Aboutグループはここまで*/ <li><a href="#">Study</a> /*Studyグループ*/ <ul> <li><a href="#">link1</a></li> <li><a href="#">link2</a></li> </ul> </li> /*Sturyグループ終了*/ <li><a href="#">Column</a> /*Columnグループ*/ <ul> <li><a href="#">link1</a></li> <li><a href="#">link2</a></li> </ul> </li> /*Columnグループ終了*/ </ul> |
説明はコメントの通りなので、ここまでは特に難しくないかな？と思います。
CSSではこう書く！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
/*ナビゲーションバー全体のデザインなのであまり気にしないでOK*/ #navigation{ background-color: #f5f5f5; width: 100vw; display: flex; justify-content: center; background-color: #f5f5f5; padding: 15px; } #navigation li{ list-style-type: none; text-decoration: none; margin: auto 80px; } #navigation li a{ font-size: 20px; padding: 20px; color: darkgrey; } /*ここから階層を作る指定が始まりまーす！*/ #navigation li{ position: relative; /*動画で説明しまーす*/ } #navigation li ul{ display: none; /*通常時は非表示*/ position: absolute; /*動画で説明しまーす*/ margin-top: 10px; width: 180px; background-color: #f5f5f5; padding-left: 0; } #navigation li:hover > ul { display: block; /*マウスが当たった時に表示する*/ } #navigation li ul li{ margin: 0 auto; padding: 20px; list-style-type: none; } #navigation li ul li:nth-child(n+2){ border-top: 1px solid white; /*2番目からボーダートップを付ける*/ } |
「ここから階層を作る指定が始まりまーす！」から見ていただければいいかな？と思います。それ以上は、メニューバーの色とか、そういう細々した指定なので参考程度に。
ここでのポイントとしては、「疑似要素」ではないかなと思います。
#navigation li:hoverは、クラスIDである#navigationの＜li＞タグに、マウスが乗っかったら（:hover）、その下の＜ul＞達を表示してね！っていう指定ですね！
逆に:hoverでない状態の時は、display: noneが適用されている状態です。
こう見てみると、意外とシンプルにできちゃいますよね(^^)
まとめっ！
疑似要素が使えるようになると、表現の幅がググっと広がるので、いいですね！
上記を元に、マウスが当たったら色を変えるなど、いろいろな応用が出来ますので、是非試してみてくださいね。
以上です！
