質問: クリックしたら実行できることを疑似要素を使ってcssだけで実行したいです。 普通なら、javascriptを使わなくちゃいけないと思いますが、cssだけで実行したいです。 下のコードをもとにクリックしただけで実行できますか? 下のコードはドロップダウンメニューのコードです。 わかりづらい説明ですみません。 ``` ``` ``` echo ''; echo ''; echo ''; echo 'メニュー'; echo ''; echo ''; echo ''; echo ''; echo $r->access; echo ''; echo ''; echo ''; echo ''; echo $r->non_smoking; echo ''; echo ''; echo ''; echo ''; ```
回答: 「CSSだけでドロップダウンメニュー」 は出来なくはないです。 【参考1『CSSで作ったドロップダウンメニューのドロップの動きいろいろ』】 ↑このような感じになります。 ただし、この作り方の場合、メニュー表示のアクションは「:hover」のタイミングのみです。「クリックで表示」には対応できません。 また、メニューのHTML構造はul要素またはol要素になります。table要素では実現できません。 【参考2『CSSだけでメニューが開いたり閉じたりするアコーディオンを作る!javascript不要』】 こちらはドロップダウンメニューではなく「アコーディオン」になりますが、開閉に使用するボタンをinput要素(チェックボックス)にすることで、「クリック」をトリガーとしてメニューを開くことができます。(※厳密には「クリックイベント」を取得しているのではなく、チェックされているかどうかを表す「:ckecked」擬似クラスを利用しています) どうしてもJavaScriptを使うのが嫌(もしくは使えない事情がある)なのであれば、 このあたりの情報を参考にして無理矢理作ろうと思えばできなくもなさそうです。 ※やったことはありませんので保証はしませんが。。。 まぁどちらにせよ今やろうとしているHTML構造では実現不可能ですので、 「実現できる可能性があるHTML構造」に変更することが大前提ですね。 それすらできないのであれば、完全に道は閉ざされます。