22

レスポンシブに対応した簡単メニュー

 responsive-menu

PC・タブレット・スマホ、それぞれに対応したレスポンシブなメニューを「jQuery」と「CSS」で簡単に作成できます。シンプルなものですが、その作り方をメモしておきます。

サンプルを用意しましたのでまずは確認してみてください。




ウィンドウサイズを小さくしてみたり広げてみたりすると、2列になり、メニュータブにと変化するようにしてあります。

デモサンプル

それでは、作り方を見ていきましょう。

1.HTMLを記述

ウィンドウサイズが769px以上の際は、<li>要素でナビゲーションを横並びにしています。サンプルではボタンを「8個」配置していますので、CSSの記述で「#menu li」要素の横幅を「12.5%」にしてあります。実際にサイト上でいくつのナビゲーションボタンを横に並べるかによって、「#menu li」の横幅を調整してください。

また、「#toggle」の部分はデフォルトでは「display:none;」で非表示にしておき、画面サイズが480px以下の場合のみ表示するように指定しています。

2.jQueryを読み込みJavaScriptを記述

3.CSSを記述

メディアクエリを使ってそれぞれの画面は合わせてメニューが変形するようになっています。
IE8以下は、基本的にメディアクエリに対応していないので、下記の一文を追記して対応させます。

実際にはどのように見えるかと言うと、

○横幅769px以上の場合は以下のように表示

ナビゲーションの最大幅を960pxに指定して、横並び8個なのでひとつあたり「12.5%」で指定

 960px以上の場合

 

○横幅481px~768pxの場合は以下のように表示

ナビゲーションの最大幅を画面サイズ100%に指定して、横並び4個×2段なのでひとつあたり「25%」で指定

481px以上、768px以下の場合

 

○横幅480px以下の場合は以下のように表示

スマホのポートレートモードの場合は、メニューを折りたたんで表示します。

480px以下の場合

デモサンプル

 

追記(2015/10/14)

ここから追記になります。

サイトを利用してくださっている方より、ご指摘のありました「メニューボタンを押した際にブルダウンのメニューが開いたままになってしまう」という問題を解決致しました。

JavaScriptに以下を追記

/* 追記部分 */から下を先程のコードに追記してください。

確認してみてください。こちらに書き換えたもののデモサンプルがこちら↓

再デモサンプル

正しく動作しているか少し不安・・・

 

 

