サイドメニューのうち,現在選択されているメニューのみスタイルを変更したいと考えています。
しかし,サイドメニュー部分のコード(HTML)はテンプレート化したいので,選択されているアンカー部分にclass="chosen"のようなclassを指定し,CSSでスタイルを定義するような方法は避けたいのです。
出来ればJavaScriptは使いたくありませんが,CSSだけでは無理であればJavaScriptもありです。但しその場合でも,最悪JavaScriptオフな環境の時,レイアウトが破綻することは避ける必要があります。
具体的な手順がなくても,参考になるサイトを教えて頂けるだければ結構です。
よろしくお願いします。
単純にHTML + CSSでは難しいかと思います。
あとは、各ページごとにメニュー項目のスタイルを変えるのを、サーバ側で行うか、クライアント側で行うかという選択肢があるかと思います。
サーバ側で行うのであれば、テンプレート化というのが何を意味しているかによって方法は変わりますが、メニュー部分をCGIなどで出力して、表示ページによって対応する項目のスタイルを変更すればよいのかと思います。これであれば、JavaScriptが利用できない環境でもOKですが、その分、サーバでの処理が必要となります。
例えば、次のような感じです。
$uri = $_SERVER['REQUEST_URI']; $classes = array('normal', 'normal', 'normal' ...); if ($uri == 'XXXXX') { $classes[0] = 'selected'; } ・・・ <div id="menu1" class="<?= $classes[0] ?>">Menu1</div> <div id="menu2" class="<?= $classes[1] ?>">Menu2</div> <div id="menu3" class="<?= $classes[2] ?>">Menu3</div>
クライアントで行うのであれば、JavaScriptが妥当かと思いますが、HTML上のスタイルは全て非選択のスタイルを指定しておき、onLoadか何かの処理で、表示ページによって、対応する表示項目のメニューだけ、選択時のスタイルに書き換えれば十分かと思います。
例えば、次のような感じです。
var onLoad = function = { if (document.URL == 'XXXXX') { document.getElementById('menu1').className = 'selected'; } else if (document.URL == 'YYYYY') { ・・・ } ・・・ } <div id="menu1" class="normal";">Menu1</div> <div id="menu2" class="normal";">Menu2</div> <div id="menu3" class="normal";">Menu3</div>
いかがでしょうか?
クライアントで動くスクリプトを使わずにということだと、
リンクをクリックしたときにページそのものを差し替える。
<a href="hoge1.html" target="_self">
メニューの数だけページを用意して、現在表示しているメニューのスタイルを変えておく。クライアントの方で、同じページであるかのように錯覚してくれればいいですが、画面を遷移するとちらついたような感じがすると思います。
一番スマートなのは、JavaScriptなどを使うことだとおもいます。
スクリプトoffのブラウザの場合はスタイル変更なしで妥協できないですか。
<noscript>でJavaScript有効の方がベターであると表示するなどしたらどうでしょう。
リンクをクリックしたら,ページ全体が切り替わるのですから,「リンクをクリックしたときにページそのものを差し替える。」というのは当然のことです。
メニューに記載しているコンテンツをすべてロードしておき,メニューをクリックしたらサーバー通信なしで表示を切り替えるようなところまでは考えておりません。
「テンプレート化」というのは,御回答のソースでいうと,id="menu1"以下3行を固定にしたい,という意味でとらえてください。
御回答の内容は理解できました。ありがとうございます。