CSSだけでアコーディオン×ハンバーガーメニューを作る（コピペ可）

CSSだけでアコーディオン×ハンバーガーメニューを作る

スマホ画面はヘッダーが小さくなり
押しにくいボタンになることが多いです。

そこでハンバーガーメニュー×アコーディオンを
使用してユーザー操作をしやすくしてあげましょう

ちなみにハンバーガーメニューとは以下のようなものです。

ハンバーガーのような見た目のアイコンを
押すと画面外からニュルッとメニューが出てきます。
JSなどを使用してリッチに作ることも可能ですが
ここではCSSのみで実装します。

アコーディオンは以下の動作です。

ここでは＋ボタンを押すことで親要素が広がって子要素が出てきます。

では実際のコードを見てみましょう

index.html

 <div class="humb-menu">
    <input id="gnav-input" type="checkbox">
    <label for="gnav-input" id="gnav-btn">
      <div i class="fas fa-bars"></div>
    </label>

    <div id="gnav-content">
      <!-- タイトルを記載ください -->
      <div class="humb-menu__title">title</div>

      <label for="label1">
        <!-- 親要素の名前 -->
        <p>label</p><p>＋</p>
      </label>
      <input type="checkbox" id="label1" class="cssacc" />
      <div class="accshow">
        <!-- 子要素の名前 -->
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
      </div>

      <label for="label2">
        <p>label</p><p>＋</p>
      </label>
      <input type="checkbox" id="label2" class="cssacc" />
      <div class="accshow">
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
      </div>

      <label for="label3">
        <p>label</p><p>＋</p>
      </label>
      <input type="checkbox" id="label3" class="cssacc" />
      <div class="accshow">
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
      </div>
    </div>
  </div>

labelが親要素となりcontent部分が子要素となります。
必要に応じてpタグをaタグに変更してリンクなどにして使用ください。
ハンバーガーボタン部分はfontawsomeを使用しています。

index.css

#gnav-btn {
    color: gray;
    padding: 10px;
    font-size: 30px;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 100;
    background-color: white;
    border: solid 1px #d1caca;
    border-radius: 3px;
  }
  #gnav-input:checked ~ #gnav-content {
    top: 0;
  }
  #gnav-content {
    position: fixed;
    top: -100%;
    left: 0;
    z-index: 10;
    transition: 0.3s;
    width: 100%;
  }
  .humb-menu__title {
    padding: 1.5rem;
  }
  .humb-menu label {
    display: flex;
    justify-content: space-between;
    padding: 1.5rem;
    cursor: pointer;
    border-top: 0.5px solid #c7c5c5;
  }
  .humb-menu input {
    display: none;
  }
  .humb-menu .accshow {
    height: 0;
    overflow: hidden;
  }
  .humb-menu .accshow p {
    padding: 1.5rem;
  }
  .humb-menu .cssacc:checked + .accshow {
    height: auto;
  }
} 

コードの記述量をへらすため必要最小限の記載にしています。
必要に応じて装飾を加えてください。

動作としてはhtmlで非表示のチェックボックスを設置し
チェックの有無で動作するシンプルな内容です。

コピペすると以下の動作になります。