a-blogの動作テストやら何やらでバタバタしておりまして、エントリーが遅くなりました（汗）WCAN mini Markup vol.8で出したネタをここに書いておきます。

---

今回は、前回マークアップしたHTMLをもとに、CSSをつくって「こだわりポイント」を話し合おう！という内容でした。

---

私はメインナビゲーションの部分のCSSを作りました。どうせ作るならちょっと変わったものを！と思い、A List Apartの記事を参考に、JavaScript（JQuery）を使用したナビゲーションを作りました。

---

ちなみに今、CSS Niteの「現場のプロから学ぶXHTML+CSS」を読んでいるのですが、この本にナビゲーションの作り方とそのパターンの長所と短所が簡潔にまとめてあります。（p139〜）

---

CSS Sprite

---

複数の画像ををまとめて1枚の画像にして、CSSで位置を調整して画像の一部を表示する方法です。

---

A List Apartのサンプルはこちら。CSS Sprites 2: Example 6

---

HTML

---

<ul class="nav current-about">
<li class="home"><a href="#">Home</a></li>
<li class="about"><a href="#">About</a></li>
<li class="services"><a href="#">Services</a></li>
<li class="contact"><a href="#">Contact</a></li>
</ul>

---

まず、li要素のclassに、各リンク先の名前を付けます。そしてulのclassの"current-"の後ろに、現在の（current）ページのliのclassの値を付けます。

---

<ul class="nav current-about">

---

上記の場合は、現在のページが「About」ページのときです。対応するクラスは"about"。このように書くことで、ナビの画像の切り替えと、ナビにマウスオーバーした時の処理がJSやCSSで書けるようになります。

---

CSS

---

CSSは、li要素をdisplay: inlineにし、テキストはオフレフトでtext-indentですっ飛ばします。ナビ画像は、1枚の画像を背景画像とし、pxの位置調整で画像をずらして表示しています。

---

ナビゲーションの1枚画像

---

.nav li {
	display: inline;
}
.nav li a:link, .nav li a:visited {
	position: absolute;
	top: 0;
	height: 48px;
	text-indent: -9000px;
	overflow: hidden;
	z-index: 10;
}
	.nav .home a:link, .nav .home a:visited {
		left: 23px;
		width: 76px;
	}
	.nav .home a:hover, .nav .home a:focus {
		background: url(blue-nav.gif) no-repeat -23px -49px;
	}
	.nav .home a:active {
		background: url(blue-nav.gif) no-repeat -23px -98px;
	}

---

HTMLで記述したclass"current-"は、CSSでcursor: defaultと指定し、マウスカーソルが指マークに変わらないようにしています。

---

.current-home .home a:link, .current-home .home a:visited {
		background: url(blue-nav.gif) no-repeat -23px -147px;
		cursor: default;
	}

---

JavaScript

---

JavaScriptで、ナビゲーション画像の見せ方の効果を付けます。

---

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script src="sprites2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){	
generateSprites(".nav", "current-", true, 150, "slide");
});
</script>

---

たったこれだけの記述でエフェクトが付けられるなんていいですね。

---

関連タグ：html wcan