css3だけでアコーディオンメニューを作ってみた話 #css #css3

css3だけでアコーディオンメニューを作ってみた話 #css #css3

アコーディオンメニューといえば、なんとなくjavascriptを使わないと作れないイメージでした。が、今回ブログのテーマを一新する際に極力cssだけで表現できたら面白いなと思いまして、あえてcssだけで作ってみることにしました。パソコンから見ている人は、画面幅を縮小していくとこのブログのフッターがアコーディオンメニューに変わることがわかると思います。

ええ、それです。

youtubeに掲載してみたので、どんな感じか確認してみてください。

さて、こんな感じで動くアコーディオンメニューをcssだけで実装してみた試行錯誤をご覧くださいませ。

HTMLはこんな感じ

上のflex-container-rowやfitem-sm-1、fitem-me-1、fitem-la-1、fitem-xl-1というのは、このブログでのグリッドデザインのclass名です。

大切なのはそこじゃなくて、各sectionの中に<input type=”checkbox” id=”1″>と<label for=”1″>フッターメニュー1</label>がある点です。

CSSで見ていくとこんな感じ

要は<input>タグと<label>が連動することを利用して、表示と非表示を切り替えているわけです。<label>で連動させることができるので、<input>そのものはdisplay:noneで非表示にしています。

そして、input:not(:checked)のときにulを非表示に、input:checkedのときに表示するように切り替えています。それだけではただ、表示非表示を切り替えているだけなので、FontAwesomeを、同じくinput:not(:checked)とinput:checkedで回転するアニメーションをほどこすことでそれっぽい動作を与えています。

でも、こんなCSSを毎回書いていたら気が狂いそうなので、scssでまとめたのが下。

若干、すっきりしたくらいでゴチャゴチャしてる感はあまり変わってないと思っても仕方ないかなぁと。

今回のscssには、ブレイクポイントを設定してみたmixinを利用しています。

@eachと@ifを使って、どのサイズのときにwidthを指定するかでブレイクポイントを利用しました。

あとは勝手に作ったmixinとしては@include FontAwe(left,.25,block);ですかね。FontAwesomeを擬似要素として利用するときに、毎回書くのが面倒だったのでいっそmixinにしてしまえというノリで作った気がします。

これについては、また別記事で。

まとめ

今回、css3の可能性を探るというだけではなく、モバイル環境だとちょっとjavascriptの読み込みが遅くなるということも踏まえてcssだけでアコーディオンメニューを作ってみましたが、これはこれでなかなか面白い経験でした。

もっと他にもいろいろできそうな気がしたので、input:notの切り替えに可能性を感じた次第です。

286 views/total