<p>jQueryでドロップダウンメニューを実装してみます。<br></p><h2 id="h5a59f43619">ドロップダウンメニューとは</h2><p>プルダウンメニューとも呼ばれます。Webに限らずソフトウェアやアプリなど様々な場面でよく見かけるUIの一種です。</p><blockquote>プルダウンメニューとは、ソフトウェアやWebサイトなどにおけるメニューの表示方法の一種で、クリックなどの操作によって複数のメニュー項目を表示させるタイプの表示方法のことである。<br>ロールスクリーンを下ろすような動作で展開されるため「プルダウン」や「ドロップダウン」などと呼ばれている。</blockquote><p><a href="https://www.weblio.jp/content/%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%E3%83%80%E3%82%A6%E3%83%B3%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC#:~:text=%E3%83%97%E3%83%AB%E3%83%80%E3%82%A6%E3%83%B3%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%A8%E3%81%AF%E3%80%81%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2,%E3%81%A8%E5%91%BC%E3%81%B0%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B%E3%80%82" target="_blank" rel="noopener noreferrer">「ドロップダウンメニュー」の意味や使い方 Weblio辞書</a><br></p><h2 id="h5ef7d69a3b">成果物</h2><p>1からCSSを書くのは時間がかかるので <strong>Bootstrap5</strong> のCSSをお借りました。<br>操作形態が異なるため、PCではマウスオーバー、モバイルではタップで展開するような仕様となっております。<br></p><h3 id="hce947c89f2">ナビゲーションの仕様について</h3><p>ブラウザ幅が<strong>768px</strong>以上であればリンクは折りたたまずに横並びで表示します。<br>ブラウザ幅が<strong>767.98px</strong>以下であれば、リンクを折りたたんで縦並びで表示します。<br> </p><h3 id="heb4384662b">ドロップダウンメニューの仕様について</h3><p>ブラウザ幅が<strong>768px</strong>以上であればリンクに<span style="color:#333333">マウスポインタが重なった際に展開を行います。</span><br>ブラウザ幅が<strong>767.98px</strong>以下であれば、リンクをクリックした際に<span style="color:#333333">展開を行います。</span></p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fjs6we&display_name=CodeSandbox&url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fjs6we&image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Fjs6we%2Fscreenshot.png&key=d640a20a3b02484e94b4b0a08440f627&type=text%2Fhtml&schema=codesandbox" width="1000" height="500" scrolling="no" title="CodeSandbox embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br></p><h2 id="h109f43f351">必要なHTMLを記述</h2><h3 id="h63091202a2">全体のHTML</h3><p>ナビゲーションも含めた全体のHTMLとなります。<br>まるごとコピペ頂いて問題ありません。</p><pre><code>&lt;nav class="navbar navbar-expand-md navbar-light bg-light"&gt;
    &lt;div class="container-fluid"&gt;
        &lt;a class="navbar-brand" href="#"&gt;Navbar&lt;/a&gt;
        &lt;button class="navbar-toggler" type="button"&gt;
        &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;div class="collapse navbar-collapse"&gt;
        &lt;ul class="navbar-nav ms-auto mb-2 mb-lg-0"&gt;
            &lt;li class="nav-item"&gt;
            &lt;a class="nav-link active" aria-current="page" href="#"&gt;Home&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#"&gt;Link&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item dropdown navbar-dropdown"&gt;
            &lt;a
                class="nav-link dropdown-toggle navbar-dropdown-toggle"
                href="#"
                role="button"
            &gt;
                Dropdown
            &lt;/a&gt;
            &lt;ul class="dropdown-menu navbar-dropdown-menu"&gt;
                &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;hr class="dropdown-divider" /&gt;&lt;/li&gt;
                &lt;li&gt;
                &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/nav&gt;</code></pre><h3 id="ha78001c723">ドロップダウンメニューの動作に必要なHTML</h3><p>PCでは  <code>.navbar-dropdown</code> にマウスポインタが重なるとドロップダウンメニューが展開します。<br><code>.navbar-dropdown-toggle</code>にイベントリスナーを設定してしまうと、展開したドロップダウンメニューに<br>マウスポインタを移動させた際に非表示となってしまいます。<br><br>モバイルでは<code>.navbar-dropdown-toggle</code> にクリックされるとドロップダウンメニューが展開します。<br><code>.navbar-dropdown</code>にイベントリスナーを設定してしまうと、展開したドロップダウンメニューをクリックした際に<br>非表示となってしまいます。<br><br>PCではドロップダウンメニュー全体、モバイルではリンク項目にだけイベントリスナーを設定しているイメージです。</p><pre><code>&lt;li class="nav-item dropdown navbar-dropdown"&gt;
    &lt;a
        class="nav-link dropdown-toggle navbar-dropdown-toggle"
        href="#"
        role="button"
    &gt;
        Dropdown
    &lt;/a&gt;
    &lt;ul class="dropdown-menu navbar-dropdown-menu"&gt;
        &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;hr class="dropdown-divider" /&gt;&lt;/li&gt;
        &lt;li&gt;
        &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/li&gt;</code></pre><p><br></p><h3 id="hcb7430d109">必要なJavaScriptを記述</h3><p>まるごとコピペ頂いて問題ありませんが、<br>1行目から3行目については ES modules の記法となるため、<br>不要であれば削除頂いても問題ありません。</p><pre><code>import $ from "jquery";
