jquery ドロップダウンメニュー クリック

jQueryで実装！クリックで開閉するドロワーメニュー(ドロップダウンメニュー)の作り方

説明

この記事では、jQueryを使ってクリックで開閉するシンプルなドロワーメニュー（ドロップダウンメニュー）を実装する方法を分かりやすく解説します。HTML、CSS、jQueryの基本的な知識があれば、どなたでも簡単に実装できます。

ドロワーメニュー（ドロップダウンメニュー）とは？

ドロワーメニューは、ハンバーガーメニューやアコーディオンメニューとも呼ばれ、限られたスペースを有効活用するために使われるUI要素です。クリックすると隠れていたメニュー項目が表示される仕組みで、多くのウェブサイトで見られます。

jQueryを使ったドロワーメニューの実装手順

本記事では、以下の3つのステップでドロワーメニューを実装していきます。

1. HTMLの記述

まずは、ドロワーメニューのHTML構造を作成します。今回は、ul要素とli要素を使ってシンプルなメニューリストを作成します。

主な内容:

  • ul要素に`dropdown-menu`クラスを追加
  • li要素に`menu-item`クラスを追加
  • a要素に`#`とメニュー項目名を追加
  • 非表示にするメニュー項目をli要素で囲み、`dropdown-content`クラスを追加

<ul class="dropdown-menu">
  <li class="menu-item"><a href="#">メニュー1</a></li>
  <li class="menu-item"><a href="#">メニュー2</a></li>
  <li class="menu-item">
    <a href="#">メニュー3</a>
    <ul class="dropdown-content">
      <li><a href="#">サブメニュー1</a></li>
      <li><a href="#">サブメニュー2</a></li>
      <li><a href="#">サブメニュー3</a></li>
    </ul>
  </li>
</ul>

2. CSSの記述

次に、作成したHTMLにCSSを適用して、ドロワーメニューの見た目を整えます。

主な内容:

  • `dropdown-menu`クラスのリストスタイル、表示位置、幅などを指定
  • `menu-item`クラスのホバー時の背景色などを指定
  • `dropdown-content`クラスの表示状態を`display: none;`で非表示に設定
  • `dropdown-content`クラスのホバー時の表示状態を`display: block;`で表示に設定

.dropdown-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #f0f0f0;
}

.menu-item {
  position: relative;
}

.menu-item a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}

.menu-item:hover > a {
  background-color: #ddd;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #f0f0f0;
  width: 200px;
}

.dropdown-content li {
  width: 100%;
}

.menu-item:hover > .dropdown-content {
  display: block;
}

3. jQueryの記述

最後に、jQueryを使ってドロワーメニューにクリック時の開閉動作を追加します。

主な内容:

  • `dropdown-menu`クラスをクリックしたときの動作を定義
  • `dropdown-content`クラスを`slideToggle()`メソッドを使って開閉
  • `event.stopPropagation()`メソッドを使って、クリックイベントの伝播を制御

$(document).ready(function(){
  $('.dropdown-menu > .menu-item > a').click(function(event){
    event.preventDefault(); // リンクのデフォルト動作を無効化
    $(this).siblings('.dropdown-content').slideToggle();
    event.stopPropagation(); // クリックイベントの伝播を停止
  });
});

まとめ

この記事では、jQueryを使ってクリックで開閉するドロワーメニューの実装方法を紹介しました。今回紹介したコードを参考に、ご自身のウェブサイトに最適なドロワーメニューを実装してみてください。

関連情報

よくある質問

Q1: ドロワーメニューが開いたままになる

A1: event.stopPropagation() が正しく設定されているか確認してください。このメソッドがない場合、親要素にもクリックイベントが伝播し、メニューが閉じてしまう可能性があります。

Q2: ドロワーメニューの表示速度を調整したい

A2: slideToggle() メソッドに引数を渡すことで速度を調整できます。例：slideToggle('slow')

Q3: モバイル端末でドロワーメニューが正しく動作しない

A3: タッチイベントとマウスイベントの両方に対応する必要があるかもしれません。touchstart イベントなども利用して、モバイル端末でも正しく動作するように調整してください。

その他の参考記事:jquery dropdownplain