【Web】CSSだけで開閉式メニューを作ってみる

「css 開閉式メニュー」で検索すると、inputタグを用いた方法が掲載された記事が多数ヒットする。
ボタン部分にinputタグを配置することでメニューがクリックされた時に下層メニューを開くようにするという手法のようだ。
通常のCSSは高さを0にしておき、CSSで:checkedを指定してクリックされた時の表示範囲を広げる事で下層メニューが開くようになる。
でも、これを見た時に、なんかそれって違うんじゃないかなぁと思った。
メニューでinputタグ使うのって、私はちょっと嫌で、メニューはリストタグで作りたいし、inputタグは何かを入力してもらう時に使って欲しいと思う。
それで、もうちょっとスマートな方法はないのかなと思って考えてみた。
初めに考えついたのは:hoverを利用する方法であった。
 hoverはスマートフォンでは動作しないと思っていたがbodyタグにontouchstart=""を付ければタップすると:hoverの挙動になる事がわかった。
じゃあそれでいいじゃんと思ってCSSを組んでみた。

:hoverで開閉式メニュー　←（サンプルに遷移します）
iPhoneで確認すると問題なく動作しているように見える。

ただ、これPCブラウザで表示すると 見出しの上にマウスカーソルがある時だけメニューが表示されていて、メニューをクリックしようとすると消えてしまう。
PCでの利用者はスマートフォンほど多くないとは言えPCでもちゃんと使えたほうがいい。
見出しに対する説明とか、読むだけの用途ならPCでも問題ないのだけど、クリックしなければならないメニューではこの方法ではまずい。
そこでまたちょっと調べたら:targetで実装する方法が見つかった。
早速作ってみた。

:targetで開閉式メニュー　←（サンプルに遷移します）
アンカータグでidを指定することでクリックされた時にそのidが有効になって開閉する仕組み。

これでスマートフォンでもPCでも問題なく動作するCSSだけの開閉式メニューが出来た。
idはメニュー一つずつに設定しなければならないが、CSSは以下のように指定することでmenuで始まるid全てに適用させることが出来る。
ul[id^="menu"]:target > li
これだとulのmenuで始まるidがクリックされた時にulの下層にあるliタグにスタイルを適用させる