簡単！レスポンシブメニューをjQueryでドロップダウンできるように設定する方法

スマホ用のレスポンシブwebサイトを作る時に、のハンバーガーメニューからドロップダウンするメニューを作りたい人は必見です。jQueryの｢MeanMenu｣を使って設置しますが、簡単に作れますので、ご覧ください。

完成したドロップダウンメニュー

※実際に私が設定したレスポンシブサイトは

なぜ、ドロップダウンメニューが必要なのか？

• スマホの画面は大きさが限られているので、できるだけ表示画面を確保する必要があるため
• ドロップダウンメニューは今や標準装備であり、ないとユーザリビティの低下につながるため
• サイトに動きがあることにより、ユーザーを退屈させないため

ドロップダウンメニューの設定方法

まず、｢MeanMenu｣のサイトから、jQueryファイルをダウンロードします。ダウンロードしたら、フォルダ中のmeanmenu.cssとjquery.meanmenu.jsをサイトのhtmlと同じ階層にアップロードします。

ドロップダウンメニューを設置するには、↓のコードのようなHTMLを書く必要があります。ちなみに↓は私が書いているコードです。

headタグ内に↓のコードをコピペします。＜/head＞の直前でいいかなと思います。

調整したい場合は上のコードの６、７行目に挿入すると調整できます。

jQueryを使う時に注意すべき点

今回、私がjQueryを設定した時に、前回、段組の高さを揃えるjQueryを設定してバージョンが異なっており、片方の設定しかできない状態になりました。しかし、↓の方法で解決することができました。あなたがもし、複数のjQueryを設定する場合には参考になるかと思います。

同一サイトでバージョンの違うjQueryを複数呼び出した場合に回避する方法

参考にした記事

レスポンシブメニューを作成できるjQueryプラグイン｢MeanMenu｣

まとめ

いかがでしたでしょうか？headタグ内にコードをコピペするだけで反映されますので、簡単に設定できると思います。私が設定する時に、つまづいた点を書いていますので、もし、うまくいかない場合は、もう一度よく読み返していただけたらなと思います。

2017.07.13

本気でスキルを身に付けたい人におすすめのプログラミングスクール５校のまとめ

本気でプログラミングを学んで、HPを作りたいとか、スマホアプリを作りたいとか、転職して別の道に進みたいと考えている人へ、最短で習得する為にはスクールを利用することをおすすめしたいと思います。 なぜなら、私はwebと関係ない世界から今はこうやってブログを書いていますが、初めは独学で勉強して...