cssだけで画像が入れ替わるメニューを作る



リンクメニューで、マウスが重なると画像が入れ替わる物を良く目にします。
これはjavascriptによって組まれる事が多いのですが、
実はcssだけで実現できます。

まずcssでリンクメニューのクラスを決めます。
次にそのクラスのリンク・ホバー・ビジテッドの色と画像を指定します。
そして実際のメニューにクラスを指定するだけです。

リストで作る場合とテーブルで作る事ができます。以下に例を示します

下はテーブルで作っています
.[ここがメニューのクラス名] {
width:[メニューのサイズ]px;
float:[left,rightのどちらか];
text-align:[left,center,rightのどれか];
}
td.[テーブルのクラス名] a {
margin-[top,right,left,bottomが指定できる]:[好きなサイズ]px;
padding-[top,right,left,bottomが指定できる]:[好きなサイズ]px;
width:[メニューのサイズ]px;
display:block;
background-image: url('[表示させる画像の場所と名前]');
background-repeat: no-repeat;
background-position: left top;
}
td.[テーブルのクラス名] a:link{
margin-[top,right,left,bottomが指定できる]:[好きなサイズ]px;
padding-[top,right,left,bottomが指定できる]:[好きなサイズ]px;
width:[メニューのサイズ]px;
display:block;
background-image: url('[表示させる画像の場所と名前]');
background-repeat: no-repeat;
background-position: left top;
}
td.[テーブルのクラス名] a:hover{
margin-[top,right,left,bottomが指定できる]:[好きなサイズ]px;
padding-[top,right,left,bottomが指定できる]:[好きなサイズ]px;
width:[メニューのサイズ]px;
display:block;
background-image: url('[入れ替えて表示させる画像の場所と名前]');
background-repeat: no-repeat;
background-position: left top;
}
td.[テーブルのクラス名] a:visited{
margin-[top,right,left,bottomが指定できる]:[好きなサイズ]px;
padding-[top,right,left,bottomが指定できる]:[好きなサイズ]px;
width:[メニューのサイズ]px;
display:block;
background-image: url('[表示させる画像の場所と名前]');
background-repeat: no-repeat;
background-position: left top;
}

このようなcssを作成したらHTML内のメニューにクラスを指定します。
<table class="[cssで指定したクラス名]"><tr>
<td class="[cssで指定したクラス名]">
<a href="[リンク先]">
[リンクメニューに表示する文字]</a></td>
○ここのメニュー項目はいくらでも増やせます
</tr></table>

以下はリストで作る場合の例です。

.[ulのクラス名]{
[ここでulのスタイルを指定]
}
.[ulのクラス名] li{
[ここでliのスタイルを指定]
}
.[ulのクラス名] li a{
display:block;
}
.[ulのクラス名] li a:link{
[ここでリンクのスタイルを指定]
}
.[ulのクラス名] li a:hover{
[ここでホバーのスタイルを指定]
}
.[ulのクラス名] li a:visited{
[ここでビジテッドのスタイルを指定]
}
指定方法は上記と変わりません。

記事id:68 / 3359PV

関連記事


Warning: simplexml_load_file(http://www.jigen.xyz/index.xml) [function.simplexml-load-file]: failed to open stream: HTTP request failed! in /home/session-2/www/02_zatu/system_files/core_sys.php on line 41

Warning: simplexml_load_file() [function.simplexml-load-file]: I/O warning : failed to load external entity "http://www.jigen.xyz/index.xml" in /home/session-2/www/02_zatu/system_files/core_sys.php on line 41

Warning: Invalid argument supplied for foreach() in /home/session-2/www/02_zatu/system_files/core_sys.php on line 42