2017年01月30日

JavaScript無しでハンバーガーメニューを実装してみた(けど、恐らく使うべきではない)

諸事情でJavaScript無しでハンバーガーメニューを実装する必要が出た。つまり、メニュー表示用アイコンを準備し、それがクリックされた時にメニューを表示するという実装。JS無しですってよ奥様。いやいや無理だろ。

ダメ元で調べてみると……いやぁ何事もググってみるもので、CSSのみでマウスクリックを検知し、ページに変化を起こさせるサンプルが見つかった。

実際に動作するサンプルは此方。「CLICK ME!」と書かれた背景色が赤の要素をクリックする度に、背景色が青、赤、青……と変化する。

不可視のチェックボックスを作る事、それとクリック時に変化を起こさせる要素を<label>要素で関連付ける事がミソで、チェックボックスのON/OFFを:checked擬似クラスで判断し、~セレクタとの合わせ技で適用するスタイルを切り替える。

これを応用すれば、ハンバーガーメニューも実装できそうだよね。という訳で作ってみたのが以下。

動作するサンプルは此方。「[BUTTON]」部分をクリックするとメニューの内容が表示される。メニュー以外の部分を暗くするbackdrop付き。うん、期待通りの挙動になっているようだ。

しかし、暫く考えて、お蔵入りにする事にした。

理由は、アクセシビリティ。どう考えても、非マウス(及び、非タッチスクリーン)環境でマトモに動作するとは思えない。

webの良い所は、デフォルトでアクセサビリティに配慮されている点だ(今回のようなhackや、JSで中途半端に凝った事をしようとしなければ)。この精神は重視すべきだ。「マウスもタッチスクリーンも使えない環境でweb見てる奴なんて殆ど居ないだろ」「障害者? 無視無視! だって殆ど居ないし」と考える事は可能だが、そうやって考えずに作った物が、ある日突然、私自身に牙を剥かないとも限らない。明日、明後日、自分の命が尽きるまでの何処かで、事故に在って障害を得る事は有り得ないなんて、一体誰に断言できるだろう? そういう目に会ってから後悔しても遅いのである。アクセシビリティについて僅か5秒でも考える開発者が1人でも増えれば、それだけ万一の時に自分が困る可能性を減らせるというものだ。

因みに、諸事情の方は、こんな苦労をしなくてもハンバーガーメニューの実装は可能だった事が後々判明した。正直、これもどうかとは思うのだが……

posted by 天井冴太 at 00:32 | Comment(0) | TrackBack(0) | Hack | このブログの読者になる | 更新情報をチェックする
投票お願いします 人気blogランキング - 投票する
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

コメント欄右下をドラッグ&ドロップすると、コメント欄の拡大縮小が出来ます。
認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/446448443

この記事へのトラックバック