CSSだけでシンプルなツリー状のメニューを作る for IE8+

調べてみるとIE9以上でしか動かないものがほとんどでしたが、今回IE8でも動くものを作成しました。
IE9やjQueryでスタイリングしなければならない理由はCSSのlast-childが使えないことによるものです。

このデモではlast-childを使わずツリーを表現することにチャレンジしました。

デモ:CSSだけでツリーのスタイル

縦の線はulタグの:beforeで、横の線はliタグの:beforeで表現しています。
サブメニュー開閉の動きはjQueryを使っていますが、スタイリングはCSSのみです。

以上参考になれば幸いです。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中