ヘッダ付近での使用を想定したタブ型のメニューです。
tab_gen1_left.gif
tab_gen1_right.gif
tab_act1_left.gif
tab_act1_right.gif
背景色は白となります。(角丸の部分は透過されていません)
※画像へは直接リンクしないでください。(ダウンロードしてから使用してください)
/* --- ナビゲーションバー --- */ .nav { width: 100%; /* ナビゲーションの幅 */ padding-top: 20px; /* ナビゲーションの上パディング */ background-color: #ffffff; /* ナビゲーションの背景色 */ border-bottom: 3px #004080 solid; /* 下枠線 */ font-size: 80%; } /* --- メニューエリア --- */ .nav .nl { width: 99%; /* メニューの幅 */ margin: 0 auto; /* メニューのマージン(上下、左右) */ padding: 0; list-style-type: none; text-align: center; } /* --- メニュー項目 --- */ .nav .nl li { width: 8em; /* タブの幅 */ margin-right: 4px; /* タブの右マージン */ background: #f9f9f9 url(tab_gen1_left.gif) no-repeat left top; /* タブの背景(左) */ float: left; } /* --- リンク --- */ .nav .nl li a { display: block; position: relative; /* IE6用 */ padding: 6px 2px 5px 2px; /* リンクエリアのパディング(上右下左) */ background: url(tab_gen1_right.gif) no-repeat right top; /* タブの背景(右) */ text-decoration: none; /* テキストの下線(なし) */ } /* --- ポイント時の設定 --- */ .nav .nl li a:hover { text-decoration: underline; /* テキストの下線(あり) */ } /* --- アクティブなタブ --- */ .nav .nl li.active { background: #004080 url(tab_act1_left.gif) no-repeat left top; /* タブの背景(左) */ } .nav .nl li.active a { background: url(tab_act1_right.gif) no-repeat right top; /* タブの背景(右) */ color: #ffffff; /* アクティブタブの文字色 */ } /* --- clearfix --- */ .clearFix:after { content: "."; display: block; height: 0; clear: left; visibility: hidden; } .clearFix { min-height: 1px; }
<div class="nav"> <ul class="nl clearFix"> <li class="active"><a href="#">タブ項目1</a></li> <li><a href="#">タブ項目2</a></li> <li><a href="#">タブ項目3</a></li> <li><a href="#">タブ項目4</a></li> <li><a href="#">タブ項目5</a></li> </ul> </div> <div class="nav"> <ul class="nl clearFix"> <li><a href="#">タブ項目1</a></li> <li><a href="#">タブ項目2</a></li> <li class="active"><a href="#">タブ項目3</a></li> <li><a href="#">タブ項目4</a></li> <li><a href="#">タブ項目5</a></li> </ul> </div>