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. CSSだけでレスポンシブ対応の追従する電話ボタンを設置する方法

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

  2. 絶対できる年賀状作成!無料のプリントマジックの使い方

    普段あまりパソコンを使わないので年賀状を作ろうとしたら、わからなくて何をどう始めたらいいのだ…

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

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

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

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

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

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

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

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

  7. レスポンシブWebデザイン講座をレビュー!こんな良い講座はないと…

    webデザインど素人であった私を、このようにブログまで書けるように土台を築いてくれたwebデザインの…

  8. 簡単!photoshopを使ったトイカメラ風写真の作り方

    今や簡単にInstagramで写真を加工できるようになりましたが、自分の好きな色彩で微妙な調…

スポンサーリンク

さくらとXサーバーの速度比較

4/28まで初期設定費用半額

最近の記事

PAGE TOP