Search

CSSデザインナビゲーションメニュー

ナビゲーションメニュー2（ボーダータイプ）

unknown

text-decoration:none;（下線なし）にし、リンクの状態によってborderプロパティでリンク色とボーダー色を変えています。

ナビゲーションメニュー（下ボーダータイプ）

サンプルを見る
<style type="text/css">
	ul#nav2, ul#nav2 * {
		font:bold 11px Verdana,sans-serif;
	}
	ul#nav2 {
		list-style:none;
		margin:1em 0; padding:0;
	}
	ul#nav2 li {
		display:inline;
		text-align:center;
		padding:0 0 0 .5em;
	}
	ul#nav2 a:hover,
	ul#nav2 a#current {
		color:#8ea084;
		border-bottom:3px solid #d1eac4;
		text-decoration:none;
	}
	ul#nav2 a {
		color:#848684; font-weight:bold;
		border-bottom:3px solid #eee;
		text-decoration:none;
	}
</style>

<ul id="nav2">
	<li id="current"><a href="#">PHP</a></li>
	<li><a href="#" id="current">JavaScript</a></li>
	<li><a href="#">CSS</a></li>
	<li><a href="#">HTML</a></li>
	<li><a href="#">MySQL</a></li>
</ul>

ナビゲーションメニュー（左右ボーダータイプ）

サンプルを見る
<style type="text/css">
	ul#nav2_lr, ul#nav2_lr * {
		font:bold 11px Verdana,sans-serif;
		margin:0; padding:0;
		line-height:1em;
	}
	ul#nav2_lr {
		margin:1em 0; padding:0;
		line-height:1em;
		list-style:none;
		width:10em;
	}
	ul#nav2_lr li {
		margin:0 0 1px 0; padding:0;
		line-height:0;
		text-align:left;
	}
	ul#nav2_lr a:hover {
		color:#a18f6f;
		border-width:1px 5px;
		border-style:solid;
		border-color:#e3db9d;
		text-decoration:none;
	}
	ul#nav2_lr a#current {
		color:#8ea084;
		border-width:1px 5px;
		border-style:solid;
		border-color:#d1eac4;
		text-decoration:none;
	}
	ul#nav2_lr a {
		margin:0; padding:5px 0  5px 10px;
		color:#848684; font-weight:bold;
		border-width:1px 5px;
		border-style:solid;
		border-color:#ddd;
		text-decoration:none;
		display:block;
		background-color:#f7f7f7;
	}
</style>

<ul id="nav2_lr">
	<li id="current"><a href="#">PHP</a></li>
	<li><a href="#" id="current">JavaScript</a></li>
	<li><a href="#">CSS</a></li>
	<li><a href="#">HTML</a></li>
	<li><a href="#">MySQL</a></li>
</ul>

ナビゲーションメニュー（下ボーダータイプ）

サンプルを見る
<style type="text/css">
	ul#nav2_left, ul#nav2_left * {
		font:bold 11px Verdana,sans-serif;
		margin:0; padding:0;
		line-height:1em;
	}
	ul#nav2_left {
		margin:1em 0; padding:0;
		line-height:1em;
		list-style:none;
	}
	ul#nav2_left li {
		margin:0; padding:0;
		line-height:0;
		text-align:left;
	}
	ul#nav2_left a:hover {
		color:#a18f6f;
		border-left:5px solid #e3db9d;
		text-decoration:none;
	}
	ul#nav2_left a#current {
		color:#8ea084;
		border-left:5px solid #d1eac4;
		text-decoration:none;
	}
	ul#nav2_left a {
		display:block;
		margin:0; padding:5px 10px;
		color:#848684; font-weight:bold;
		border-left:5px solid #eee;
		text-decoration:none;
	}
</style>

<ul id="nav2_left">
	<li id="current"><a href="#">PHP</a></li>
	<li><a href="#" id="current">JavaScript</a></li>
	<li><a href="#">CSS</a></li>
	<li><a href="#">HTML</a></li>
	<li><a href="#">MySQL</a></li>
</ul>

ナビゲーションメニュー1（背景画像なしのシンプルなタイプ）

unknown

