12345678910...
新着サンプル
水平型メニュー #2

このサンプルは、水平型のタブメニューを表示します。マウスをタブに移動するとタブがハイライトします。タブをクリックするとハイライトが固定されます。

このサンプルは、次のようなイメージとCSSを利用してタブ型の水平メニューを表示しています。

tab_0a.gif tab_2b.gif tab_0b.gif tab_0c.gif tab_1a.gif tab_1b.gif tab_2a.gif 

.menu2
{
  background: transparent url(images/tab_0c.gif) repeat-x left bottom;
}
.menu2 li a
{
  background: url(images/tab_0a.gif) no-repeat;
}
.menu2 li a b
{
  background: url(images/tab_0b.gif) no-repeat right top;
}
.menu2 li.current a
{
  background: url(images/tab_2a.gif) no-repeat;
}
.menu2 li.current a b
{
  background: url(images/tab_2b.gif) no-repeat right top;
}
.menu2 li a:hover
{
  background: url(images/tab_1a.gif) no-repeat;
}
.menu2 li a:hover b
{
  background: url(images/tab_1b.gif) no-repeat right top;
}
.menu2 li.current a:hover
{
  background: url(images/tab_2a.gif) no-repeat;
}
.menu2 li.current a:hover b
{
  background: url(images/tab_2b.gif) no-repeat right top;
}


12345678910...
新着サンプルの
メールを受け取る！
メルマガ登録！ (ドラッグ＆リサイズ可)
縮小 最大 閉じる
苗字
メール

このメルマガを購読すると、新着サンプルの情報を受け取ることができます。 「苗字」と「メールアドレス」を入力したら[登録]ボタンをクリックしてください。 このウィンドウは、任意の場所に移動したりリサイズすることができます。

リサイズ