【CSS】リストを使用したタブメニュー

愛･地球博のサイトやTBSのサイトでやってるやつをアレンジ。
画像を使用したタイプは、WebCreatorsに出てたような気がする。

背景に使用した画像は、↓こんな感じ。マウスを乗せた時に背景を30pxずらしてロールオーバーのような効果を持たせている。

<html>
<head>
<title>【CSS】リストを使用したタブメニュー</title>
<style>
/*---------------------- 上のメニューのCSS -----------------------*/
#tabMenu01 li{
/*タブメニュー実現に必要なのはfloat:leftのみ。あとは体裁を整えているだけ*/
float:left;
width:120px;
margin:1px;
text-align:center;
list-style-type:none;
background-color:#66cc00;
font-size:12px;
border-bottom:solid 3px #006600;
}
#tabMenu01 li a{
display:block;
color:#fff;
padding:4px;
}
#tabMenu01 li a:hover{
background-color:#009900;
}
/*---------------------- 下のメニューのCSS -----------------------*/
#tabMenu02 li {
float:left;
width:100px;
height:30px;
text-indent: -1000px;
}
#tabMenu02 li a{
display:block;
width:100px;
height:30px;
background-repeat: no-repeat;
background-position: 0px 0px;
}
#tabMenu02 li a:hover{
/*idがtabMenu02の中のliタグの中のaタグのマウスを乗せた時、背景画像を30pxずらす*/
background-position: 0px -30px;
}
#menu01{
background-image: url(20050531_listMenuButton_01.gif);
}
#menu02{
background-image: url(20050531_listMenuButton_02.gif);
}
#menu03{
background-image: url(20050531_listMenuButton_03.gif);
}
#menu04{
background-image: url(20050531_listMenuButton_04.gif);
}
</style>
</head>
<body>
<h4>リストを使用したタブメニュー</h4>
<div id="tabMenu01">
<ul>
<li><a href="#">メニューその1</a></li>
<li><a href="#">メニューその2</a></li>
<li><a href="#">メニューその3</a></li>
<li><a href="#">メニューその4</a></li>
</ul>
</div>
<div style="clear:both;"></div>
<div id="tabMenu02">
<ul>
<li><a href="#" id="menu01">メニューその1</a></li>
<li><a href="#" id="menu02">メニューその2</a></li>
<li><a href="#" id="menu03">メニューその3</a></li>
<li><a href="#" id="menu04">メニューその4</a></li>
</ul>
</div>
</body>
</html>

2005-05-31 11:51:00

口コミ・コメント

コメントを書く