/* メニュー画像 */
#menu_bar li a {
background-image: url("Sample C に相当する画像のURL");
}
/* ロールオーバー(画像切り替え) */
#menu_bar li a:hover {
background-position:left bottom;
}
/* メニュー全体背景 */
#menu_bar {
background-image: url("メニュー全体背景に使う画像のURL");
}
<!--▼ メニューバー ▼-->
<ul id="menu_bar">
<li class="menu01"><a href="#">メニュー1</a></li>
<li class="menu02"><a href="#">メニュー2</a></li>
<li class="menu03"><a href="#">メニュー3</a></li>
</ul>
<!--▲ メニューバー ▲-->
#menu_bar li.menu01 a {
background-image: url("menu01に表示したい画像のURL");
}
#menu_bar li.menu02 a {
background-image: url("menu02に表示したい画像のURL");
}
#menu_bar li.menu03 a {
background-image: url("menu03に表示したい画像のURL");
}
#menu_bar li.menu01 a {
background-image: url("menu01に表示したい画像のURL");
text-indent:-9999px;
}
#menu_bar li.menu02 a {
background-image: url("menu02に表示したい画像のURL");
text-indent:-9999px;
}
#menu_bar li.menu03 a {
background-image: url("menu03に表示したい画像のURL");
text-indent:-9999px;
}
≪ white_eagle、fullmoon_howling から画像を取り除く | HOME | メニューバーのドロップダウン ≫
≪ white_eagle、fullmoon_howling から画像を取り除く | HOME | メニューバーのドロップダウン ≫
【共通】
Author:いたお
更新は非常にマイペースです
現在休止中です