22 Comments

  1. とてもシンプルで汎用性のある使いやすいサンプルですね!
    カスタマイズして商用サイトに利用させていただくことは可能でしょうか?

    • 「ますだ」さん
      コメントありがとうございます。
      もちろんお好きにカスタマイズしてご利用くださいヽ(*´∀`)ノ

  2. iPhoneでメニューを開いた状態で下にスクロールするとメニューが閉じてしまう場合があります。
    iOSをアップデートしたら不安定になったような気もします。
    他に問題の報告はなかったでしょうか?
    iPhone5s,iOS8.2,safari

    • 「中野」さん
      ご報告ありがとうございます。
      確認してみたところ「iOS8」において、スクロール時にメニューが閉じてしまう現象が起きているようです。「iOS8」においては、その他にもいくつかのバグが報告されているようですが、こちらの現象に関してはアップデートし直すか、ダウングレードするかのみ対処が見えない状況です。最善の解決案を出せず申し訳ありませんが、対応方法がわかり次第、追記させて頂きたいと思います。

  3. 返信ありがとうございます。
    何か対応策が分かればよろしくお願いいたします。

  4. とても使い易いレスポンシブメニュー使用させていただいております!
    当方、同一ページ内でのジャンプリンクに使用しているのですが、トグル選択後も下がったトグルがそのまま閉じず残るので、メニュー選択後に自動的にトグルを閉じる様なスクリプトは可能でしょうか?

      • こんばんは。最近こちらのメニューを知り、愛用させて頂いております。
        リンク先にジャンプして確認してみましたが、やはり閉じずに残ったままですね・・・
        こちらgoogle chromeのバージョン47.0.2526.80 mです。
        IE11でも同じでした。

  5. はじめまして。
    こちらのメニューのデモをFirefox39でスライドさせてみました。
    480pxに狭めていくと、少し手前でメニューが消えてしまう横幅がありました。
    階層が深くならないし、ちょうどいい扱いやすさでいいですね。
    あ、クロームも同じみたいです。以上、報告でした。

    • 「Mar」さん
      コメントありがとうございます!
      それぞれ確認してみましたが、不具合が見られませんでした。
      問題があるようでしたらご報告頂けると助かります。

  6. これはすごくいいですね。
    最後の再でもサンプルのソースはアップしていただけませんでしょうか?

    • 「Hagi」さん
      コメントありがとうございます。
      再デモサンプルもはじめのHTMLとCSSを利用して、JavaScriptのみ追記すればOKです。

  7. はじめまして。
    ページを読み込んだ時にメニューが開いた状態で読み込まれてしまいます。
    ウインドウの幅を広げた状態から狭くするとメニューが閉じます。
    ご教授よろしくお願いいたします。

    • 「MIYA」さん
      コメントありがとうございます。

      読み込まれているページは、「デモサンプル」と「再デモサンプル」のどちらになりますでしょうか?また、ご自身で作成しているページある場合、どのようなJavaScriptを記載していますか。詳細頂けると確認しやすいです。それから、開いた状態で表示されてしまうブラウザとバージョンも合わせて教えて頂けるとうれしいです。

      • 確かこのページの記述をそのまま使わせてもらっただけですので、それはどちらになりますでしょうか?
        ちなみに今は自己完結してまして、
        次の記述を追加したら閉じた状態でページを読み込む事ができました。
        $(function() {
        var w = $(window).width();
        var x = 700;
        if (w >= x) {
        $(“#menu”).show();
        }else{
        $(“#menu”).hide();
        }
        });
        ほとんどのブラウザで現象が起きていましたがどのブラウザでも問題なしです。
        バージョンまでは調べてません。
        JQueryの知識とかほとんどないのでネットで調べて当てずっぽで記述しましたので
        この記述が正しいのかどうかもわかりません。
        ではよろしくお願いいたします。

  8. 横からスミマセン。
    以前こちらの現象についてコメントされてらっしゃる方がいらしたのですが、私も同じような現象で悩んでおりました。

    確認してみたところ「iOS8」において、スクロール時にメニューが閉じてしまう現象が起きているようです。

    現在の私の環境はiOS10です。
    同じ現象が起きていました。結果から申しますと治りました。
    jQueryを以下のものに変えました。

    $(function(){
    var _touch = (‘ontouchstart’ in document) ? ‘touchstart’ : ‘click’;
    $(“#toggle”).on(_touch,function() {
    $(this).toggleClass(“on”);
    $(“#hogehoge”).slideToggle();
    return false;
    });
    });

    以下HTML

    menu

    Navi1
    Navi2
    Navi3
    Navi4

    JQeryは以下のように設定しています。

    3.0でも動きました。
    最後に私のテスト環境を記します。
    PC:Win10最新版
    ブラウザ:IE11…OK
         Firefox50.1.0…OK
    Opera41.0、MacOS(最新版)は縮んでくれずに確認できず

    スマホ:iPhone5s iOS10.2…OK
        iPhone6sPlus iOS10.2…OK

    クロームとAndroidでは確認を取っていませんが、もしどなたか試して頂けると助かります。
    この数日間ずっと悩んでいた問題だけに、解決できたことはとても嬉しくまた、同じ悩みを持つ皆さんのお役に立てればと思い長々とコメント致しました。
    どうか、無礼をお許し下さい。

  9. 同じ症状に悩んでいましたがななすさんのコードを利用したところ解消されました。

    ただし、ここに掲載されているコードをそのままコピペすると私の環境では文字コードの違いか「”」と「’」を叩き直す必要がありました。

    ともかく大変たすかりました。ありがとうございます!

  10. 轟さん、文字コードの件ではご迷惑をおかけいたしました。
    お詫び致します。
    少しでもお役に立てたようで光栄です。
    今回の原因がiOSによるリサイズだったので、リサイズイベントではなくタッチイベントでトグルを展開するようにした(という方法をやっておられる方がいらっしゃいました)のですが、まだ問題があります。

    リサイズの問題は回避できたのですが、スマホバージョンで一度メニューを展開・格納した後ブラウザの画面を広げる又は、スマホを横にする(つまり幅を広げる)と、元あったメニューが非表示のままになってしまいます。

    これはcssで480px(この値は任意)以下になった場合は、トグルを表示し元のメニュー(主にliタグのもの)を非表示にするという設定が生きたままになってしまい、画面幅が広がってもメニューが消えたままになってしまうからだと思われます。
    cssの問題ならばcssで解決できると思うのですが、未だ糸口すらつかめていません。
    また何か分かりましたらコメントさせて頂きます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > jQuery > レスポンシブに対応した簡単メニュー