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

ドロップダウンメニュークリックで開閉 css

この記事では、HTML、CSS、そして少しのJavaScriptを使用して、クリックで展開と縮小を行うことができるドロップダウンメニューの作成方法を解説します。

1. HTML構造

まずは、ドロップダウンメニューのHTML構造を作成します。 `

`、`` タグを使って、メニューのリスト構造を構築していきます。子メニューは、親メニューの `
` 要素の中にネストして配置します。
```
<nav>
  <ul class="menu">
    <li>
      <a href="#">メニュー1</a>
      <ul class="submenu">
        <li><a href="#">サブメニュー1-1</a></li>
        <li><a href="#">サブメニュー1-2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">メニュー2</a>
      <ul class="submenu">
        <li><a href="#">サブメニュー2-1</a></li>
        <li><a href="#">サブメニュー2-2</a></li>
      </ul>
    </li>
  </ul>
</nav>
    
```
2. CSSスタイル

次に、CSSを使ってドロップダウンメニューのスタイルを設定します。ここでは、メインメニューとサブメニューのスタイルを別々に定義します。ポイントは、デフォルトではサブメニューを非表示にしておくことです。 `display: none;` を使用して、初期状態ではサブメニューを表示しないようにします。
```
.menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu > li {
  display: inline-block;
  position: relative;
}

.menu > li > a {
  display: block;
  padding: 10px 20px;
  background-color: #eee;
  color: #333;
  text-decoration: none;
}

.submenu {
  display: none; /* 初期状態では非表示 */
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.submenu li {
  width: 150px; /* サブメニューの幅 */
}

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

.submenu a:hover {
  background-color: #f5f5f5;
}

/* アクティブ時のスタイル */
.menu li:hover > .submenu {
  display: block;
}
    
```
3. JavaScriptインタラクション

最後に、JavaScriptを使ってクリックでサブメニューを開閉する機能を実装します。ここでは、`addEventListener()` メソッドを使ってメニュー項目のクリックイベントを検知し、 `classList.toggle()` メソッドを使ってサブメニューに `active` クラスを追加/削除します。 `active` クラスが追加されるとサブメニューが表示され、削除されると非表示になります。
```
const menuItems = document.querySelectorAll('.menu > li > a');

menuItems.forEach(item => {
  item.addEventListener('click', (event) => {
    event.preventDefault(); // リンクのデフォルト動作を無効化
    const submenu = item.nextElementSibling;
    submenu.classList.toggle('active');
  });
});
    
```
4. サンプルコード

以下は、完成したHTML、CSS、JavaScriptのサンプルコードです。これらのコードをコピーして、実際に動作を確認してみてください。
```
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>クリックで開閉するドロップダウンメニューCSS</title>
    <style>
        /* 上記のCSS */
    </style>
</head>
<body>

    <nav>
        <ul class="menu">
          <li>
            <a href="#">メニュー1</a>
            <ul class="submenu">
              <li><a href="#">サブメニュー1-1</a></li>
              <li><a href="#">サブメニュー1-2</a></li>
            </ul>
          </li>
          <li>
            <a href="#">メニュー2</a>
            <ul class="submenu">
              <li><a href="#">サブメニュー2-1</a></li>
              <li><a href="#">サブメニュー2-2</a></li>
            </ul>
          </li>
        </ul>
      </nav>

    <script>
        // 上記のJavaScript
    </script>

</body>
</html>
    
```
関連情報
- <a href="https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener">EventTarget.addEventListener() - Web API | MDN</a>
- <a href="https://developer.mozilla.org/ja/docs/Web/API/Element/classList">Element.classList - Web API | MDN</a>
- <a href="https://developer.mozilla.org/ja/docs/Web/CSS/:hover">:hover - CSS: カスケーディングスタイルシート | MDN</a>
よくある質問

Q1: サブメニューの表示位置を調整するにはどうすればよいですか？

A1: CSSの `top`、`left`、`right`、`bottom` プロパティを使って調整します。例えば、サブメニューを親メニューの右側に表示したい場合は、`left: 100%;` と設定します。

Q2: クリックしたメニュー項目のスタイルを変更するにはどうすればよいですか？

A2: JavaScriptでクリックイベントを検知し、対象のメニュー項目にCSSクラスを追加/削除することでスタイルを変更できます。

Q3: モバイル端末でも動作するようにするにはどうすればよいですか？

A3: タッチイベントに対応させる必要があります。 JavaScriptで `touchstart` イベントなどを利用して、モバイル端末での操作に対応させましょう。
その他の参考記事:CSSドロップダウンメニュー

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

1. HTML構造

2. CSSスタイル

3. JavaScriptインタラクション

4. サンプルコード

関連情報

よくある質問

Q1: サブメニューの表示位置を調整するにはどうすればよいですか？

Q2: クリックしたメニュー項目のスタイルを変更するにはどうすればよいですか？

Q3: モバイル端末でも動作するようにするにはどうすればよいですか？