簡単！レスポンシブメニューをjQueryでドロップダウンできるように設定する方法
スマホ用のレスポンシブwebサイトを作る時に、のハンバーガーメニューからドロップダウンするメニューを作りたい人は必見です。jQueryの｢MeanMenu｣を使って設置しますが、簡単に作れますので、ご覧ください。
完成したドロップダウンメニュー
※実際に私が設定したレスポンシブサイトは
なぜ、ドロップダウンメニューが必要なのか？
- スマホの画面は大きさが限られているので、できるだけ表示画面を確保する必要があるため
- ドロップダウンメニューは今や標準装備であり、ないとユーザリビティの低下につながるため
- サイトに動きがあることにより、ユーザーを退屈させないため
ドロップダウンメニューの設定方法
まず、｢MeanMenu｣のサイトから、jQueryファイルをダウンロードします。ダウンロードしたら、フォルダ中のmeanmenu.cssとjquery.meanmenu.jsをサイトのhtmlと同じ階層にアップロードします。
ドロップダウンメニューを設置するには、↓のコードのようなHTMLを書く必要があります。ちなみに↓は私が書いているコードです。
|
1 2 3 4 5 6 7 8 |
<ul> <li><a href="#">ホーム</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">パーティ</a></li> <li><a href="#">アクセス</a></li> <li><a href="#">ご予約</a></li> <li><a href="#">お問合せ</a></li> </ul> |
headタグ内に↓のコードをコピペします。＜/head＞の直前でいいかなと思います。
|
1 2 3 4 5 6 7 8 |
<link rel="stylesheet" href="meanmenu.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="jquery.meanmenu.js"></script> <script> $(document).ready(function() { $('nav').meanmenu(); }); </script> |
調整したい場合は上のコードの６、７行目に挿入すると調整できます。
|
1 2 3 4 5 6 7 8 |
$('nav').meanmenu({ meanMenuClose: "x", // クローズボタン meanMenuCloseSize: "18px", // クローズボタンのフォントサイズ meanMenuOpen: "", // 通常ボタン meanRevealPosition: "right", // 表示位置 meanRevealColour: "", // 背景色 meanScreenWidth: "480", // 表示させるウィンドウサイズ(ブレイクポイント) }); |
jQueryを使う時に注意すべき点
今回、私がjQueryを設定した時に、前回、段組の高さを揃えるjQueryを設定してバージョンが異なっており、片方の設定しかできない状態になりました。しかし、↓の方法で解決することができました。あなたがもし、複数のjQueryを設定する場合には参考になるかと思います。
同一サイトでバージョンの違うjQueryを複数呼び出した場合に回避する方法
参考にした記事
レスポンシブメニューを作成できるjQueryプラグイン｢MeanMenu｣
まとめ
いかがでしたでしょうか？headタグ内にコードをコピペするだけで反映されますので、簡単に設定できると思います。私が設定する時に、つまづいた点を書いていますので、もし、うまくいかない場合は、もう一度よく読み返していただけたらなと思います。
この記事が気に入ったら
いいね！しよう
最新情報をお届けします
Twitterでshare lifeをフォローしよう！
Follow share life