Programing beginner by koala

【超簡単】メニューバー(ナビゲーションバー)をドロップダウン式にする方法!画像&動画付き「過保護説明」

この記事では、メニューバー、ナビゲーションバーを階層構造にし、ドロップダウン式にする超簡単な方法について説明します。

検索者が読みたい記事に簡単に辿り着けるように、サイトやブログに、下記のようなメニューバー(ナビゲーションバー)があると便利ですよね(^^)

いろいろある中でも、一番簡単であろう方法を、画像&動画付きで詳しく説明していきますね!

Contents

大まかな方法はこうです!

メニューバーに階層構造にして、ドロップダウン式にする方法として、一番簡単なのは、

1.通常は「入れ子」の部分はdisplay: none;で、非表示
2.マウスが乗ったらdisplay: block;で表示する

という2ステップで出来る方法ではないかなと思います。

今回はその方法を説明していきますね!

まずはhtmlではこう書く!!

ご存知のように、<ul>タグ<li>タグを使っていくのですが、階層を作るには、<li>タグにもう一つ<ul><li>を入れ子します。

書き方は下記の通りです(^^)

説明はコメントの通りなので、ここまでは特に難しくないかな?と思います。

CSSではこう書く!

「ここから階層を作る指定が始まりまーす!」から見ていただければいいかな?と思います。それ以上は、メニューバーの色とか、そういう細々した指定なので参考程度に。

ここでのポイントとしては、「疑似要素」ではないかなと思います。

#navigation li:hoverは、クラスIDである#navigation<li>タグに、マウスが乗っかったら(:hover)、その下の<ul>達を表示してね!っていう指定ですね!

逆に:hoverでない状態の時は、display: noneが適用されている状態です。

こう見てみると、意外とシンプルにできちゃいますよね(^^)

まとめっ!

疑似要素が使えるようになると、表現の幅がググっと広がるので、いいですね!

上記を元に、マウスが当たったら色を変えるなど、いろいろな応用が出来ますので、是非試してみてくださいね。

以上です!

About me

IT業界6年目にして、プログラミングの勉強を始めたkoalaです。

プログラミング用語が難しすぎる!ということで、初心者が初心者に解説するという型破りなブログを開設してみました。

専門用語少な目、分かりやすくをモットーにしています。

>>続きはこちら

今日の名言

クリックすると、あなたの心に響く誰かの名言が表示されます♪

 

今日の名言

 
※あなたの名言募集しています!詳細はこちら