【CSS】ハンバーガーメニューボタンの作り方

CSSでハンバーガーメニューを作る方法を解説します。

【CSS】ハンバーガーメニューの作り方

巷では『ハンバーガーメニューはオワコン!』みたいな声も聞こえたりしますが、私の観測範囲だとSPのメニュー開閉でハンバーガーボタン以外はほとんど見たことないので、まだまだこれからも使い続けるんじゃないかなーという所感です。

ハンバーガーボタンの代替案とかあれば教えてください!

さて、さっそくですが私のハンバーガーボタンはこんな感じです↓

See the Pen Hamburger button by nkmr (@nkmr_whoo) on CodePen.

カンタンに解説しますと、3本のバーを包む div でボタン自体の大きさを指定し、position:relative を当てます。

次に div で包んだ3本の線を position:absolute で位置を指定します。

これだけです。

アクセシビリティ的には button で実装した方が好ましいけど…

セマンティックなHTMLを書く上でリンクではないクリッカブルな要素は本来 buttonタグ で実装すべきだと思うのですが、buttonタグを用いた場合はブラウザ標準のスタイルが当てられます。

で、案件でブラウザ標準のスタイルがそのまま使えるハンバーガーメニューのデザインなんてまずないので、否応なしにリセットせざるを得ないのですが、その場合 outline: none; を当てなくてはなりません。

この outline というCSSのプロパティですが、こちらを none にすることがアクセシビリティ的によろしくないので、(詳しくは↓)

3本バーを包む div に

  • フォーカスを当てるための tabindex属性を付与
  • スクリーンリーダー対応策で role=”button” を指定

しております。

CSS設計を学びたいならダントツで分かりやすくてオススメ▼