menu

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

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

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

menu4

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

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

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

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

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

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

 

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

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

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

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

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

参考にした記事

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

まとめ

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

これからプログラミングを効率的に学ぶなら⇨プログラミング 無料体験

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterでshare lifeをフォローしよう!

スポンサーリンク

レスポンシブでも横並びの段組の高さを揃えられるjQuery「matchHeight」の使い方

CSSだけでレスポンシブ対応の追従する電話ボタンを設置する方法

関連記事

  1. レスポンシブでも横並びの段組の高さを揃えられるjQuery「ma…

    前回、紹介したレスポンシブwebデザイン講座 で、レスポンシブサイトを作ったのですが、幅を変更すると…

  2. HPのワイヤレスプリンターの設定方法(Photosmart Pr…

    年賀状やハガキを印刷する時ぐらいにしかプリンターを使わないので、設定方法を忘れることってあり…

  3. チョーク風素材の使い方でこんなに印象が変わるの?!(photos…

    チョーク風のデザイン素材を使いたいけど、どのように使えば良いかわからずに悩みますよね。私も…

  4. メールで大容量ファイルを送信できないことはない!GigaFile…

    メールで大容量の写真や動画を渡したい時ってありますよね。実際にメールでスムーズに送れる容量は…

  5. ブログってそう使うんだ!月間10万PVブロガーとの対談から得たブ…

    ブログって何のために使うの?ってふと、思うことありますよね。アドセンスやアフィリエイトに活用…

  6. CSSだけでレスポンシブ対応の追従する電話ボタンを設置する方法

    最近、クライアントからレスポンシブサイトを作成するのに、スマホから電話をすぐにかけられるようにできな…

  7. こんなに簡単でいいの?パスワード付きホームページの作り方

    自分のサイトをパスワード設定したい時ってありますよね。例えば、あなたのメルマガ会員に…

  8. ど素人が独学でサイトを公開するまでにした失敗と成功

    独学でwebサイトを作成して公開するのって何から手をつけたらいいかわからないですよね。私も全…

PAGE TOP