CSSによるナビゲーションの作成
ロールオーバー効果のついたナビゲーションはJavaScriptを使用する事が多いですが、簡単なものならCSSでコントロールできます。
実現したい内容
- ナビゲーションの項目の幅が全て一緒
- マウスポインタが上に来たとき（擬似要素hover）何らかの変化をつける
これをCSSで実現します。
箇条書きと擬似クラスhoverを利用したナビゲーションの基本形
ナビゲーション部分をどの要素でマークアップするかは自由ですが、p要素を使って各項目をマークアップした場合はそれぞれが別の段落になるのでナビゲーション部分という意味の塊にはなりません。一般的には箇条書きを使用してナビゲーション部分をマークアップする事が多く見られます。
- ナビゲーション部分を箇条書きにします。ul要素とli要素を使用します。
- li要素の中にリンク先の名前を記入し、a要素でリンクを指定します。
- a要素にdiplay:blockを使用します。インライン要素はテキストの文字数により幅が一定にならない。
- a要素の幅を指定し、li要素とul要素の幅も同じものにします。
- マウスポインタが上に来たとき（擬似要素hover）の設定をします。
- その他の調整をします。
CSSによるナビゲーションのサンプル1
縦長のパターン
HTMLソースナビ部分
<div id="navimenu">
<ul>
<li><a href="#">トップ</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>リンク先の#は実際のリンク先に変更してください。また、他のCSSのセレクタとかぶらないようにidを設定しています。
CSS部分
#navimenu ul{
width: 80px;
background-color: #ff9999;
/*上2行はaと同じ設定*/
list-style: none;/*行頭マークを消す*/
margin-left: 0;/*IEではデフォルトでマージンが設定されているので0で統一*/
padding-left: 0;/*IEではデフォルトでパディングが0、FFは設定されているので0で統一*/
}
#navimenu a{
display:block;/*a要素はインライン要素なので幅が指定できない。ブロックレベルに変更*/
width: 80px;
background-color: #ff9999;
/*上2行はulと同じ設定*/
text-decoration: none;
padding:4px 8px;
font-size:14px;
}
#navimenu a:link{}
#navimenu a:visited{}
#navimenu a:hover{
color:#ff0000;
background-color: #ffcccc;
}
#navimenu a:active{}CSSによるナビゲーションのサンプル2
縦長のパターン2
各項目の間にborderで線を入れる。a要素にborderを設定しますが上下に設定するとかぶって太くなるのでどちらか一方今回は上にborderを設定します。一番下の項目にはul要素のbottomにborderを設定する事で全ての項目に線が入ります。
HTML部分は前掲と同じです。
CSS部分は
#navimenu ul{
width: 96px;/*一番下のボーダーのためaのパディング分を加える（標準モード）*/
border-bottom: 1px solid #000000;
background-color: #ff9999;
list-style: none;/*行頭マークを消す*/
margin-left: 0;/*IEではデフォルトでマージンが設定されているので0で統一*/
padding-left: 0;/*IEではデフォルトでパディングが0、FFは設定されているので0で統一*/
}
#navimenu a{
display:block;/*a要素はインライン要素なので幅が指定できない。ブロックレベルに変更*/
width: 80px;
border-top: 1px solid #000000;/*各項目の上部にボーダー、一番下の項目はulで*/
background-color: #ff9999;
text-decoration: none;
padding:4px 8px;
font-size:14px;
}
#navimenu a:link{}
#navimenu a:visited{}
#navimenu a:hover{
color:#ff0000;
background-color: #ffcccc;
}
#navimenu a:active{}#navimenu ulのwidthを変更しborder-bottomを設定
#navimenu aにborder-topを設定
