前回のエントリー「
:target擬似クラスを使ったプルダウンメニュー」とややかぶる気がするけど、若干違う感じなので勘弁、ってことでｗ
この:target、使い方によってはonclickなどのjavascriptの代替としてかなり使えそうな予感。
しかも、物によってはページ内リンクとして動くので戻るを使って戻っても、移動する前と同じように見えたり、外部からも直接ページ内リンクも含めてリンクすることで見た瞬間にその項目を表示しておく、といった使い方もできそう。
さて、今回のサンプルはアコーディオンメニューです。
今まではjavascriptなどで実現していたものを、CSSのみで実現してしまおう、というのが今回の趣旨です。
▼サンプルはこちら
CSSのみでアコーディオンメニューを実現するサンプル
▼EntryMore▼
概要はというと、仕組みは
前回とまったく同じです。
ただ、若干違うのは「すべて表示」を使ったことかな。
これにより、メニューごとに開閉したり、すべてを同時に表示する、なんてことも可能です。
▼CSSソース（要点だけを抜粋）
▼HTMLソース（要点だけを抜粋）
