タブ型のメニューを作成するHTMLとCSSのサンプルコードです。
「タブメニュー 均等幅2」で作成したメニューの下に、「横並びメニュー 不均等幅2」をサブメニューとしてセットしたサンプルです。
※タブメニューは均等幅ですが、サブメニューは不均等幅(項目内のテキストに応じて、各項目の幅を設定するタイプ)となります。
ヘッダ付近での使用を想定したタブ型のメニューです。
tab_gen2_left.gif
tab_gen2_right.gif
tab_act2_left.gif
tab_act2_right.gif
▲背景色は白となります。(角丸の部分は透過されていません)
hor2_menu2_off.gif
hor2_menu2_on.gif
※画像へは直接リンクしないでください。(ダウンロードしてから使用してください)
/* === タブメニュー開始 === */ /* --- ナビゲーションバー --- */ .nav { width: 100%; /* ナビゲーションの幅 */ padding-top: 20px; /* ナビゲーションの上パディング */ background-color: #ffffff; /* ナビゲーションの背景色 */ font-size: 80%; /* タブメニューの文字サイズ */ } /* --- メニューエリア --- */ .nav .nl { width: 99%; /* メニューの幅 */ margin: 0 auto; /* メニューのマージン(上下、左右) */ padding: 0; list-style-type: none; text-align: center; } /* --- メニュー項目 --- */ .nav .nl li { position: relative; z-index: 1; width: 8em; /* タブの幅 */ margin: 0 4px -1px 0; /* タブのマージン(上右下左) */ background: #f9f9f9 url(tab_gen2_left.gif) no-repeat left top; /* タブの背景(左) */ float: left; } /* --- リンク --- */ .nav .nl li a { display: block; position: relative; /* IE6用 */ padding: 6px 2px; /* リンクエリアのパディング(上下、左右) */ background: url(tab_gen2_right.gif) no-repeat right top; /* タブの背景(右) */ text-decoration: none; /* テキストの下線(なし) */ } /* --- ポイント時の設定 --- */ .nav .nl li a:hover { text-decoration: underline; /* テキストの下線(あり) */ } /* --- アクティブなタブ --- */ .nav .nl li.active { z-index: 3; background: #004080 url(tab_act2_left.gif) no-repeat left top; /* タブの背景(左) */ } .nav .nl li.active a { background: url(tab_act2_right.gif) no-repeat right top; /* タブの背景(右) */ color: #ffffff; /* アクティブタブの文字色 */ } /* === タブメニュー終了 === */ /* === サブメニュー開始 === */ /* --- ナビゲーションバー --- */ .localNav { position: relative; z-index: 2; width: 100%; /* ナビゲーションの幅 */ background: #004080 url(hor2_menu2_off.gif) repeat-x top; /* ナビゲーションの背景 */ border-top: 1px #002448 solid; /* 上枠線 */ border-bottom: 1px #002448 solid; /* 下枠線 */ font-size: 80%; /* サブメニューの文字サイズ */ } /* --- メニューエリア --- */ .localNav .nl { width: 100%; /* メニューの幅 */ margin: 0; padding: 1px 0; /* メニューのパディング(上下、左右) */ list-style-type: none; text-align: center; } /* --- メニュー項目 --- */ .localNav .nl li { float: left; } /* --- 項目の幅(emで指定) --- */ .localNav .nl li.item1 { width: 9.5em; } .localNav .nl li.item2 { width: 4em; } .localNav .nl li.item3 { width: 7.5em; } .localNav .nl li.item4 { width: 6em; } .localNav .nl li.item5 { width: 4.6em; } /* --- リンク --- */ .localNav .nl li a { display: block; position: relative; /* IE6用 */ padding: 5px 5px; /* リンクエリアのパディング(上下、左右) */ border-right: 1px #004080 solid; /* リンクエリアの右枠線 */ text-decoration: none; /* テキストの下線(なし) */ } /* --- リンクテキストの色 --- */ .localNav .nl li a:link, .localNav .nl li a:visited, .localNav .nl li a:hover, .localNav .nl li a:active { color: #ffffff; } /* --- ポイント時の設定 --- */ .localNav .nl li a:hover { background: #004080 url(hor2_menu2_on.gif) repeat-x 0 -1px; /* ポイント時の背景 */ text-decoration: underline; /* テキストの下線(あり) */ } /* === サブメニュー終了 === */ /* --- 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="localNav"> <ul class="nl clearFix"> <li class="item1"><a href="#">ホームページ作成</a></li> <li class="item2"><a href="#">HTML</a></li> <li class="item3"><a href="#">スタイルシート</a></li> <li class="item4"><a href="#">JavaScript</a></li> <li class="item5"><a href="#"></a></li> </ul> </div>