CSSでつくる
画像のロールオーバーメニュー

画像を使ったロールオーバーメニューをCSSで管理します。Java scriptを使わないのでPHPは至ってシンプルです。

STYLE-CSS＜CSS設定＞

.menu-a, .menu-a a {
    width: 150px; height: 30px; text-indent: -4000px;
    background: url(画像のアドレス/menu-a-2.gif) no-repeat;
    background-color: #00a0e9;
    float: left;
    }
.menu-a, .menu-a a:hover {
    background: url(画像のアドレス/menu-a-2.gif) no-repeat;
    }
.menu-b, .menu-b a {
    width: 150px; height: 30px; text-indent: -4000px;
    background: url(画像のアドレス/menu-b-1.gif) no-repeat;
    background-color: #00a0e9;
    float: left;
    }
.menu-b, .menu-b a:hover {
    background: url(画像のアドレス/menu-b-2.gif) no-repeat;
    }

menu-a。menu-bとメニューの数だけ増やします。

TEMPLATE-TAG EXAMPLE＜テンプレート記述例＞

<div class="menu-a"><a href="#">メニューテストA</a></div>
<div class="menu-b"><a href="#">メニューテストA</a></div>

text-indent:-4000pxの設定で「メニューテストA、B」の文字は、画面上に表示されません。

EXAMPLE RESULT＜記述例の結果＞

RELATED POSTS＜関連記事＞

CSSでつくる画像のロールオーバーメニュー

CSSでつくる
画像のロールオーバーメニュー