こんにちは、ゆんつです。
企業のWEBサイトでは「Q&A」のページをよく見かけます。
Q&Aのページでは質問部分をクリック又はタッチしするとスーッと回答が現れ、再びタッチすると回答が閉じるというというものが多いようです。
そのように、親メニューをタッチすると子メニューが開くメニューを「アコーディオンメニュー」と言います。
See the Pen
accordion1 by konpure (@yuntu)
on CodePen.
このアコーディオンメニュー。
子メニューが閉じているときは親メニューにはプラスのマークがついていて、子メニューが開くとプラスからマイナスに切り替わるものをよく見ます。
これらのプラスマイナスは、Font Awsomeなどを使って表現することもできますが、HTMLとCSSとjQueryで作ることも出来ます。
今日は
について書きたいと思います。
疑似要素とjQueryを使う
閉じてる状態のときは「＋」、開いている状態のときは「－」にしたい場合、疑似要素とjQueryを使うと簡単に実現できます。
まずプラスマイナスを設定したい要素に、疑似要素のbeforeとafterで全く同じ横線を2つ作ります。
そして、どちらか一方の線だけ90度回転させるとプラスマークになります！
簡単！
親メニューのクリックをきっかけにしてプラスとマイナスを切り替えるには、回転が0℃になるクラスを作成し、jQueryの「toggleClass」使ってどちらか一方の疑似要素にクリックのたびにそのクラスがついたり外れたりするようにしてあげれば良いだけです。
具体的に作ってみます。
See the Pen
plus→minus by konpure (@yuntu)
on CodePen.
解りやすくするために、2本の棒の色は別々にしてあります。
青いボタンをクリックすると、そのたびにプラスとマイナスが切り替わっていることと思います。
あとは、これをアコーディオンメニュー（クリックすると開くメニュー）の親メニューの端っこに配置し、jQueryのslideToggleと組み合わせてアコーディオンの開閉と合わせることで子メニューが閉じているときはプラス、開いているときはマイナスになるアコーディオンメニューを作ることが出来ます。
See the Pen
accordion2 by konpure (@yuntu)
on CodePen.
簡単だったね
それでは、またー。
コメント