JavaScript不要のハンバーガーメニュー｜HTMLとCSSだけでスマホ対応ナビを作る方法

10

Views

JavaScript不要のハンバーガーメニュー

「できるだけコードをシンプルにしたい」「JavaScriptなしでメニューを切り替えたい」そんな方におすすめなのが、CSSだけで作れるハンバーガーメニューです。今回は、HTMLとCSSだけで完結する実装方法を紹介します。

HTML構造を用意する

チェックボックスとラベルを活用して、クリック時の状態を制御します。

<input type="checkbox" id="menu-toggle" hidden>
<label for="menu-toggle" class="hamburger">
  <span></span>
  <span></span>
  <span></span>
</label>

<nav class="nav-menu">
  <ul>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">サービス</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</nav>

CSSで表示・非表示を切り替える

ラベルがクリックされるとチェック状態が変わり、それに応じてメニューの表示を切り替えます。

.hamburger {
  display: flex;
  flex-direction: column;
  width: 30px;
  height: 22px;
  justify-content: space-between;
  cursor: pointer;
}
.hamburger span {
  height: 4px;
  background: #333;
  border-radius: 2px;
}
.nav-menu {
  display: none;
}
#menu-toggle:checked + .hamburger + .nav-menu {
  display: block;
}

レスポンシブ対応

PC画面では常にメニューを表示し、スマホではハンバーガーに切り替えます。

@media (min-width: 768px) {
  .hamburger {
    display: none;
  }
  .nav-menu {
    display: block !important;
  }
}

初心者が気をつけたいポイント

  • labelとinputのid・forの対応：一致していないとクリックが効かない
  • 選択状態を使うため、必ずinputはhiddenで保持：画面に表示しないよう注意
  • +セレクタの順番：input + label + navの順でないと動作しません

おわりに

JavaScriptなしでも、CSSの工夫でメニュー開閉を実現できます。アニメーションやスライド効果を加えれば、より洗練された印象に。次回はCSSトランジションやtransformを使ったアニメーションバージョンも紹介予定です！

関連記事