ハンバーガーメニューヘッダー
「ハンバーガーメニューヘッダー」は、画面幅に応じて 横並びのナビと三本線アイコンを切り替えるレスポンシブヘッダー です。ヘッダーには position:sticky が当たっており、スクロールしても上部に固定されます。
このパーツの使いどころと実装ポイント
「ハンバーガーメニューヘッダー」は、画面幅に応じて横並びのナビと三本線アイコンを切り替えるレスポンシブヘッダーです。ヘッダーには position:sticky が当たっており、スクロールしても上部に固定されます。広い画面ではメニューを横並びで見せ、狭い画面では hh__toggle ボタンを表示し、タップでナビを開閉します。
向いている場面
- コーポレートサイトやサービスサイトの共通ヘッダー
- ページ数が中規模のメディア・ブログ
- スマホ流入が多く、画面を広く使いたいサイト
ロゴ文字やメニュー項目はそのまま差し替えるだけで使えます。背景色や文字色を変えれば、明るいトーンのサイトにもなじみます。固定ヘッダーは便利ですが、高さの分だけ本文が隠れることがあるので、アンカーリンク先に余白を持たせる配慮があると親切です。
実装上の注意
開閉ボタンには aria-expanded と aria-controls を設定し、状態が支援技術に伝わるようにしています。クリックのたびに aria-expanded が true と false で切り替わる点は、スクリーンリーダー対応の要です。キーボードだけでも開閉・項目移動ができるか、フォーカスの動きも確認しておきましょう。
このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。
よくある質問
メニューはどの画面幅で切り替わりますか
CSSのメディアクエリで指定したブレークポイントを境に、横並びのナビとハンバーガーアイコンが切り替わります。サイトのデザインに合わせてその幅を変更すれば、タブレットを含めるかどうかなど切り替えのタイミングを調整できます。
ヘッダーが上部に固定されるのを解除できますか
解除できます。ヘッダーに当たっている position:sticky の指定を外せば、スクロールに合わせて一緒に流れる通常のヘッダーになります。固定したままなら、本文がヘッダー下に隠れないよう余白の調整を忘れないでください。