【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"]:targ...