<ul>タグの横並びメニューのカスタマイズ2
<ul>タグを使用した横並びメニューを作成方法を、紹介していますが今回も更にカスタマイズしていこうと思います。
前回のサンプルに、罫線をいれて、フォントのカラーを白に背景色を青に変更して、更にメニューっぽくしてみました。オンマウスされると、フォントカラーが黒、背景色が黄色になるように設定してます。
<li>タグに1pxずつの罫線をひく指定をするのですが、単純にborder指定をすると罫線が重複してしまうところがあるので、少しだけ工夫が必要です。
まず<li>タグに上、右、下の3箇所にbrderを指定します。するとメニューの一番、左以外は、罫線がひかれます。そして、メニューの一番左に当たる<li>タグにclass指定をして、border-leftに罫線を指定します。CSSの記述は、以下のような感じです。
ul#sample-02 li {
margin: 0;
padding: 0;
float: left;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-top-color: #333;
border-right-color: #333;
border-bottom-color: #333;
}
ul#sample-02 li.bolder-left {
border-left-width: 1px;
border-left-style: solid;
border-left-color: #333;
}
これで、重複することもなく罫線がひかれるので、よりメニューらしく見えます。
少し記述を変えれば、下のように縦型のメニューにも使えます。
これらの記述は、以下のようにします。
■横型メニュー
HTMLファイル
<ul id="menu">
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
CSSファイル
ul#menu {
list-style-type: none;
color: #333333;
margin: 0;
padding: 0;
border: 0;
}
ul#menu li {
margin: 0;
padding: 0;
float: left;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-top-color: #333;
border-right-color: #333;
border-bottom-color: #333;
}
ul#menu li.bolder-left1 {
border-left-width: 1px;
border-left-style: solid;
border-left-color: #333;
}
ul#menu a {
text-decoration: none;
color: #FFF;
padding: 0 10px;
display: block;
background-color: #00F;
}
ul#menu a:hover {
color: #333;
background-color: #FF0;
}
■縦型メニュー
HTMLファイル
<ul id="menu">
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
CSSファイル
ul#menu {
list-style-type: none;
color: #333333;
margin: 0;
padding: 0;
border: 0;
width: 75px;
}
ul#menu li {
margin: 0;
padding: 0;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #333;
border-bottom-color: #333;
border-left-color: #333;
text-align: left;
}
ul#menu li.bolder-top1 {
border-top-width: 1px;
border-top-style: solid;
border-top-color: #333;
}
ul#menu a {
text-decoration: none;
color: #FFF;
padding: 0 0px 0 5px;
display: block;
background-color: #00F;
}
ul#menu a:hover {
color: #333;
background-color: #FF0;
}
- 投稿者:トモちゃんヌ
- 日時:13:07
comments