今回は、３State CSSメニューの作り方を紹介します。3 Stateとは、１：普段の状態、２：マウスをメニュー上に動かした時の状態、３：ページにいることを表した状態の三つの状態のことをいい、http://www.sagawa-exp.co.jp/ のメニューなどがいい例です。
ビデオ１
[youtube=http://www.youtube.com/watch?v=HeX2QgOU21E&rel=0&w=590]
ビデオ２
[youtube=http://www.youtube.com/watch?v=BNoMwKNqA7s&rel=0&w=590]
コード
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#hover_menu {
list-style: none;
margin: 200px auto 0;
padding: 0;
width: 600px;
}
#hover_menu li {
float: left;
margin: 0 10px;
}
#hover_menu li a {
text-indent: -9999px;
background: url(hover_menu.png) no-repeat left top;
display: block;
height: 40px;
width: 120px;
}
#hover_menu li#about a {
width: 150px;
background-position: -120px top;
}
#hover_menu li#contact a {
width: 210px;
background-position: -270px top;
}
#hover_menu li#home a:hover {
background-position: left -39px;
}
#hover_menu li#about a:hover {
background-position: -120px -39px;
}
#hover_menu li#contact a:hover {
background-position: -270px -39px;
}
#home_page #hover_menu li#home a {
background-position: left -79px;
}
#about_page #hover_menu li#about a {
background-position: -120px -79px;
}
#contact_page #hover_menu li#contact a {
background-position: -270px -79px;
}
</style>
</head>
<body id="home_page">
<ul id="hover_menu">
<li id="home"><a href="#">ホーム</a></li>
<li id="about"><a href="#">会社概要</a></li>
<li id="contact"><a href="#">お問い合わせ</a></li>
</ul>
</body>
</html>
