Search

copain blogs

2007/12/25 火曜日

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

Filed under: CSS — hos @ 16:23:04

サンプルはこちら

■構造

・tab
一番外のボックス。絶対レイアウトの基準。タブの下線をボーター下で描画。

・ul
ボックスの左端でタブのボーダーを描画。
絶対位置で下に1pxずらしてtabボックスに重ねている。

・li
タブの上と左のラインをボーダーで描画。

・a
IEでli要素のhoverが効かないのでliボックスと同じ面積にした。a:hoverで背景色を変えている。

・menu_op
タブの開いたときを表現。tabボックスの下線を打ち消すため白いボーダーで下ラインを描画。

コメント (0) »

この記事にはまだコメントがついていません。

コメント RSS

コメントをどうぞ