レスポンシブ対応！jQuery でドロップダウンメニューを実装する方法

うさこ

2016.09.29

Webフロントエンド

はじめに
目次
サンプル
HTML
CSS
- SP
- PC
jQuery

はじめに

レスポンシブの js 対応… いつもカオスになりますよね…？

PC版はこんな動きで～、SP版ではこういう動きにしてください♪
なんていうのは厳禁です。

わたくしたちコーダーから冷たい視線を浴びることになるので注意が必要です。
レスポンシブなんて無かった時代が懐かしい… ゜（ノД｀）゜。

今回はカオスにならない方法で ドロップダウンメニュー を実装する方法をご紹介します。
至ってシンプルです… サブメニューのアコーディオン？
…大丈夫、別の機能は切り離して考えましょう。

サンプル

まずはサンプルをご覧くださいませ。

デモ

HTML

基本的なタグ構造はこちら！

[sourcecode lang="html"]
&lt;header class=&quot;l_header&quot;&gt;
    &lt;div class=&quot;l_header_row1&quot;&gt;
        &lt;div class=&quot;l_header_inner&quot;&gt;
            &lt;h1 class=&quot;l_header_ttl&quot;&gt;
                &lt;a href=&quot;./&quot;&gt;&lt;img src=&quot;./assets/img/logo_01.png&quot; width=&quot;200&quot; height=&quot;60&quot; alt=&quot;&quot;&gt;&lt;/a&gt;
            &lt;/h1&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;l_header_row2&quot;&gt;
        &lt;div class=&quot;l_header_inner2&quot;&gt;
            &lt;p class=&quot;l_header_btn is_sp&quot;&gt;&lt;a href=&quot;javascript:void(0)&quot; class=&quot;m_btn&quot;&gt;メニューを開く&lt;/a&gt;&lt;/p&gt;
            &lt;nav class=&quot;l_header_nav&quot;&gt;
                &lt;ul class=&quot;l_header_list&quot;&gt;
                    &lt;li class=&quot;is_current&quot;&gt;&lt;a href=&quot;./&quot;&gt;TOP&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;メニュー1&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;メニュー2&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;メニュー3&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;メニュー4&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
                &lt;p class=&quot;l_header_btn2 is_sp&quot;&gt;&lt;a href=&quot;javascript:void(0)&quot;&gt;メニューを閉じる&lt;/a&gt;&lt;/p&gt;
            &lt;/nav&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;!-- /.l_header --&gt;&lt;/header&gt;
[/sourcecode]

[sourcecode lang="html"]

</h1>

</div>

<p class="l_header_btn is_sp"><a href="javascript:void(0)" class="m_btn">メニューを開く</a></p>

</ul>

<p class="l_header_btn2 is_sp"><a href="javascript:void(0)">メニューを閉じる</a></p>

</nav>

</div>

</header>

[/sourcecode]

CSS

ポイントとなる部分をピックアップしています。
その他、色々アレンジしてみてください！

SP

[sourcecode lang="css"]
/* メニューを画面いっぱいに表示する */
.l_header .l_header_nav {
    overflow-y: scroll;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}

/* js でコネコネするもの */
.is_close.l_header .l_header_nav {
    display: none;
}
[/sourcecode]

[sourcecode lang="css"]

/* メニューを画面いっぱいに表示する */

.l_header .l_header_nav {

overflow-y: scroll;

position: fixed;

left: 0;

right: 0;

bottom: 0;

top: 0;

}

/* js でコネコネするもの */

.is_close.l_header .l_header_nav {

display: none;

}

[/sourcecode]

PC

[sourcecode lang="css"]
/* メニューを画面いっぱいに表示するスタイルをリセット */
.l_header .l_header_nav {
    position: static;
    overflow-y: visible;
    left: auto;
    right: auto;
    bottom: auto;
    top: auto;
    background-color: transparent;
}

/* SP版のみ表示 */
.is_sp {
    display: none !important;
}

/* js でコネコネするもの */
.is_close.l_header .l_header_nav {
    display: block !important;
}
[/sourcecode]

[sourcecode lang="css"]

/* メニューを画面いっぱいに表示するスタイルをリセット */

.l_header .l_header_nav {

position: static;

overflow-y: visible;

left: auto;

right: auto;

bottom: auto;

top: auto;

background-color: transparent;

}

/* SP版のみ表示 */

.is_sp {

display: none !important;

}

/* js でコネコネするもの */

.is_close.l_header .l_header_nav {

display: block !important;

}

[/sourcecode]

jQuery

jQuery はたったのこれだけです。
複雑なことは一切していません！！

[sourcecode lang="javascript"]
$(function(){
    var elm = '.l_header'
    var btn = $(elm + '_btn a,' + elm +'_btn2 a');
    var nav = $(elm + '_nav');

    // 初回アクセス時にメニューを閉じた状態にする
    $(nav).css('display', 'none');
    $(elm).addClass('is_close');

    $(btn).on('click', function() {
        $(nav).slideToggle();
        $(elm).toggleClass('is_close');
    });
});
[/sourcecode]