通常時の画像と、マウスが乗った時の画像の2枚を用意します。
以下の例では、20px*20pxの正方形のPNG画像   を使用しています。
background-repeat:repeat;を指定すると画像をx、y方向に繰り返し表示されるため、最低限のサイズの画像で済みます。

背景画像を使わない場合は、通常時（a）とマウスが乗った時（a:hover）で異なる背景色（background-color: 色;）を指定します。 width / height や margin / padding の設定は、メニューの文字数などに応じて変更して下さい。

サンプルを見る
<style type="text/css">
	#nav1, #nav1 * {
		font:bold 11px Verdana,sans-serif;
	}
	ul#nav1 {
		list-style:none;
		text-align:center;
		margin:1em 0; padding:0 0 2em 0;
	}
	ul#nav1 li {
		padding:0;
		width:8em;
		float:left;
	}
	ul#nav1 li a {	/* 通常時 */
		margin:0 5px 0 0; padding:5px;
		display:block; 
		border:1px solid #ccc;
		text-decoration:none;
		background:#fff url(/content/img/css/slash_gray.png) repeat left top;
		color:#999; font-weight:bold;
	}
	ul#nav1 li a:hover,
	ul#nav1 li a#current {	/* マウスON時、カレント時 */
		background:#fff url(/content/img/bg_stripe_dark.png) repeat left top;
		color:#fff;
	}
</style>

<ul id="nav1">
	<li><a href="#">PHP</a></li>
	<li><a href="#" id="current">JavaScript</a></li>
	<li><a href="#">CSS</a></li>
	<li><a href="#">HTML</a></li>
	<li><a href="#">MySQL</a></li>
</ul>

ナビゲーションメニュー5（背景画像入替タイプ1）

unknown

リンクにマウスが乗った時（a:hover）と通常時で、リンクの背景画像を入れ替えています。
使用している画像は、と （1px*50px）です。

サンプルを見る
<style type="text/css">
	#nav5, #nav5 * {
		font:bold 11px verdana,sans-serif;
		margin:0; padding:0;
	}
	#nav5 { 
		margin:1em 0;
	}
	#nav5 li {
		display:inline;
	}
	#nav5 a { /* ʏ펞 */
		width:100px;
		padding:5px 20px;
		color:#fff;
		text-decoration:none;
		background:transparent url(/content/img/css/nav5_off.png) repeat-x left bottom;
		border-width:1px;
		border-style:solid;
		border-color:#ccc #999 #999 #ccc;
		font-weight:bold;
	}
	#nav5 a:hover,
	#nav5 a#current {
		color:#fff;
		text-decoration:none;
		background:transparent url(/content/img/css/nav5_on.png) repeat-x left bottom;
	}
</style>

<ul id="nav5">
	<li><a href="#" id="current">PHP</a></li>
	<li><a href="#">JavaScript</a></li>
	<li><a href="#">CSS</a></li>
	<li><a href="#">MySQL</a></li>
</ul>

ナビゲーションメニュー3（背景画像をアイコン風に表示）

unknown

リンクにマウスが乗った時（a:hover）に矢印の背景画像 、 カレント時にチェックの背景画像 をを表示しています。

サンプルを見る
<style type="text/css">
	ul#nav3, ul#nav3 * {
		font:bold 11px Verdana,sans-serif;
	}
	ul#nav3 {
		list-style:none;
		margin:1em 0; padding:0;
	}
	ul#nav3 li a {
		margin:0 0 3px 0; padding:0 0 0 15px;
		color:#686349;
		text-decoration:none;
	}
	ul#nav3 li a:hover {
		text-decoration:none;
		background:#fff url(/content/img/css/nav3_hover.gif) no-repeat left top;
		color:#bdbabd;
	}
	ul#nav3 li a#current {
		text-decoration:none;
		background:#fff url(/content/img/css/nav3_current.gif) no-repeat left top;
		color:#bdbabd;
	}
</style>

<ul id="nav3">
	<li><a href="#" id="current">PHP</a></li>
	<li><a href="#">JavaScript</a></li>
	<li><a href="#">CSS</a></li>
	<li><a href="#">HTML</a></li>
	<li><a href="#">MySQL</a></li>
</ul>

