【HTML, CSS】ドロップダウンメニュー作成:レスポンシブ, 子メニュー, 孫メニューの作り方

man

困ってる人

メニューバーってどうやって作ればいいんだろう?
ナビゲーション?グローバルメニュー?

それでしたら今回は、一般的なメニューバーの配置方法やそこからのレスポンシブ対応までを簡単にご紹介しますね

operator

オペレーター


こんにちは、よろと申します。

今回作るのは、こんな感じのメニューバー。

今回は、とても一般的な左上にロゴ、右上にハンバーガーボタン、

そして、それらの下にメニューボタンの一覧を並べて表示させるパターンのメニューバーの作り方の基本をご紹介。

【HTML, CSS】ドロップダウンメニュー作成:レスポンシブ、子メニュー、孫メニューの作り方

という事で今回は、カーソルをメニューに合わせた時に、

別のカテゴリー(子要素)が表示されるようにしてみる。

・HTML(index.html)

そして次に、CSSで見た目の部分を整える、

・CSS(style.css)

そして、ロゴとハンバーガーボタンの部分に関してはこんな感じ。

・CSS(style.css)

そして、ハンバーガーボタンがきちんと反応してくれるようにするには、

script.jsに、

と書いて終わり。

これらのような、メニューの階層が少ないものだと、HTMLCSSの記述も比較的シンプルで短く簡単。

ただ、もう少し階層の深いメニューボタンを作りたいといった場合は、

ヘッダー部分の中身を、もう少し細かく書いていく必要が出てくる。

ドロップダウンメニューの作成:階層が深い場合、子メニュー、孫メニューの作り方

深い階層のメニューバーというのは、こんな感じで、

通常のメニューに加え、子メニュー、孫メニュー、下手すると孫メニューまでもあるパターン。

今回は、これを試しに作っていく。

・HTML(index.html)

CSSの処理をせずに、HTMLだけだとこんな感じ。

そして、次にCSS

・CSS(style.css)

今回、>> の矢印アイコン部分には「Font Awesome」というサービスを使っていて、

Font Awesomeを使う時は、head内で、

を読み込ませればOK。

あとは、好みのアイコンを、Font Awesomeのサイトから探してくる。

ここまで書ければ、PC表示に関しては問題なし。

ドロップダウン メニューバー:レスポンシブ(スマートフォン)対応

PCで閲覧時は、ハンバーガーボタンを見えないようにして、メニューの一覧表示をする設定に、

スマホ表示時は、ハンバーガーボタンを表示し、メニューの一覧を隠す設定に。

スマートフォン仕様(レスポンシブ対応)にする場合は、CSSを再度別のファイルで読み込む、

今回はスマホで見た場合の設定を、responsive.cssに書いていくとして、

ファイルを読み込むタグは、

という事でまずは、ハンバーガーボタンを消す設定に、

・style.css(PC閲覧時)

そして、スマホ側では、

・responsive.css(レスポンシブ)

ドロワーメニューで、メニュー一覧を表示する設定

今回は、スマホで見る場合は、メニュー画面を画面の外に配置しておいて、

ハンバーガーボタンをクリックしたと同時に、メニューの一覧が画面上に表示される(画面の中に入ってくる)ように設定を書いてみる。

という事で、簡単なドロワーを作成。その場合まずは、

そうするとこんな感じ。

transform: translateの意味合い

数字を指定する際は、%だけじゃなくvhなどを使用してもOK。

今回は、ハンバーガーボタンをクリックする度に、メニューの一覧が右側から現れるようにする設定。

script.jsに、

$(‘nav’).toggleClass(‘active’);を追加し、.hamburgerをクリックする度に、

navにも、activeというクラスをつけたり消したりといった指示を出す。

.toggleClassを使う事によって、ボタンをクリックする度にその要素に「active」というクラス名を付与する事が出来る。

そして次に、CSS部分。

script.jsで、要素をクリックをする度に、.activeというクラスをつけたり外したりする設定を書いたので、

responsive.css内の要素に、activeクラスがついた時の処理を書く、

そうする事によって、ボタンをクリックする度に、ドロワーの開閉が出来るようになる。

ただ、今のままではクリックしてからメニューの一覧が、元の位置に戻るまでが早過ぎるので、

transition: all .3s; を付け加えて。アニメーションの速度の調節をする。

そうするとこんな感じ。

・responsive.css

これでOK。

メニューバーの見た目の部分をレスポンシブ仕様(スマートフォン対応)に

今の状態だと、まだメニュー部分が横並びになっているので、

これらを縦並びにして見た目を軽く整える。その場合は、

・responsive.css

の、display: inline-block;の部分を display: initial;で初期値に戻す。

の中身も同じように、initialに、

の中身も全て同じように、initialに、

そうすれば、全ての項目が縦並びになる、

あとの細かい調整は、またCSSで整えていけばOK。

そして、最終的な結果はこんな感じ。

・index.html

・style.css

・responsive.css

・script.js

終わり。

プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール