当ブログでもハンバーガーボタンの作り方や手軽に作れるハンバーガーボタンジェネレーターを掲載していますが、こちらはjQueryを使ったものになります。しかし、jQuery(Javascript)を使わずCSSだけでハンバーガーボタンを作るやり方もあります。

しかし、このCSSのみのやり方自分はあまり好きではありません。というのも、（全てを確認したわけではありませんが）CSSのみでやる場合、「チェックボックス」の機能を使ってボタンとするからです。仕組みとしては、ボタンが押されたかどうかを、チェックボックスにチェックが入っているか（:checkの擬似クラス）で判定をしています。

ハンバーガーボタンは「ボタン」

何故好きではないかと言うと、それがセマンティックではないからです。ハンバーガーボタンはその名前の通りボタンであって、チェックボックスではないのです。チェックボックスはクリックを判定するものではなく、項目へのチェックを確認するものです。

これが、「メニューを表示する」というようなチェック項目があって、それにチェックを入れるとメニューが表示されるような構成であればチェックボックスの使用は妥当だと思います。

しかし、多くの場合、チェックボックスの非表示したり、<label>タグでこねくりまわしたりして三本線のアイコンと結びつけていますが、それが本来の機能とは思えません。

複雑なHTMLとCSS

HTMLとCSSだけなので、jQueryの知識がなくても使えるのがこのCSSポイントだと思いますが、HTMLとCSSは複雑です。疑似要素や疑似クラス、ラベルタグを使ってある意味CSSハックのような要領で記述されています。

素直にjQueryを使うとjQuery自体は5行程度で済みますし、三本線のアイコンも画像などを使えばHTML、CSSともに数行で記述できます。（当サイトのハンバーガーボタンは×になるアニメーションを入れているので少し複雑です。）

そして、コピペでいけるのが強みですが、カスタマイズしようとすると辛そうです。コピペなのでそもそもカスタマイズを前提としないのかもしれませんが。。。

適切なタグ...?

同様に<a>タグを使ったものも、疑問に思っています。これに関してはセマンティックとして正しいのか悩ましいです。ハンバーガーボタンを押してナビゲーションを表示することが「アンカー」なのかは少し疑問が残ります。

なので、ハンバーガーボタンのタグにはその名前の通りに<button>タグを使っています。もちろん、きちんと動くのだから実装については問わないという意見もあるでしょう。これがSEO的に悪いかといえば、たいしたマイナスにはならないでしょう。

影響があるとすれば、アクセシビリティや読み上げブラウザなどでしょう。不適切なインタラクションやユーザに誤解を与えるかもしれません。そうした要件が含まれていないのであれば大きな影響はないと思います。

結局は好みの問題かもしれない

自分はHTML原理主義的です。結局はどう実装しようが、アクセシビリティを除いて影響がないのであれば好みや設計思想によるものなのかもしれません。ただ、私はハンバーガーボタンはボタンだと思うので、<button>タグで実装してます。