ホーム > web・PC > web制作 > メニューを画像のように使う（CSSでマウスオーバー）

メニューを画像のように使う（CSSでマウスオーバー）

2008年6月26日 21:03 | 個別ページ | コメント(0) | トラックバック(0)

CSSだけでメニューを作成することが増えてきています。
テキストだけでマウスオーバーで画像がかわるように表現する方法を説明します。
画像を使う場合は画像メニューをCSSで作る（CSSでマウスオーバー）のページをご覧ください

CSSを用意する

/* 縦メニューデフォルト */
.sample_menu{
width:100px; /* メニューのサイズ */
border-bottom:1px solid #888888; /* メニューの下線 */
background: #BCF6AF; /* 背景色 */
color:#444444; /* 文字の色 */
}

/* 縦メニューのリンク部分のデフォルト */
.sample_menu a{
width:100%; /* リンク文字以外もリンクとするため */
display:block; /* 大きさをブロック化 */
text-decoration: none; /* リンク線なし */
color:#444444; /* 文字の色 */

}

/* 縦メニューのリンク部分のマウスオーバー時 */
.sample_menu a:hover{
background: #78E060; /* マウスオーバー時の背景色 */
}

/* 横メニューデフォルト */
.sample_menu2{
width:100px; /* メニューのサイズ */
border-bottom:1px dotted red; /* メニューの下線 */
background: #BCF6AF; /* 背景色 */
color:#444444; /* 文字の色 */
float:left; /* 右に連結 */
}

/* 横メニューのリンク部分のデフォルト */
.sample_menu2 a{
width:100%; /* リンク文字以外もリンクとするため */
display:block; /* 大きさをブロック化 */
text-decoration: none; /* リンク線なし */
color:#444444; /* 文字の色 */

}

/* 横メニューのリンク部分のマウスオーバー時 */
.sample_menu2 a:hover{
background: #78E060; /* マウスオーバー時の背景色 */
}
注意：これは基本的な部分だけです。

HTMLを用意する

CSSでマウスオーバーの縦メニューサンプル
<div class="sample_menu"><a href="#">cssでマウスオーバー1</a></div>
<div class="sample_menu"><a href="#">cssでマウスオーバー2</a></div>
<div class="sample_menu"><a href="#">cssでマウスオーバー3</a></div>
<div class="sample_menu"><a href="#">cssでマウスオーバー4</a></div>

CSSでマウスオーバーの横メニューサンプル
<div class="sample_menu2"><a href="#">cssでマウスオーバー1</a></div>
<div class="sample_menu2"><a href="#">cssでマウスオーバー2</a></div>
<div class="sample_menu2"><a href="#">cssでマウスオーバー3</a></div>
<div class="sample_menu2"><a href="#">cssでマウスオーバー4</a></div>
注意：これは基本的な部分だけです。