基金訓練に行ってきました。(53日目その２)

本日の内容は下記のとおりです。

１．メニューいろいろ（その２）

罫線で仕切られたメニュー

↑こんな感じです。↑

CSSの例は下記のとおりです。

.menu {
width: 100px;
}
.menu ul {
border-top: solid 1px #999966;
list-style-type:none;
}
.menu li {
border-bottom: solid 1px #999966;
padding: 5px 0;
}
.menu a:link {
color: #336666;
text-decoration: none;
}
.menu a:visited {
color: #999999;
text-decoration: none;
}
.menu a:active {
color: #999999;
text-decoration: none;
}
.menu a:hover {
color: #999999;
text-decoration: none;
}

HTMLの例は、下記のとおりです。

<div class=”menu”>
<ul>
<li><a href=”menu1.html>メニュー１</a></li>
<li><a href=”menu2.html>メニュー２</a></li>
<li><a href=”menu3.html>メニュー３</a></li>
<li><a href=”menu4.html>メニュー４</a></li>
</ul>
</div>

ボックス表示のメニュー

↑こんな感じです。↑

CSSの例は下記のとおりです。

.menu {
font-size:16px;
font-weight:bold;
}
.menu ul {
list-style-type:none;
}
.menu li a {
display:block;
line-height:30px;
width:95px;
padding-left:5px;
background-color:#0c907c;
color:#ffffff;
border-top:solid 1px #999966;
}
.menu li+li+li+li a {
border-bottom: solid 1px #999966;
}
.menu a:hover {
background-color:#0ce0c0;
color: #999966;
}

HTMLの例は、下記のとおりです。

<div class=”menu”>
<ul>
<li><a href=”menu1.html>メニュー１</a></li>
<li><a href=”menu2.html>メニュー２</a></li>
<li><a href=”menu3.html>メニュー３</a></li>
<li><a href=”menu4.html>メニュー４</a></li>
</ul>
</div>

• ※a要素をブロック要素にした時、ボックスサイズはa要素で指定しないと、IE6では、リンクが文字だけになってしまいます。
• ※IE6では、メニュー４の下のボーダーが、表示されません。

画像が変化するメニュー

↑こんな感じです。↑

CSSの例は下記のとおりです。

.menu {
font-size:16px;
font-weight:bold;
}
.menu ul {
list-style-type:none;
}
.menu li a {
display:block;
line-height:30px;
width:80px;
padding-left:20px;
background-image:url(menu.gif);
background-repeat:no-repeat;
color:#ffffff;
border-top:solid 1px #999966;
}
.menu li+li+li+li a {
border-bottom: solid 1px #999966;
}
.menu a:hover {
background-position:0 -30px;
color: #999966;
}

HTMLの例は、下記のとおりです。

<div class=”menu”>
<ul>
<li><a href=”menu1.html>メニュー１</a></li>
<li><a href=”menu2.html>メニュー２</a></li>
<li><a href=”menu3.html>メニュー３</a></li>
<li><a href=”menu4.html>メニュー４</a></li>
</ul>
</div>

• ※IE6では、メニュー４の下のボーダーが、表示されません。

罫線区切り横長メニュー

↑こんな感じです。↑

CSSの例は下記のとおりです。

.menu {
font-size:16px;
font-weight:bold;
}
.menu ul {
list-style-type:none;
}
.menu li {
display:inline;
border-right:solid 1px #aaaaaa
padding:0 10px
;
}
.menu li a {
color:#000000;
}
.menu li+li+li+li {
border-right:none;
}
.menu a:hover {
color: #999966;
}

HTMLの例は、下記のとおりです。

<div class=”menu”>
<ul>
<li><a href=”menu1.html>メニュー１</a></li>
<li><a href=”menu2.html>メニュー２</a></li>
<li><a href=”menu3.html>メニュー３</a></li>
<li><a href=”menu4.html>メニュー４</a></li>
</ul>
</div>

• ※IE6では、メニュー４の右のボーダーが、残ります。

罫線区切り横長メニュー（背景部分もクリック可）

↑こんな感じです。↑

CSSの例は下記のとおりです。

.menu {
font-size:16px;
font-weight:bold;
}
.menu ul {
list-style-type:none;
}
.menu li {
float:left;

}
.menu li a {
display:block;
width:100px;
line-height:30px;
text-align:center;
border-right:solid 1px #aaaaaa;
color:#000000;
}
.menu li+li+li+li {
border-right:none;
}
.menu a:hover {
background-color:#bbfdb5;
}
.clear {
clear:both;
}

HTMLの例は、下記のとおりです。

<div class=”menu”>
<ul>
<li><a href=”menu1.html>メニュー１</a></li>
<li><a href=”menu2.html>メニュー２</a></li>
<li><a href=”menu3.html>メニュー３</a></li>
<li><a href=”menu4.html>メニュー４</a></li>
</ul>
<div class="clear"></div>
</div>

• ※IE6では、メニュー４の右のボーダーが、残ります。