SONICMOOV Googleページ

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

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

  • このエントリーをはてなブックマークに追加

はじめに

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

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

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

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

目次

サンプル

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

デモ

HTML

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

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

CSS

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

SP

/* メニューを画面いっぱいに表示する */
.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;
}

PC

/* メニューを画面いっぱいに表示するスタイルをリセット */
.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;
}

jQuery

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

$(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');
    });
});

jQuery の便利な toggle 系のメソッドを使ってよしなにしてもらいましょう。
あんまり複雑な処理にすると泥沼にはまりがちなので…

皆さまのお力になれますように…(´ω`*)
以上!小ネタでした!

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

うさこ(マークアップエンジニア)

ソリューション事業部マークアップエンジニアのうさこです。入社して4年目となりました!ラーメンが大好きなのですが、脂肪という名の悪魔を極力避けるために我慢の日々を過ごしています… ぐぐぐ…

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter SONICMOOV Googleページ
フロントエンドエンジニア募集中!

新着の記事

mautic is open source marketing automation