CSSで作るナビメニュー


企業サイトのデザインなどでよく使用する角丸ナビメニュー(背景に画像を使用)。
タブメニューなどにも使えますね。
デモ: 下地をブルーの背景。背景画像にグレイの角丸メニュー。オンマウスでブルーの角丸背景画像。

HTML
<div id="sample-nav">
	<ul>
		<li><a href="#"><span>ホーム</span>
			<span class="corner">&nbsp;</span></a>
		</li>
		<li><a href="#"><span>会社案内</span>
			<span class="corner">&nbsp;</span></a>
		</li>
		<li><a href="#"><span>事業概要</span>
			<span class="corner">&nbsp;</span></a>
		</li>
		<li><a href="#"><span>アクセス</span>
			<span class="corner">&nbsp;</span></a>
		</li>
		<li><a href="#"><span>お問い合わせ</span>
			<span class="corner">&nbsp;</span></a>
		</li>
	</ul>
</div>
CSS
div#sample-nav {
	list-style-type: none;
	width:492px;
	float: left;
	padding-bottom: 6px;
	font: 12px Meiryo, "メイリオ",Georgia,Verdana,"MS Pゴシック",sans-serif;
	background: #0099cc;
	margin-right: -10px;
	overflow: hidden;
	_zoom: 1;
}
div#sample-nav ul {
	list-style-type : none ;
	width:500px;
	margin:0;
	padding:0;
	background: #fff;
	float: left;
}
div#sample-nav ul li {
	padding-right: 6px;
	background: #fff;
	float: left;
}
div#sample-nav ul li a {
	display: block;
	background: #eee url(背景画像) no-repeat 0 0;
	background-position: 0 -75px;
	padding: 4px 0px 4px 6px;
	text-decoration: none;
	color: #333 !important;
	position: relative;
	outline: none;
	float: left;
}
div#sample-nav ul li a:hover {
	background-position: 0 0px;
	color: #fff !important;
}
div#sample-nav ul li.selected a{
	background-position: 0 0px;
	color: #fff !important;
}
<p>div#sample-nav ul li a span {
	display: block;
	padding-left: 12px;
	cursor: pointer;
	font-size:14px;
	padding-top:4px;
	float: left;
}
div#sample-nav ul li a span.corner {
	display: block;
	background: url(背景画像の右角) no-repeat right 0;
	background-position: right -75px;
	position: relative;
	top:-4px;
	float: left;
}
div#sample-nav ul li a:hover span.corner {
	background-position: right 0px;
	cursor: pointer;
}
div#sample-nav ul li.selected a span.corner {
	background-position: right 0px;
	cursor: pointer;
}

関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*