ロールオーバー保持 - 麦茶“むぎちゃ”の時間

サイト作成で複数のページに表示させる共通メニューは、一括で作業したいものです。名前が変わったり階層が異なったりするメニューの中身を全ページ地道に変えていくのは大変です。この共通メニューはインクルードすれば管理が楽になりますが、今開いているこのページのナビをロールオーバーさせたままで強調したい！ってなことができません。本来、インクルードとは、全ページ同じ表示にしかならないものです。

今回の参考記事：『小粋空間』より
「ナビゲーションバー・シンプルタイプ（その2：クリックしたメニューのロールオーバーを保持する）」
上記はもともとMT向きの記事で、とても詳しい説明がなされています。つまり、どうやればええのかってことで、自分なりにまとめてみました。

■ やりかた（＝。＝）ｂ
インクルードする共通メニューにIDをつける。（たいてい、ul か dl のリストでしょう。）



<ul>

	<li><a href="page01.html" id="Navi01"></a><li>

	<li><a href="page02.html" id="Navi02"></a><li>

	<li><a href="page03.html" id="Navi03"></a><li>

	<li><a href="page04.html" id="Navi04"></a><li>

	<li><a href="page05.html" id="Navi05"></a><li>

</ul>

たとえば、page01.html というページができたら、そのページ内の



<PSP,SSI,MTIncludeなどによるインクルードタグ>　のすぐ下に

<script type="text/javascript" language="javascript">

	var node = document.getElementById("Navi01");

	node.parentNode.setAttribute("id","Selected");

</script>

を入れるだけ。

Navi01とは page01.html につけたIDのことで、「今表示しているページは Navi01 ですよ。」という合図。それをCSSのIDに置き換えるのが今回のポイントで、置き換えられたCSSのIDのみ適用するという作戦です。（置き換え後のCSSのID、Selected は任意の名前でよいです。）あとは、CSS上で #Selected に対して、あれやこれややります。ここからは応用で、自力本願です。
共通メニューがテキスト表示なら、現在表示中としてテキストを目立たせたいとか。



#Selected a,

#Selected a:hover {

	color		: #ff3300;

	font-weight	: bold;

}

共通メニューが画像なら、画像を隠して同じ大きさのロールオーバー画像を表示させるとか。



#Selected img {

	visibility	: hidden;

}

#Selected a {

	display		: block;

	background	: url(abc_ov.gif) no-repeat 0 0; 

}

■ メニューのリストが増えたら（＝。＝）ｂ
リストが増えたら、Navi06とでも足します。



<ul>

	<li><a href="page01.html" id="Navi01"></a><li>

	<li><a href="page02.html" id="Navi02"></a><li>

	<li><a href="page03.html" id="Navi03"></a><li>

	<li><a href="page04.html" id="Navi04"></a><li>

	<li><a href="page05.html" id="Navi05"></a><li>

	<li><a href="page06.html" id="Navi06"></a><li>

</ul>

新規作成したページ page06.html 内のインクルード部分に下記を記入。



<PHP,SSI,MTIncludeなどによるインクルードタグ>　の下に

<script type="text/javascript" language="javascript">

	var node = document.getElementById("Navi06");

	node.parentNode.setAttribute("id","Selected");

</script>

を入れるだけ。

以上です。今後リストがいくつ増えてもインクルードでのロールオーバー保持が、らくらくラックツリラックです。

あまり増えることがないメインメニューについては、JavaScript部分を *.jsファイルに格納してスマートに記述するのがよいでしょうね。
しかし、これからぞくぞく増える可能性のあるサブメニューについては、*.jsファイルが増えていくほうがスマートではなくなってしまうし、作業が手間です。この場合は、例のようにそのまま記入で。

JavaScriptを自力で入力できる人や phpを使い倒している人なら、もっとシンプルなものができそうです。こっちのがええで！ってのがあったら、どうか教えてください。