一番人気が高いCSSメニューの制作方法

T_1_back

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

ビデオ1

[youtube=http://www.youtube.com/watch?v=HeX2QgOU21E&rel=0&w=590]

ビデオ2

[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>
Facebook
Google+
Twitter
LinkedIn
Pinterest

ご相談ください

弊社では、案件のサイズに関係なくコストパフォーマンスの高いウェブ制作サービスを提供しております。

気軽にご相談ください。

Email: info@unilance.co.jp
Tel: 03 5830 7277

Wordpress、Laravel、React Natvieを得意としたウェブシステム開発会を行っております。社多言語対応も可!
気軽にお問合せください。

About

  • Stories
  • Community
  • Blog
  • Careers
  • Brand Assets

Downloads

  • Coming Soon...
  • Coming Soon...
  • Coming Soon...
  • Coming Soon...
  • Coming Soon...

© All rights reserved

Made with ❤ in Sugito, Saitama, Japan