JavaScriptが時の人になって暫く経ちましたが、まだまだ喧々諤々やっているよう（に見える）ので、なるべく近づかないで済ませる方法を模索しています。
その方が軽いはずだしゆーざーふれんどりーだと思っています。（JS自体は好きです。いつもお世話になっております。ハンバーガーメニューがゆーざーふれんどりーかどうかとか難しい話は振らないでください。）
この数年、Sassを導入して、命名規則を変えてから、とうとう、ようやく、ねんがんの、CSSのモジュール化が出来るようになってきたので、ちまちま書き溜めて行こうかと思っています。
ヒトサマに使ってもらえるようなソースでは全然無いのですが、人目に晒してブラッシュアップしていくのが良いかなと思うので。
今日は良くあるハンバーガーメニューをCSSだけで作るというのを書いておこうと思います。
方法は色々とあって、たくさんソースも落ちていますが、アテクシ流の書き方をメモしておきたいと思います。
（タイトルのライブラリ化とは別になんかnpmとかで呼び出せるとかそんなんじゃなくて、コピペで済むぐらいのフワッとした意味なので怒らないでください。）
大体の仕組みとしてはcheckboxでオンオフの判別をして、transformとtransitionでアニメーションを作ります。
~（チルダ）で要素を紐付けられるようにするのが肝。
iOSでは動作確認済み。Chrome系も大丈夫なはず。
CSSと言っていますが、SASSで書いています。
PostCSSとかnextcssとか試したいけれどまだ手を出せていません。
あと命名規則は最近SMACSSとBEMをベースに、
prefix-block__element–modifier（ex. l-global__header）
みたいな書き方するようにしてて気持ち悪かったらごめんなさい。
m-はモジュール、l-はレイアウトです。
で、もいっこのポイントとしては、ハンバーガーメニューではほぼ無いと思うんですが、後々やっぱりJS使うかーとかにもなりがちなので、動きの部分を別に書くようにしています。これオススメ。
ソース
サイトのヘッダーとセットになるケースが殆どだと思うので、.m-header も盛り込んで良いのかも。
あと、変数は全部configに纏めちゃうのが良いかなあ。今日の時点ではこんな感じです。今後のアップデートはGistに。
※ このまんまじゃ動きません。仕組みが知りたい方は参照URLが分かりやすいと思うのでどうぞ。
