バーガーメニューのHTML: コード例と方法の解説

2024-02-18 04:20 HTML バーガーメニュー コーディング

方法1: チェックボックスとラベルを使用する方法

HTMLのコード例:

<!DOCTYPE html>
<html>
<head>
  <style>
    /* スタイルの定義 */
    .menu-toggle {
      display: none;
    }
    .menu-toggle:checked + .menu {
      display: block;
    }
    .menu {
      display: none;
    }
  </style>
</head>
<body>
  <input type="checkbox" class="menu-toggle" id="menu-toggle">
  <label for="menu-toggle">&#9776; メニュー</label>
  <ul class="menu">
    <li><a href="#">ホーム</a></li>
    <li><a href="#">サービス</a></li>
    <li><a href="#">製品</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</body>
</html>

この方法では、チェックボックスとラベルを使用してバーガーメニューを作成します。CSSのスタイル定義によって、チェックボックスがチェックされるとメニューが表示されるようになります。

方法2: JavaScriptを使用する方法

HTMLのコード例:

<!DOCTYPE html>
<html>
<head>
  <script>
    function toggleMenu() {
      var menu = document.getElementById("menu");
      menu.classList.toggle("show");
    }
  </script>
  <style>
    /* スタイルの定義 */
    .menu {
      display: none;
    }
    .show {
      display: block;
    }
  </style>
</head>
<body>
  <button onclick="toggleMenu()">&#9776; メニュー</button>
  <ul class="menu" id="menu">
    <li><a href="#">ホーム</a></li>
    <li><a href="#">サービス</a></li>
    <li><a href="#">製品</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</body>
</html>

この方法では、JavaScriptを使用してメニューの表示・非表示を切り替えます。ボタンをクリックすると、メニューの表示状態が切り替わります。

これらの方法を使えば、バーガーメニューを実装することができます。ウェブサイトのレスポンシブデザインにおいて、画面幅が狭いデバイスではメニューをコンパクトに表示することが求められるため、バーガーメニューは便利な手法です。ぜひ試してみてください！