<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でドロップダウンメニューを実装する

<p>Swiper の背景画像を時間経過と共にズームダウンさせつつ、<br>フェード効果を用いてスライドを切替させてみます。<br></p><h2 id="hf2663dbbc7">動作デモ</h2><p>今回も CodeSandBox を使って実装を行いました。<br>この記事では全体のソースコードは紹介せず、補足だけを行います。<br></p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fumij3&display_name=CodeSandbox&url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fumij3&image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Fumij3%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="hc499e4ad38">解説</h2><h3 id="h8d027c8ed3">はじめに</h3><p>ズームアウト（イン）+ フェード効果 は紹介されているブログをよく見かけますが、<br>いずれも <u>拡大された画像が一気に縮小されてから次のスライドが表示される問題 </u>が特定の条件下で発生していました。<br>このような動きは美しくないため、独自に調整を加えた上でご紹介致します。<br></p><h3 id="h9c82a4d4d5">追加されるクラスの役割</h3><p>アニメーションはCSSで実装するため、追加されるクラスについて把握しておく必要があります。</p><pre><code>&lt;!--  スライドの基本クラスです。 --&gt;
&lt;div class="swiper-slide"&gt;&lt;/div&gt;

&lt;!-- 前のスライドに追加されるクラスです。前のスライドが無い場合は追加されません。 --&gt;
&lt;div class="swiper-slide swiper-slide-prev"&gt;&lt;/div&gt;

&lt;!-- 次のスライドに追加されるクラスです。次のスライドが無い場合は追加されません。 --&gt;
&lt;div class="swiper-slide swiper-slide-next"&gt;&lt;/div&gt;

&lt;!-- 表示中のスライドに追加されるクラスです。 --&gt;
&lt;div class="swiper-slide swiper-slide-active"&gt;&lt;/div&gt;</code></pre><p><br></p><h3 id="hf2db5fb692">調整を加えた箇所</h3><p><br>細かな解説は他の方が既に行われているため、ここでは行いません。<br>以下のブログを参考にさせていただきました。<br><a href="https://yumegori.com/zoom-up-slider20191204" target="_blank" rel="noopener noreferrer">背景画像をズームアップしながらフェードで切り替えるスライダー - Swiperで実装する方法</a><br></p><h4 id="hc1b4dd851a">前のスライドに独自のクラスを追加</h4><p>表示中のスライドに追加されるクラス <code>.swiper-slide-active</code> に加えて、<br>前回表示したスライドに <code>.swiper-slide-active-prev</code> というクラスを追加し、<br>ズームアウトのスタイルを定義しています。<br></p><pre><code>.swiper-slide-active-prev .swiper-bg img,
.swiper-slide-active .swiper-bg img {
    animation: zoomDown 10s linear 0s 1 normal both;
}</code></pre><p><br></p><h4 id="h28c6b6942f">スライドを連続で切替できないように</h4><p>一度切り替えた場合は、<code>swiper.speed</code> の値分の時間が経過しないと<br>次の切り替えができないよう、独自のCSSを追加しています。<br><br>連続で切り替えた場合だと、<u>拡大された画像が一気に縮小されてから次のスライドが表示される問題</u> が発生します。</p><pre><code>.swiper-button-prev.swiper-button-disabled-user,
.swiper-button-next.swiper-button-disabled-user {
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
}
.swiper-pagination-not-clickable {
    opacity: 0.5;
    pointer-events: none;
}</code></pre><p><br><code>slideChange</code>イベント実行時に以下のような処理が働くよう設定しています。</p><pre><code>on: {
  slideChange: () =&gt; {
    // 変数
    const self = swiper;
    const speed = self.params.speed;
    const navPrevButton = self.el.querySelector(".swiper-button-prev");
    const navNextButton = self.el.querySelector(".swiper-button-next");
    const navButtonDisabledUser = "swiper-button-disabled-user";

    // 処理
    _slidesChangeFirst();
    setTimeout(() =&gt; {
      for (let index = 0; index &lt; self.slides.length; index++) {
        self.slides[index].classList.remove("swiper-slide-active-prev");
      }
      _slidesChangeLast();
    }, speed);
    self.slides[self.previousIndex].classList.add("swiper-slide-active-prev");


    // スライド変更後に最初に行う処理
    function _slidesChangeFirst() {
      navPrevButton.classList.add(navButtonDisabledUser);
      navNextButton.classList.add(navButtonDisabledUser);
      self.pagination.el.classList.add("swiper-pagination-not-clickable");
    }
    // スライド変更後に最後に行う処理
    function _slidesChangeLast() {
      navPrevButton.classList.remove(navButtonDisabledUser);
      navNextButton.classList.remove(navButtonDisabledUser);
      self.pagination.el.classList.remove("swiper-pagination-not-clickable");
    }
  }
}</code></pre><p><br>解説は以上となります。</p>

<ul><li><a href="https://yumegori.com/zoom-up-slider20191204" target="_blank" rel="noopener noreferrer">背景画像をズームアップしながらフェードで切り替えるスライダー - Swiperで実装する方法</a></li></ul>

カテゴリーが「HTML/CSS」の記事

カテゴリ