ナビゲーションメニュー（table要素使用タイプ）

unknown

テーブルを使ったメニューなので、縦でも横でも自由自在。

サンプルを見る
<style type="text/css">
	#nav, #nav * {
		margin:0; padding:0;
		font:bold 11px verdana,sans-serif;
	}
	#nav {
		padding:5px;
		background-color:#eff3f7;
	}
	#nav table {
		margin:5px 0;
		background-color:#eff3f7;
		border-spacing:1px;
		border:1px solid #b1d5e3;
	}
	#nav tr.center {
		text-align:center;
	}
	#nav td {
		width:100px;
	}
	#nav a {	/* ʏ펞 */
		padding:10px;
		display:block;
		background-color:#6bb3cd;
		color:#fff;
		text-decoration:none;
	}
	#nav a:hover {	/* }EX */
		padding:10px;
		background-color:#d1e8e0;
		color:#fff;
		text-decoration:none;
	}
</style>

<div id="nav">
	<!-- ^j[ -->
	<table>
		<tr class="center">
			<td><a href="#">PHP</a></td>
			<td><a href="#">JavaScript</a></td>
			<td><a href="#">CSS</a></td>
			<td><a href="#">MySQL</a></td>
		</tr>
	</table>

	<hr />

	<!-- c^j[ -->
	<table>
		<tr><td><a href="#">PHP</a></td></tr>
		<tr><td><a href="#">JavaScript</a></td></tr>
		<tr><td><a href="#">CSS</a></td></tr>
		<tr><td><a href="#">MySQL</a></td></tr>
	</table>
</div>

ナビゲーションメニュー4（マウスが乗った時に背景画像表示）

unknown

リンクにマウスが乗った時（a:hover）に、矢印の背景画像を表示しています。

サンプルを見る
<style type="text/css">
	#nav4, #nav4 * {
		font:bold 11px Verdana,sans-serif;
		margin:0; padding:0;
	}
	#nav4 { 
		margin:1em 0;
	}
	#nav4 li {
		display:inline;
	}
	#nav4 a {	/* 通常時 */
		width:10em; padding:5px 20px;
		color:#b5ad7f;
		text-decoration:none;
		background-color:#d8d199;
		border:1px solid #c6be8c;
		font-weight:bold;
	}
	#nav4 a:hover,
	#nav4 a#current {	/* マウスが乗った時,カレント時 */
		color:#e5dda0;
		text-decoration:none;
		background:#c6be8c url(/content/img/css/nav4_on.gif) no-repeat left center;
	}
	#nav4 a.tate,
	#nav4 a.tate:hover,
	#nav4 a.tate#current {	/* 縦型 */
		display:block;
		margin:1px 0;
	}
</style>

<!-- ▼横型メニュー -->
<ul id="nav4">
	<li><a href="#" id="current">PHP</a></li>
	<li><a href="#">JavaScript</a></li>
	<li><a href="#">CSS</a></li>
	<li><a href="#">MySQL</a></li>
</ul>

<hr />

<!-- ▼縦型メニュー -->
<ul id="nav4">
	<li><a href="#" class="tate">PHP</a></li>
	<li><a href="#" class="tate" id="current">JavaScript</a></li>
	<li><a href="#" class="tate">CSS</a></li>
	<li><a href="#" class="tate">MySQL</a></li>
</ul>

ナビゲーションメニュー6（背景画像入替タイプ2）

2007/6/6

1枚の画像にマウスが乗ったときと通常時のデザインをまとめておくタイプです。

リンクにマウスが乗った時（a:hover）と通常時で、リンクの背景画像の位置（position）を変更しています。 以下のように高さ40pxの画像の場合は、20pxずつずらします。

画像を別々に用意する場合と違い、マウスが乗ったときに画像表示が遅れることもありません。

使用画像例：（85px * 40px）

【パターン1】
   

【パターン2】
   

ロールオーバー・ボタンD
リンクの位置をずらしてクリック感を演出

2007/8/19

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか？

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手（1行メッセージも送れます♪）

TOP / ご利用上の注意点 / リンクについて / RSS

©2026 PHP & JavaScript Room All Rights Reserved.

pagetop