このページ右のメニューにあるような色が変るボタンを作ります。
これはcssだけで作れます。
cssの中には以下のように記述しています。
.MenuButton {
’クラス名はもちろんなんでもいい
font-size:12px;
text-align:left;
color:#333333;
height:30px;
width:190px;
border-bottom:1px solid #999999;
overflow: hidden;
}
.MenuButton a {
background-image: url('[offボタン画像の場所]');
color:#FFFFFF;
text-decoration: none;
height:30px;
width:190px;
display:block;
margin:0px 0px 0px 0px;
padding:3px 0px 0px 20px;
}
.MenuButton a:visited{
background-image: url('[offボタン画像の場所]');
text-decoration: none;
color:#FFFFFF;
}
.MenuButton a:hover{
background-image: url('[onボタン画像の場所]') !important;
text-decoration: none;
color:#333333 !important;
}
メニュー本体は
<div class="MenuButton">
<a href='[リンク先]'>[リンク文字列]<//a>
</div>
のような記述を必要な数だけ設置します。
