ハンバーガーメニュー

CSSのみ・チェックボックス版

  • HTML
  • CSS

チェックボックスの :checked を利用して、JSなしで開閉を実現しています。

軽量で手軽に使えますが、スクリーンリーダーやキーボード操作などアクセシビリティ（A11y）には対応していません。学習用・デモ用におすすめです。

See the Pen ハンバーガーメニュー（CSSのみ・チェックボックス版） by 早稲田電子IT教育センター (@wit-it) on CodePen.

  1. 後続兄弟結合子『~』を使用した方法で、該当のチェックボックスにチェックが入った場合の弟妹要素が対象となる一般兄弟結合子セレクタを使った方法です。
  2. チェックが入った以降の、.menu__nav が対象となり動作します。
  3. 展開時のメニュー項目の整形は、.menu__nav 内で行っています。
  4. ハンバーガーメニューのボタンは、チェックボックスと連動する<label>要素内で ::before と ::after で生成しアニメーションさせています。

右からスライドイン

  • HTML
  • CSS
  • JS

ハンバーガーボタンをクリックすると右からスライドインするメニューです。

See the Pen Untitled by 早稲田電子IT教育センター (@wit-it) on CodePen.

  1. アニメーションやパーツの装飾はすべてCSSで行っています。
  2. ハンバーガーボタンをクリックすることで、is--active クラスのつけ外しを Javascript を使って制御しています。

フェードイン

  • HTML
  • CSS
  • JS

メニューがフェードイン・アウトで表示されるハンバーガーメニューです。メニューはフルスクリーン表示です。

See the Pen 【ハンバーガーメニュー】フェードイン by 早稲田電子IT教育センター (@wit-it) on CodePen.

  1. アニメーションやパーツの装飾はすべてCSSで行っています。
  2. ハンバーガーボタンをクリックすることで、is--active クラスのつけ外しを Javascript を使って制御しています。

ページ全体スライド

  • HTML
  • CSS

メニューが左からスライドし表示され、ページ表示エリアも全体が動くハンバーガーメニューです。メニューは縦並び表示です。

See the Pen ハンバーガーメニュー】CSSのみ・チェックボックス版 2 by 早稲田電子IT教育センター (@wit-it) on CodePen.

  1. アニメーションやパーツの装飾はすべてCSSで行っています。