今回は、3State CSSメニューの作り方を紹介します。3 Stateとは、1:普段の状態、2:マウスをメニュー上に動かした時の状態、3:ページにいることを表した状態の三つの状態のことをいい、http://www.sagawa-exp.co.jp/ のメニューなどがいい例です。

ビデオ1

ビデオ2

コード

<!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>