最近では、珍しくもなくなりましたが、サイドやヘッダー部分のナビゲーションを、ulタグを使って表現する手法です。
SEO的にもulタグのリストでナビゲーションを書くと、非常に効果的だということがわかってから、広まってきました。
当サイトでもこの手法を用いて、左サイドのナビゲーションを構築しています。
実際のソースの書き方
ulタグというのは、やや特殊でcssで設定をせずに使うとmargin,paddingが予期しない形で現れて苦労します。
で、最初にul,liのmargin,paddingの設定をゼロにしてしまってから、クラスで各種の表示の設定をしています。今回は例としてyyyというクラスを使用。
ul {
margin:0px;
padding:0px;
width:120px;
}
li {
margin:0px;
padding:0px;
list-style:none;
}
.yyy {
margin:0px;
padding:0px;
}
.yyy a {
padding:5px;
color:#FFFFFF;
background-color:#000000;
text-decoration:none;
display:block;
}
.yyy a:hover {
color:#FFFFFF;
background-color:#0000FF;
}
「使用例」
.yyy aでdisplay:block;の設定をする事でテキスト上だけでなくliのエリアにカーソルがオーバーした時もロールオーバーすることになります。
この設定をしないとテキスト上にカーソルが来た時だけしかロールオーバーしません。
liタグでのlist-style:none;で通常のliタグで表示される左隅の丸いマークが表示されなくなります。背景画像を設定する事で実際の画像のロールオーバーの表現も可能になります。（.yyy aでのbackgroune-imageと.yyy a:hoverのbackgroune-imageを変える。）
- サイト
