Zenn
📝

CCSのみでメニュー表示切替

2024/12/26に公開1件
CSS
HTML
JavaScript
tech

はじめに

ちゃんと知っておきたい人のHTML/CSS完全入門でHTML／CSSの学習で最も良いとされている実践的な勉強方法は「模写」であると書いてあったので、Writeー書くためのテーマを模写し始めたが、メニューの表示でいきなり詰まってしまいました。HTMLとCSSの本だから、JavaScriptを使わずにできるのかと思い調べたらできました。
メニュー切り替え

CCSのみで切り替える流れ

① チェックボックスを非表示にして利用

<input type="checkbox" id="menu-toggle" class="menu-button" />

② Labelのfor属性でクリックしたときにチェックボックスと連動する

<label for="menu-toggle" class="menu-label">☰ メニュー</label>

③ チェックボックスが":checked"のときは"~"で同階層の後にあるmenuクラスを指定し、Displayオプションで.menuを表示

.menu-button:checked ~ .menu {
        display: block;/*表示しない*/
  }

④ チェックボックスが":checked"ではないときは"、その前にdisplay:noneに設定したあるので表示しない

.menu {
        display: none;/*表示する*/
 }

CCSのみで切り替えるコード全体

<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSSのみのメニュー表示切替</title>
    <style>
      html.body{
        font-size: large;
      }
      /*check buttonは機能だけ残して非表示*/
      .menu-button {
        display: none;
      }
      /* labelがボタン代わりになる */
      .menu-label {
        display: block;
        background-color: #333;
        color: #fff;
        padding: 10px;
        text-align: right;
        cursor: pointer;
      }

      /* メニューのスタイル */
      .menu {
        background-color: #f4f4f4;
        padding: 20px;
        position: absolute;
        top: 50px;
        right: 0;
        width: 200px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        display: none;/*表示しない*/
      }

      /* チェックされた場合にメニューを表示 */
      .menu-button:checked ~ .menu {
        display: block;/*表示する*/
      }
    </style>
  </head>
  <body>
    <!-- メニューボタン -->
    <input type="checkbox" id="menu-toggle" class="menu-button" />
    <label for="menu-toggle" class="menu-label">☰ メニュー</label>

    <!-- メニュー内容 -->
    <nav class="menu">
      <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">カスタマイズ</a></li>
        <li><a href="#">ページ</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
  </body>
</html>

JavaScriptとCSSで切り替える流れ

①ページを開いたとき、bodyのclass属性にmenu-closeがあり、menu-openはない状態

<body> 
<button class="menu-button">☰ メニュー</button>

</body>

②ボタンをクリックするたびに、menu-openが割り当たる

<script>
      // ボタンとbody要素を取得
      const button = document.querySelector(".menu-button");
      const body = document.body;

      // ボタンがクリックされたときにクラスを切り替える
      button.addEventListener("click", () => {
        // ②
        body.classList.toggle("menu-open");
      });
 </script>

③bodyにmenu-openがあるときはdisplay: block;で表示する

body.menu-open .menu {
       display: block;/*表示する*/
}

④bodyにmenu-openがないときはその前にdisplay:noneに設定したあるので表示しない

.menu {
        display: none;/*表示しない*/
}

JavaScriptとCSSで切り替えるコード全体

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScriptでメニュー表示切替</title>
    <style>
      html.body{
        font-size: large;
      }
      /* ボタンスタイル */
      .menu-button {
        width: 100%;
        position: fixed;
        background: #333;
        color: #fff;
        border: none;
        padding: 10px;
        text-align: right;
        cursor: pointer;
      }

      /* メニューのスタイル */
      .menu {
        background-color: #f4f4f4;
        padding: 20px;
        position: absolute;
        top: 50px;
        right: 0;
        width: 200px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        display: none;/*④*/
      }

      /* bodyのclassにmenu-openがあるときにメニューを表示 */
      body.menu-open .menu {
        display: block;/*③*/
      }
    </style>
  </head>
  <body>
    <!-- トグルボタン -->
    <button class="menu-button">☰ メニュー</button>

    <!-- メニュー -->
    <nav class="menu">
      <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">カスタマイズ</a></li>
        <li><a href="#">ページ</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>

    <script>
      // ボタンとbody要素を取得
      const button = document.querySelector(".menu-button");
      const body = document.body;

      // ボタンがクリックされたときにクラスを切り替える
      button.addEventListener("click", () => {
        body.classList.toggle("menu-open");
      });
    </script>
  </body>
</html>

まとめ

Writeー書くためのテーマを確認してみると、JavaScriptとCSSで切り替える方法だった。こちらの方が分かりやすいし後々拡張しやすいので、こちらを使用していこうと思いました。

Discussion