import "bootstrap/dist/css/bootstrap.min.css";
import "./index.css";


/**
 * ナビゲーションの開閉処理を有効化
 */
const enableNavBarToggle = () =&gt; {
    $(".navbar-toggler").on("click", function () {
        $(".navbar-collapse").slideToggle();
    });
};


/**
 * ナビゲーションの開閉処理を無効化
 */
const disableNavBarToggle = () =&gt; {
    $(".navbar-toggler").off();
};


/**
 * ナビゲーション内のドロップダウンメニューを有効化
 *
 * stop()
 * 第一引数: 現在のアニメーションをゴールまでジャンプさせるか否か
 * 第二引数: 待機状態のアニメーションを破棄するか否か
 */
const enableDropDownMenuNavBar = () =&gt; {
    $(".navbar-dropdown-menu").hide();
    $(".navbar-dropdown").on({
        mouseover: function () {
            $(this).find(".navbar-dropdown-menu").stop(false, true).slideDown(300);
        },
        mouseleave: function () {
            $(this).find(".navbar-dropdown-menu").stop(false, true).slideUp(300);
        },
    });
};


/**
 * ナビゲーション内のドロップダウンメニューを無効化
 */
const disableDropDownMenuNavBar = () =&gt; {
    $(".navbar-dropdown-menu").hide();
    $(".navbar-dropdown").off();
};


/**
 * ナビゲーション内のプルダウンメニュー処理を有効化
 */
const enablePullDownMenuNavBar = () =&gt; {
    $(".navbar-dropdown-toggle").on("click", function () {
        $(this).next().slideToggle();
    });
};


/**
 * ナビゲーション内のプルダウンメニュー処理を無効化
 */
const disablePullDownMenuNavBar = () =&gt; {
    $(".navbar-dropdown-toggle").off();
};


/**
 * 画面幅によって有効化と無効化する処理を振り分け
 */
const mediaQueryList = window.matchMedia("(max-width: 767.98px)");
const listener = (event) =&gt; {
    if (event.matches) {
        // 767.98px以下
        disableDropDownMenuNavBar();
        enableNavBarToggle();
        enablePullDownMenuNavBar();
    } else {
        // 768px以上
        disableNavBarToggle();
        disablePullDownMenuNavBar();
        enableDropDownMenuNavBar();
    }
};
mediaQueryList.addEventListener("change", listener);


/**
 * 処理の開始
 */
$(function () {
    listener(mediaQueryList);
});</code></pre><h3 id="hbfde2b377d">ブラウザ幅の取得について</h3><p><code>resize</code>はブラウザに負担がかかるため、間引き処理を実装する必要が出てきます。</p><pre><code>$(window).on('load resize', function(){
 // 処理を記述
});</code></pre><p>そのため、ブラウザ幅がブレイクポイントより 大きく or 小さく なったときに1度だけ実行される<br><code>window.matchMedia</code> をここでは使用しています。</p><pre><code>const mediaQueryList = window.matchMedia("(max-width: 767.98px)");
const listener = (event) =&gt; {
    if (event.matches) {
        // 767.98px以下
    } else {
        // 768px以上
    }
};
mediaQueryList.addEventListener("change", listener);</code></pre><h3 id="h63be7e2d99">イベントの登録について</h3><p>今回は <code>on</code> メソッドを使用して実装していますが、<code>hover</code> メソッドを使用して実装することも可能です。</p><pre><code>$(".navbar-dropdown").hover(
      function() {
        // mouseover
        $(this).find(".navbar-dropdown-menu").stop(false, true).slideDown(300);
      }, function() {
        // mouseleave
        $(this).find(".navbar-dropdown-menu").stop(false, true).slideUp(300);
      }
);</code></pre><p><br></p><h2 id="h3bcda3e6b0">最後に</h2><p>毎回ググってスクラッチで実装するのは時間の無駄なため、<br>記事として登録してすぐに参照できるように致しました。<br><br>実案件ではこのような仕様で実装をよく行うため、<br>よろしければご活用ください。</p>

<ul><li><a href="https://rinblog.org/jquery-drop-down-menu/" target="_blank" rel="noopener noreferrer">【jQuery】ドロップダウンメニューを簡単に実装する【2つ】</a></li></ul>

カテゴリーが「jQuery」の記事

カテゴリ