グローバルナビゲーション リストを横並びにする
グローバルナビゲーションの一例です。
ここでは、テキストメニューでリストを横並びにし、displayプロパティを使ってボタンのように見せています。
リストを横並びにする
- 横並びのリストはdiv id="navigation"としてdivで囲みます。
- div id="navigation"にボックスの幅を指定します。
- ul要素のlist-styleプロパティでマーカーを消します。
- li要素のボックスの幅を指定し、floatプロパティで横並びにします。(リストを左から順に回り込ませる。)
※floatプロパティを指定したli要素には、同時にボックスの幅も指定しておく必要があります。
(Mac IE5では、li要素のボックスの幅が広がり横並びにできないという事例があるため)
リンク領域を拡大し、アレンジしていく
- a要素をブロックレベル要素として表示させます。(display:block)
- 旧ブラウザ対策として横幅を100%と指定しておくとよいでしょう。
- 上下方向のpaddingを指定することでテキストの位置を調整。
- 文字色や背景色のスタイルを追加していきます。
- リンクの下線を消し、テキストを中央ぞろえにします。
- ul要素にはボックスの高さを指定し、overflowプロパティの値をhiddenにします。
※フォントサイズが拡大された場合に、ナビゲーションのレイアウトが大きく崩れてしまうのを防ぐための指定。
オンマウス時のスタイルを指定する
- マウスを重ねることで変化する仕組みを取り入れていきます。
以下の「HTML」「CSS」それぞれのタブをクリックすると、ナビゲーション部分のみのコードを確認することができます。