ナビ部分を共通htmlにした上で、各ページごとにactiveな項目を明示する方法

f:id:fushimik:20130813103712p:plain

グローバルナビにDreamweaverのライブラリを使用したいが、class="active" を付けなきゃいけないからなー
メニューが一つ増えたり、ナビの内容が変わるたびに、全ページにナビ部分のソースをコピーして、該当するページのところに、class="active"を付けていく??
それめんどくさい!

JSで解決している人も多いようですが、こんなふうにCSSで解決している人も多いはず。

全ページの body 要素に 個別のIDかClassを付けます。
わかりやすいように、ファイル名やディレクトリ名とか、ページ名を想像できるものがいいです。

htmlはこんな感じです。

 :
<body class="product">
 :
<nav>
	<a class="nav1" href="index.html">HOME</a>
	<a class="nav2" href="product.html">製品一覧</a>
	<a class="nav3" href="company.html">会社概要</a>
	<a class="nav4" href="inquiry.html">お問合せ</a>
</nav>
 :

上記は、/product.htmlのとして保存してあるので、わかりやすくclass名を product としてみました。
cssでは、こんな風に書きます。

body.index   a.nav1 {background-color:red;}
body.product a.nav2 {background-color:red;}
body.company a.nav3 {background-color:red;}
body.inquiry a.nav4 {background-color:red;}

これで、全ページで