サンプルにロールオーバーメニューを配置する
ドリル式ホームページの作り方TOP >> Lesson8〜floatを使ったレイアウト〜 >> サンプルにロールオーバーメニューを配置する
サンプルに文字の下の背景画像を切り替えるタイプのロールオーバーボタンを導入します。
index.htmlのdiv#b1ボックスのh1要素の下に、リストで作ったメニューを作成します。ulにid="a1"とつけといてください。
<div id="b1">
<h1><img src="gif/24.gif" alt="ホームページ作成講座" /></h1>
<ul id="a1">
<li><a href="#">HOME</a></li>
<li><a href="#">Lesson1</a></li>
<li><a href="#">Lesson2</a></li>
<li><a href="#">Lesson3</a></li>
</ul>
</div>
これにスタイルを適用して、ボタンを作成してみます。
リスト項目をfloatで横並びにした後、背景画像をwidth:102pxで配置し、a:hover擬似クラスを使用して、カーソルが当てられたときのみ、背景画像を102pxだけずらして画像が切り替わったかのように見せます。
また、あらかじめdiv#b1ボックスに、position:relativeを指定してあるので、ここを基点に絶対配置することができます。
ul#a1 {
margin-left:0;
width:408px;
position:absolute;*/div#b1を基点に絶対配置*/
top:20px;
right:10px;
}
ul#a1 li {
float:left;*/フロートで横並びに*/
width:102px;
display:inline;
list-style-type:none;
text-align:center;
}
ul#a1 li a {
font-size:14px;
display:block;
position:relative;
color:#fff;
background:#ccc url(../gif/26.gif) no-repeat;*/背景画像を幅102px（100＋線幅2px）で配置*/
text-decoration:none;
padding:1px 0 1px 0;
}
ul#a1 li a:hover {
color:#222;
background-position:-102px 0; */カーソルを当てたときに画像をずらす*/
}
ul#a1:after {
height:0;
visibility:hidden;
content:".";
display:block;
clear:both;*/フロートの高さ算出（流し込みの解除）。モダンブラウザ向け*/
}
これで完成！サンプル画像はコチラ→サンプル（ホームページ作成講座）