クリックしたら実行できることをcssだけでやる方法

クリックしたら実行できることを疑似要素を使ってcssだけで実行したいです。
普通なら、javascriptを使わなくちゃいけないと思いますが、cssだけで実行したいです。
下のコードをもとにクリックしただけで実行できますか？
下のコードはドロップダウンメニューのコードです。
わかりづらい説明ですみません。

css
1<style>
2	td.nav table {
3    display:none;
4}
5td.nav:hover table {
6    display:block;
7}
8td.nav a {
9    padding:10px;
10    display:block;
11    color:#fff;
12    text-align:center;
13    text-decoration:none;
14}
15td.nav:hover a {
16    background-color:#666;
17}
18td.nav:hover a:hover {
19    background-color:#ccc;
20}	
21</style>

html
1  echo '<tr>';
2   echo '<td  class="nav">';   
3  echo '<a href="#">';
4  echo 'メニュー';
5  echo '</a>';
6  echo '<table>';     
7  echo '<tr>';
8   echo '<td>';
9   echo $r->access;
10   echo '</td>';
11   echo '</tr>';
12       echo '<tr>';
13    echo '<td>';
14    echo $r->non_smoking;
15    echo '</td>';
16  echo '</tr>';   
17   echo '</table>';   
18     echo  '</table>';
19

行動規範の内容に同意します

回答5件

ベストアンサー

「CSSだけでドロップダウンメニュー」は出来なくはないです。

【参考１『CSSで作ったドロップダウンメニューのドロップの動きいろいろ』】

↑このような感じになります。
ただし、この作り方の場合、メニュー表示のアクションは「:hover」のタイミングのみです。「クリックで表示」には対応できません。
また、メニューのHTML構造はul要素またはol要素になります。table要素では実現できません。

【参考２『CSSだけでメニューが開いたり閉じたりするアコーディオンを作る！javascript不要』】

こちらはドロップダウンメニューではなく「アコーディオン」になりますが、開閉に使用するボタンをinput要素（チェックボックス）にすることで、「クリック」をトリガーとしてメニューを開くことができます。（※厳密には「クリックイベント」を取得しているのではなく、チェックされているかどうかを表す「:ckecked」擬似クラスを利用しています）

どうしてもJavaScriptを使うのが嫌（もしくは使えない事情がある）なのであれば、
このあたりの情報を参考にして無理矢理作ろうと思えばできなくもなさそうです。
※やったことはありませんので保証はしませんが。。。

まぁどちらにせよ今やろうとしているHTML構造では実現不可能ですので、
「実現できる可能性があるHTML構造」に変更することが大前提ですね。
それすらできないのであれば、完全に道は閉ざされます。

投稿2016/10/02 10:14

aKusano

総合スコア3763

aba623ky

2016/10/02 10:42

CSSだけでメニューが開いたり閉じたりするアコーディオンを作りたいです。

aKusano

2016/10/02 10:45

ならば回答に示した「参考２」のブログがちょうどやりたいことの答えになるかと思います。そちらを参考にしてみてはどうですか？

aba623ky

2016/10/02 11:46

参考2のブログを参考して書くには、どう書けばいいですか？

aKusano

2016/10/02 12:23 編集

参考サイトにHTMLもCSSも全部記載されてますから、それをそっくりそのままコピーするなり、部分的にHTML要素やid/class名を希望のものに変更するなりすればよろしいのでは？

行動規範の内容に同意します

JavaScript の click を置き換えるものではありませんが、:target 疑似クラスで似たような事は出来ます。
http://coliss.com/articles/build-websites/operation/css/target-pseudo-class-trick.html

他に :focus でも同じような事が出来るでしょう(勿論、フォーカスが外れれば適用されたスタイルも外れます)。

これらは完全な代替ではないので、最終的には「これらの動作を要件として認められるかどうか」にかかっています。

Re: aba623ky さん

投稿2016/10/02 12:58

think49

総合スコア18162

車があってアクセルを踏んで動かしたいというのであれば、CSSではできない。エンジンをかけることすら出来ない。CSSにできるのは、車にキャラクターの絵を描いてデコ車にするくらいではないか。
javascriptを使わなくちゃいけないと思っているのにどうしてCSSだけで動かすことにこだわっているのか。
その理由を書くだけでも答えが違うと思います。
また、echoはHTMLではなくPHPなのではと思います。
echoを外せばHTMLでもいいとは思いますがね。

投稿2016/10/02 08:36