ナビ部分を共通htmlにした上で、各ページごとにactiveな項目を明示する方法
グローバルナビに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;}
これで、全ページで