前回では準備を行ったので、次に実際に横並びのメニューを作っていく。
基本的には、メニューの横幅を固定で確保し、listタグの行頭文字はなしにする。あと、実際のリンクになる部分であるaタグをblock要素に変更し、文字が少なくてもメニューの縦横幅を確保するようにした。
また、aタグのリンク疑似要素を利用し、マウスが上に乗った時（a:hover）の時に背景画像を変更することでメニューの色が変わるようにしている。ただ、そのたびに画像を読み込むとストレスになるので、実際は2つの画像をまとめた1つの画像を用意し、通常はtopから配置して上半分だけを表示し、マウスが上に乗った時はbottomから配置して下半分だけが表示されるようにした。
<style type="text/css"><!--
ul#menu-sample {
width: 600px;
height: 25px;
margin: 0px;
padding: 0px;
}
ul#menu-sample li {
list-style-type:none;
text-align: center;
float: left;
}
ul#menu-sample li a {
display:block;
float: left;
background-image: url(http://livedoor.blogimg.jp/tani_masaru/imgs/8/7/87e795d9.png);
background-repeat: no-repeat;
background-position: left top;
width: 200px;
height: 25px;
margin: 0px;
padding: 0px;
color: #000000;
text-decoration: none;
}
ul#menu-sample li a:hover {
color: #FFFFFF;
background-position: left bottom;
}
--></style>
<ul id="menu-sample">
<li id="item01"><a href="#"><span>メニュー１</span></a></li>
<li id="item02"><a href="#"><span>メニュー２</span></a></li>
<li id="item03"><a href="#"><span>メニュー３</span></a></li>
</ul>
基本的にこれで何一つ困ることはないと思うけど、次は少しカスタマイズをしてみる。
- CSSとリストタグを使ってメニューを作る（準備編）
- CSSとリストタグを使ってメニューを作る（基礎編）
- CSSとリストタグを使ってメニューを作る（カスタマイズ編）
- CSSとリストタグを使ってメニューを作る（カスタマイズ編２）
- CSSとリストタグを使ってメニューを作る（カスタマイズ編３）
