CSSのみでシンプルなタブメニューを作る

サンプルはこちら
■構造

・tab
一番外のボックス。絶対レイアウトの基準。タブの下線をボーター下で描画。
・ul
ボックスの左端でタブのボーダーを描画。
絶対位置で下に1pxずらしてtabボックスに重ねている。
・li
タブの上と左のラインをボーダーで描画。
・a
IEでli要素のhoverが効かないのでliボックスと同じ面積にした。a:hoverで背景色を変えている。
・menu_op
タブの開いたときを表現。tabボックスの下線を打ち消すため白いボーダーで下ラインを描画。

広告

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中