CSS Advent Calendar 11日目は1週間ぶりにYuZakuroの担当です。
これまではフレームワークの紹介をしてきましたが、今回はより実践的な部分についての記事にしたいと思っています。
つくるもの
CSSのみでハンバーガーメニューを作ります。JSは使いません。
出来上がりはこんな感じです。
最低限のスタイルしか定義していないので、見た目は微妙かもしれませんが、実際に使うときには追加してもらえれば良いのではないかと思います。
仕組み
メニュー部分はz-indexを小さくすることで、wrapperに隠されるような形になっています。
ボタンがクリックされると、wrapperが右にスライドして、メニューが見える仕組みです
どうやってクリックに反応するか
おそらくこれが一番の肝です。よくある実装では、ボタンがクリックされるとJSでクラスを追加したりしますが、今回はCSSのみなのでこの方法は使えません。
これを解決する方法ですが、css3から追加されたchecked擬似クラスを使用します。これは、チェックボックスまたはラジオボタンにチェックが入っている時に適用されるものです。
つまり、チェックされたことを検出することで、クリックに反応しているわけです。
これで一応は解決しました。しかし、このままではチェックボックスを表示しなくてはいけなくなってしまいます。それでは困ります。そのため、チェックボックス自体はclipで消してしまって、ラベルをボタンが代わりに使用しています。
問題点とか
問題点かどうかは考え方によりますが、この方法だと、「メニュー以外をタップしたらメニューを閉じる」という実装ができません。そのような仕様の場合は、諦めてJSを使うのがよいでしょう。
おまけ
サンプルでは、@izumin5210 さんが1日目の記事で紹介していたfont-awesomeをボタンに使用してみました。