1. Home
  2. Webテンプレート
  3. メニュー
  4. タブメニュー 均等幅2-3

タブメニュー 均等幅2-3



タブ型のメニューを作成するサンプルコードです。

「タブメニュー 均等幅2」で作成したメニューの下に、「横並びメニュー 不均等幅2」をサブメニューとしてセットしたサンプルです。

※タブメニューは均等幅ですが、サブメニューは不均等幅(項目内のテキストに応じて各項目の幅を設定するタイプ)となります。


表示例

ヘッダ付近での使用を想定したタブ型のメニューです。

タブメニュー
  • floatを指定して、li要素を横に並べています。
  • 「タブの幅」は、タブ内のテキスト量に合わせて調整してください。
  • タブの幅は、文字サイズに応じて変化します。変化させたくない場合は、「タブの幅」をピクセルで指定してください。
  • 背景画像の都合上、タブの幅は最大で200px程度までとなります。
  • 各タブの幅は均等になります。
  • タブの間隔を変更したい場合は、タブの右マージンを変更してください。左端の余白は、「メニューの幅」で調整しています。
  • li要素にクラス名(active)を設定すると、そのタブをアクティブタブ(紺色のタブ)に切り替えることができます。
サブメニュー
  • floatを指定して、li要素を横に並べています。
  • メニュー項目をポイントすると、その項目の背景画像が切り替わります。
  • 各項目の幅は、項目内のテキスト量に合わせて調整してください。

使用している画像

tab_gen2_left.gif tab_gen2_left.gif
tab_gen2_right.gif tab_gen2_right.gif

tab_act2_left.gif tab_act2_left.gif
tab_act2_right.gif tab_act2_right.gif

▲背景色は白となります。(角丸の部分は透過されていません)

hor2_menu2_off.gif hor2_menu2_off.gif
hor2_menu2_on.gif hor2_menu2_on.gif

画像へは直接リンクしないでください。ダウンロードしてから使用してください)

画像の制作について

コード

CSSコード


/* === タブメニュー開始 === */

/* --- ナビゲーションバー --- */
div.nav {
width: 100%; /* ナビゲーションの幅 */
padding-top: 20px; /* ナビゲーションの上パディング */
background-color: #ffffff; /* ナビゲーションの背景色 */
font-size: 80%; /* タブメニューの文字サイズ */
}

/* --- メニューエリア --- */
div.nav ul.nl {
width: 99%; /* メニューの幅 */
margin: 0 auto; /* メニューのマージン(上下、左右) */
padding: 0;
list-style-type: none;
text-align: center;
}

/* --- メニュー項目 --- */
div.nav ul.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;
}

/* --- リンク --- */
div.nav ul.nl li a {
display: block;
position: relative; /* IE6用 */
padding: 6px 2px; /* リンクエリアのパディング(上下、左右) */
background: url(tab_gen2_right.gif) no-repeat right top; /* タブの背景(右) */
text-decoration: none; /* テキストの下線(なし) */
}
/* --- ポイント時の設定 --- */
div.nav ul.nl li a:hover {
text-decoration: underline; /* テキストの下線(あり) */
}

/* --- アクティブなタブ --- */
div.nav ul.nl li.active {
z-index: 3;
background: #004080 url(tab_act2_left.gif) no-repeat left top; /* タブの背景(左) */
}
div.nav ul.nl li.active a {
background: url(tab_act2_right.gif) no-repeat right top; /* タブの背景(右) */
color: #ffffff; /* アクティブタブの文字色 */
}

/* === タブメニュー終了 === */


/* === サブメニュー開始 === */

/* --- ナビゲーションバー --- */
div.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%; /* サブメニューの文字サイズ */
}

/* --- メニューエリア --- */
div.localNav ul.nl {
width: 100%; /* メニューの幅 */
margin: 0;
padding: 1px 0; /* メニューのパディング(上下、左右) */
list-style-type: none;
text-align: center;
}

/* --- メニュー項目 --- */
div.localNav ul.nl li {
float: left;
}

/* --- 項目の幅(emで指定) --- */
div.localNav ul.nl li.item1 {
width: 9.5em;
}
div.localNav ul.nl li.item2 {
width: 4em;
}
div.localNav ul.nl li.item3 {
width: 8.3em;
}
div.localNav ul.nl li.item4 {
width: 6.3em;
}
div.localNav ul.nl li.item5 {
width: 4.6em;
}

/* --- リンク --- */
div.localNav ul.nl li a {
display: block;
position: relative; /* IE6用 */
padding: 5px 5px; /* リンクエリアのパディング(上下、左右) */
border-right: 1px #004080 solid; /* リンクエリアの右境界線 */
text-decoration: none; /* テキストの下線(なし) */
}
/* --- リンクテキストの色 --- */
div.localNav ul.nl li a:link,
div.localNav ul.nl li a:visited,
div.localNav ul.nl li a:hover,
div.localNav ul.nl li a:active
{
color: #ffffff;
}
/* --- ポイント時の設定 --- */
div.localNav ul.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: both;
visibility: hidden;
}
.clearFix {
min-height: 1px;
}

HTMLコード


<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>

備考

  • floatの解除には「clearfix」という手法を使用しています。
  • リンクテキストの左右には余裕を持たせてください。ギリギリに設定すると、文字サイズを変更した際に折り返しが入ってしまう場合があります。
  • アクティブタブの下側の境界線が表示されないようにするため、タブの下マージンを調整(マイナス)した上で、重なりの順序(z-index)を指定しています。
  • 上記以外の要素にも z-index を設定する場合は、順序の指定内容に注意してください。(必要に応じて値の数値を変更してください)
  • IE6での不具合(クリックできる範囲がテキストのみになってしまう)を避けるため、a要素に position: relative を指定しています。
タブメニュー
  • タブの背景画像は、1枚目(左用)をli要素に、2枚目(右用)をa要素に設定し、それを重ね合わせて1つのタブに見せています。(タブの幅の変化に対応するため)
サブメニュー(項目の幅指定について)
  • 一般的なブラウザでは、各項目の幅(width)を指定しなかった場合でも、同じように横並びで表示されます。
    ※内容(テキスト量)に合わせて、各項目の幅が自動的に調整されることになります。
  • ただし、一部のブラウザ(Mac IE)では各項目の幅が100%になってしまい、横並びで表示されなくなってしまうようです。そのリスクを避けたい場合は、上記のコードを参考に各項目の幅を指定しておいてください。
  • CSS 2の仕様に準拠する場合は、各項目の幅を指定しておいてください。

更新履歴

2010/06/14
メイリオフォント使用時の不具合を避けるため、CSSコードを微調整しました。
2010/02/09
タブの背景画像(tab_gen2_left.giftab_gen2_right.gif)を差し替えました。

メニュー

ページの先頭へ