リストタグを使った、簡単な縦型メニューの作成をご紹介。
では以下に簡単なサンプルを。

• メニュー1
• メニュー2
• メニュー3
• メニュー4
• メニュー5

ロールオーバー時に背景色と文字色が変わるように設定してみました。
では以下にソースをご紹介。

<ul class="tatemenu">
  <li><a href="">メニュー1</a></li>
  <li><a href="">メニュー2</a></li>
  <li><a href="">メニュー3</a></li>
  <li><a href="">メニュー4</a></li>
  <li class="bottom"><a href="">メニュー5</a></li>
</ul>

.tatemenu li{
width:150px;
text-decoration: none;
}

.tatemenu a:link,.tatemenu a:visited{
width: 150px;
display:block;
background-color: #CCCCCC;
border-left:solid 1px #333333;
border-right:solid 1px #333333;
border-top:solid 1px #333333;
text-decoration: none;
color:#222222;
padding-left:5px;
}

.tatemenu a:hover{
width: 150px;
display:block;
color: #FFFFFF;
background-color: #333333;
text-decoration: none;
padding-left:5px;
}

.bottom a:link,.bottom a:visited{
border-bottom: solid 1px #333333;
display:block;
width:150px;
}

ポイントとしてはリストをブロックレベル要素化する、 borderの使い方をちょっと工夫する、といった所かなあと思います。 他にも色々な作成法があると思うので、今後も何パターンか紹介していきたいなあと思います。

このエントリーのトラックバックURL :
http://netkatuyou.com/cgi/mt4/mt-tb.cgi/72