クリックで開閉するドロップダウンメニューの作り方

サイトのデザインで表示スペースが限られている場合に役に立つのがドロップダウンメニューです。

PC上でのドロップダウンメニューはホバーした時（マウスを乗せた時）に表示される仕様が多いですが、モバイルでは期待通りに動かない場合があります。

モバイルではタッチイベントが標準なので、クリックで開閉するドロップダウンメニューの方がユーザビリティに優れています。

この記事ではクリックで開閉するドロップダウンメニューの作り方を紹介します。

ナビゲーションなどで有用。CSS＋HTMLだけで作る横並び、縦並びのドロップダウンメニューはこちらの記事です。

jQueryで作るクリックで開閉するドロップダウンメニュー

クリックでメニューを閉じたり開いたりするにはjQueryを使う方法が一般的です。jQueryを使う機会は少なくなっていますが、簡単に導入できるので覚えておくと役に立つでしょう。

See the Pen クリックで開閉ドロップダウンメニュー by mixtaro (@mixtaro) on CodePen.

<nav class="nav">
  <ul class="menu">
    <li><a href="#">Menu 1</a></li>
    <li class="has-submenu">
      <a href="#">Menu 2</a>
      <ul class="submenu">
        <li><a href="#">Submenu 2-1</a></li>
        <li><a href="#">Submenu 2-2</a></li>
        <li><a href="#">Submenu 2-3</a></li>
      </ul>
    </li>
<!-- 以下　省略 -->
  </ul>
</nav>

メニュー部分のCSSは以下のようになります。jQueryで表示非表示を制御するので、サブメニューは初期状態で非表示にしておきます。

/* サブメニューは初期状態で非表示 */
.menu ul {
  display: none;
}
/* サブメニューが表示されているときのスタイル */
.menu li.active > ul {
  display: block;
  position:absolute;
  top:100%;
  left:0;
  width: 100%;
  li{
    width:100%;
    white-space: nowrap;
  }
}

jQueryは以下の通りです。

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
 $(document).ready(function() {
    $('.has-submenu > a').click(function(e) {
      e.preventDefault();　//通常のリンククリックによる画面遷移
      $(this).parent().toggleClass('active');
    });
  });
<script>

.has-submenu直下にある<a>要素がクリックされたら、その親要素にあたる.has-submenuに.activeクラスを付与します。

CSSのみで作るクリックで開閉するドロップダウンメニュー

CSSのみでも、Checkboxを使って同じような動作を実装することができます。

See the Pen クリックで開閉ドロップダウンメニュー checkbox by mixtaro (@mixtaro) on CodePen.

checkboxとlabel要素使ってクリックできる領域を作ります。:checked擬似クラスでチェックボックスがチェックされているかチェックされていないかに応じてサブメニューを表示しています。

.dropdown input[type="checkbox"] {
  display: none;
}

.dropdown label {
  cursor: pointer;
}

.dropdown .submenu {
  display: none;
}

.dropdown input[type="checkbox"]:checked + label + .submenu {
  display: block;
}

CSSの隣接セレクタを使った表現方法は以下の記事でまとめています。

以上、「クリックで開閉するドロップダウンメニューの作り方」、jQueryを使う方法、CSSのみで作る方法を紹介しました。

ドロップダウンメニューだけでなくクリックで開閉して新たな情報を表示するのは、よく使う機能です。

使い方をマスターしてモバイルフレンドリーなサイト作りを目指しましょう！