toggle(ドロップダウン)メニューをcssだけで作る。

モバイルファースト時代に使えるcssと言えば、toggle(ドロップダウン)メニュー。
普段折りたたまれている状態なので、最初に表示される要素が少なく済みます。
前回の記事でも書いたように、
モバイルファースト時代は極力スクロールを抑えたいので、軽量に出来るcssで出来る工夫はどんどん盛り込みましょう。

toggleメニューとは？(jQuery)

toggleメニューがどんなものかというと、jQueryで実装するとこんな感じ。(アコーディオンメニューとかともいうらしい。)

See the Pen plain toggle menu by blue (@aoiBlue) on CodePen.0

<dl>
<dt>地方名</dt>
<dd>都道府県名</dd>
<dd>都道府県名</dd>
</dl>

こう並べるべきですが、toggleClassでかつ楽にやろうと思うと都道府県名はdivか何かで括っちゃった方が楽。
列挙しているので申し訳程度にul使ったりしてます。
これはこれで正しいと思う。

IEとか使っていると顕著ですが、動きがとてもカクカク。
FireFoxとかChromeとか使っているとぬるぬるで分かりにくいかも。

cssだけでtoggleメニュー

cssでクリックされたことを検知する方法は、inputタグしか現状ではありません。(2018/08/11時点)
なので、この記事の方法を使って、
色々なパターンを実装します。

全メニューを開いた状態にできる。

都道府県表示などでは適さない、
全メニューを開いた状態に出来るメニューです。
検索ボックス等、ユーザーが最後に全体を確認したい場合などに使うのがよさそう。

See the Pen css toggle menu checkbox by blue (@aoiBlue) on CodePen.0

一か所しか開いた状態にできない。

都道府県等を表示する場合、
一つの地域の下の都道府県以外を表示する必要はあまりないと思います。
なので、radioボタンのような、一個選択している状態だと、
同じグループ上の他の選択が解除される仕組みを使って以下のように実装します。

See the Pen css toggle menu radio by blue (@aoiBlue) on CodePen.0

動きを付ける

今の状態だとパッパッと表示・非表示を行うので、少し味気ない。
というわけで、動きを付けてちょっとそれっぽくします。
ただし、
display: none;　から display: block; に変更する場合、transitionは効かないので、
少しやり方を変えます。

See the Pen css toggle menu radio animation by blue (@aoiBlue) on CodePen.0

display: block; -> none; の代わりに
width: 100& -> 0; に変更します。

後はお好きなtransitionで上から出てくる式、左から出てくる式等を指定してあげればOK。

まとめ

cssを使って色々なtoggleメニューを実装しました。
jQueryと違って、記述は長くなりますが、動きや読み込み等は圧倒的にこちらの方が快適で早いです。
スマートフォンでユーザーに快適かつスピーディな経験を提供できるように、
是非積極的にCSSを使っていきましょう。