タグ

アコーディオンに関するValearのブックマーク (1)

  • CSSだけ!クリックでスムーズに開閉するアコーディオンメニュー

    この前「CSSだけで作る動きのあるドロップダウンメニュー|Webpark」という記事を書きました。jQueryでしそうなことをCSSのみで作ったのですが、これはマウスを乗せたとき動くようにしたいのでhoverを使いました。 今回はクリックで開閉するということで、hoverは使えません。では何を使うのか。 ラジオボタンを使います。ある項目にチェックするとそれまでチェックされていた項目のチェックが外れる。アコーディオンメニューと仕組みが一緒です。 今回もサンプルを用意していますのでご覧ください。 IE8以下の場合「:checked」が非対応なのでうまく表示されません。しかし、CSS3セレクタはSelectivizrを使えば簡単に対応できます。使い方は「CSS3を使うにあたって知っておきたいIE対策のまとめ|Webpark」をご参考に。 それではHTMLから紹介します。 HTML <div id

    CSSだけ!クリックでスムーズに開閉するアコーディオンメニュー
  • 1