floatで作る横並びメニュー
1.ベースとなるリストを作る
まずは、ul要素を用いて、li要素でメニューの分だけ用意する。またテキストをa要素で記述する。さらにそれらをdiv要素で包括する。
HTML
<div id="navigation"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">サービス概要</a></li> <li><a href="#">会社概要</a></li> <li><a href="#">お問い合わせ</a></li> <li><a href="#">サイトマップ</a></li> </ul> </div>
2.リスト要素の設定
普段制作する時は個々に設定はしませんが、ここでは個々に設定します。(CSS側)
※ここで注意しなくてはならない点はul要素やli要素にmarginとpaddingの両方の指定をしておくこと。「Windows Internet Explore6」や「Opera8」はデフォルトのスタイルにおけるul要素のpaddingは0ですが、「Firefox1」の場合は左方向に40pxのpaddingを持っているなど、ブラウザごとにより差があるので、統一するために指定します。
CSS
#navigation ul{ list-style: none; margin: 0; padding: 0; } #navigation li{ margin: 0; padding: 0; }
3.ul要素を包括したdiv要素のボックス幅と各メニューの横幅を設定
ここの設定で横並びか、横並びかを設定します。(CSS側)
CSS
#navigation{ width: 600px; } #navigation li{ float: left; width: 120px; /*各メニューの幅*/ margin: 0; padding: 0; }
4.各メニューをブロックとしてボタンの役目をさせる
(テキストのみのリンクでもいいが、押しにくいと思うので。。。)
別にテキストのみのリンクでもいいのであれば、省略してください。
CSS
#navigation li a{ display: block; }
5.メニューの背景に画像を設定し、わかりやすくする
このままでもいいが、各メニューの背景を画像にし、ロールオーバーがわかりやすくする。
ここでは下記の画像を背景画像として使用します。
この画像を通常時は左半分を表示させ、マウスオーバー時では右側を表示させます。
CSS
#navigation ul { margin: 0; padding: 0; height: 30px; /*ボックスの高さを指定*/ overflow: hidden; /*はみ出した部分を見えなくする*/ } #navigation li a{ display: block; width: 100%; /*Windows IE対策*/ padding: 5px 0; text-align: center; background: url(images/menu.gif) left top; } #navigation li a:hover{ /*ロールオーバーの設定*/ background-position: right top; /*ロールオーバー時の画像表示の開始位置を指定*/ }
5で作ったものはデザイン上かなりおかしいとは思いますが、急に思いついたものですのでご了承ください。こんなこともできます程度ですので。
6.メニューを1枚画像で作る。
ここでは下記の1枚画像を使って、各メニューを作ります。ここでは都合上、サイズを小さくしていますが、実際使うサイズは600×60のものになります。つまり高さはメニューで使用するサイズの2倍で作ります。
7.各list要素にidをつける。
各list要素にidをつけ、個別の設定ができるようにする。
HTML
<div id="navigation"> <ul> <li id="nav01<strong>"</strong>><a href="#">HOME</a></li> <li id="nav02"><a href="#">サービス概要</a></li> <li id="nav03"><a href="#">会社概要</a></li> <li id="nav04"><a href="#">お問い合わせ</a></li> <li id="nav05"><a href="#">サイトマップ</a></li> </ul> </div>
8.メニューのテキストを表示させないようにする。
5の手順は省いてください。
画像を使用するので、テキストを表示させないようにします。a要素の高さを0にして、代わりに上方向へのナビゲーションの高さ分のパディングを指定します。
CSS
#navigation li a{ display: block; overflow: hidden; width: 100%; /*Windows IE対策*/ height: 0 !important; height /**/: 30px; padding-top: 30px; }
9.背景画像の開始位置を設定する。
各メニューの背景画像を設定します。つまり通常時(オフマウス)とロールオーバー時の設定になります。
CSS
#navigation li a{ display: block; overflow: hidden; width: 100%; height: 0 !important; height /**/: 30px; padding-top: 30px; background-image: url(images/navi.gif); /*背景画像の指定*/ } /* オフマウス */ #nav01 a{ background-position: 0 0;} #nav02 a{ background-position: -120px 0;} #nav03 a{ background-position: -240px 0;} #nav04 a{ background-position: -360px 0;} #nav05 a{ background-position: -480px 0;} /* オンマウス */ #nav01 a:hover{ background-position: 0 -30px;} #nav02 a:hover{ background-position: -120px -30px;} #nav03 a:hover{ background-position: -240px -30px;} #nav04 a:hover{ background-position: -360px -30px;} #nav05 a:hover{ background-position: -480px -30px;}
上記の記述とは多少異なる部分はあります。詳しくはソースを確認してください。
ちなみにもう一つクラスを指定して、自分のいるページがわかるようにすることもできます。
その時は、画像を下記のように3行で作ります。
指定するものはリスト要素とCSS側です。
CSS
<div id="navigation"> <ul> <li id="nav01"><a href="#" class="stay">HOME</a></li> <li id="nav02"><a href="#">サービス概要</a></li> <li id="nav03"><a href="#">会社概要</a></li> <li id="nav04"><a href="#">お問い合わせ</a></li> <li id="nav05"><a href="#">サイトマップ</a></li> </ul> </div> #navigation li a{ display: block; overflow: hidden; width: 100%; height: 0 !important; height /**/: 30px; padding-top: 30px; background-image: url(images/navigation.gif); /*工程6で使用した画像とは違います。*/ } /* 選択済み */ #nav01 a.stay{ background-position: 0 -60px;} #nav02 a.stay{ background-position: -120px -60px;} #nav03 a.stay{ background-position: -240px -60px;} #nav04 a.stay{ background-position: -360px -60px;} #nav05 a.stay{ background-position: -480px -60px;}
上記の記述とは多少異なる部分はあります。詳しくはソースを確認してください。