ページ毎に共通のメニューを表示したい。

Question

複数あるページからそれぞれ違うメニューを表示させたいです。
ページもメニューの種類も大量にあるため、メニューはjavascript内などに
記述して、共通のコードを読むようにしたいです。

[メニューＡ]
・menuA-1
・menuA-2
・menuA-3

[メニューＢ]
・menuB-1
・menuB-2
・menuB-3

[メニューＣ]
（以下略）

メニューがＡ～の数種類あるとして、
page1.html→メニュＡを表示
page2.html→メニュＢを表示
page3.html→メニュＡを表示
page4.html→メニュＢを表示
page5.html→メニュＣを表示
　・
　・
　・

…という風にしたい。

<body class=・・・>でページ毎に名前を付け、
javascript内で条件分岐にて選択しようとしたのですが、記述の仕方が
わかりませんでした。

メニューが増えた際になるべく効率よく修正できるようにしたいです。
よろしくお願いします。

LancerVII · Accepted Answer

こんにちは。気になったのはJavaScriptが動かない人がアクセスすると何も表示されませんが良いのでしょうか？方法はいろいろありますが、jQueryを併用して一つ作ってみました。 jQueryを利用しなくても出来ますが、実装が楽になるので使っちゃいました。動作原理は・menu.jsを読み込んだページのbodyからcssクラス名を取得する・取得したクラス名に紐付くメニューを

miku-chi · Answer

皆さんが仰るとおり、JavaScriptが動かない環境の人への配慮を考えると、JavaScriptでどうこうするのはオススメできません。

「IFRAME」をお使いになられてはいかがでしょうか？
http://www4.plala.or.jp/airegin/css/page40.html
ただし、IFRAMEが表示されない環境もありますからね。。。

ORUKA1951 · Answer

いまひとつ、されたいことがわかりませんが、
　あなたのサイトが、複数のカテゴリーに分かれていて、それぞれのカテゴリー内のページを開いたときに、そのカテゴリー内のナビゲーションが表示されるということでしょうか？

もっとも効率的で楽なのは、サーバーサイドでプログラムを実行し提供するページを動的に作らせることです。作成するのは、本文だけ書き換えるHTMLを作成し、ヘッダーやナビゲーション、フッターなどはbodyのclass名でも見て置換させる。

また、共通のナビゲーションをすべてのページに入れておいて、不必要なものは見せない。あるいは、階層を隠す。
　この場合メニューの変更は高機能なテキストエディタで一気に行ってしまいます。(私はEmEditop Pro)ですが、フォルダーを指定して、複数行にわたるテキストを一気に置換させています。

他にjavascriptを使ってもできなくは無いですが、基本的にデータをすべて読み込む必要があることと、javascriptが無効になっている場合に表示に問題があること。そして一番の問題は、検索エンジンに読み込まれないことです。

ページ毎に共通のメニューを表示したい。

こんにちは。

皆さんが仰るとおり、JavaScriptが動かない環境の人への配慮を考えると、JavaScriptでどうこうするのはオススメできません。

いまひとつ、されたいことがわかりませんが、

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング