CSSのみでアコーディオンメニューを実現する

カテゴリ:CSSテクニック 2008年2月18日 00:49

前回のエントリー「:target擬似クラスを使ったプルダウンメニュー」とややかぶる気がするけど、若干違う感じなので勘弁、ってことでwn

この:target、使い方によってはonclickなどのjavascriptの代替としてかなり使えそうな予感。
しかも、物によってはページ内リンクとして動くので戻るを使って戻っても、移動する前と同じように見えたり、外部からも直接ページ内リンクも含めてリンクすることで見た瞬間にその項目を表示しておく、といった使い方もできそう。n

さて、今回のサンプルはアコーディオンメニューです。
今まではjavascriptなどで実現していたものを、CSSのみで実現してしまおう、というのが今回の趣旨です。n

CSSのみでアコーディオンメニューを実現するデモ

▼EntryMore▼

概要はというと、仕組みは前回とまったく同じです。
ただ、若干違うのは「すべて表示」を使ったことかな。n

これにより、メニューごとに開閉したり、すべてを同時に表示する、なんてことも可能です。n

CSSソース(要点だけを抜粋)

HTMLソース(要点だけを抜粋)

合わせて読むと役に立つかもなエントリー

この記事のカテゴリー一覧を見る⇒CSSテクニック

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/63