- ベストアンサー
ページ毎に異なるメニューを表示する方法
- 複数のページからそれぞれ異なるメニューを表示する方法について解説します。ページごとに名前を付けた<body>タグと、JavaScriptの条件分岐を使用することで、効率的に異なるメニューを表示することができます。
- ページごとに名前が付けられた<body>タグを使い、JavaScriptの条件分岐を組み合わせることで、異なるメニューを表示することができます。複数のメニューの種類がある場合でも、追加や修正が容易にできる方法です。
- ページごとに名前が付けられた<body>タグを使用し、JavaScriptの条件分岐を組み合わせることで、異なるメニューを表示する方法を解説します。メニューの追加や修正があっても、わかりやすい構造になっているため、効率的に対応することができます。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 気になったのはJavaScriptが動かない人がアクセスすると何も表示されませんが良いのでしょうか？ 方法はいろいろありますが、jQueryを併用して一つ作ってみました。 jQueryを利用しなくても出来ますが、実装が楽になるので使っちゃいました。 動作原理は ・menu.jsを読み込んだページのbodyからcssクラス名を取得する ・取得したクラス名に紐付くメニューを<ul id="menu">に追加する page1.html <body class="menu-a"> page2.html <body class="menu-b"> page3.html <body class="menu-a"> page4.html <body class="menu-b"> page5.html <body class="menu-c"> で試しています。 ==== 動作確認サンプル http://hppg.moe.hm/okwave/qa/q7346039/index.html ==== JavaScriptファイル http://hppg.moe.hm/okwave/qa/q7346039/menu.js
その他の回答 (2)
- もこ猫ミクにゃん（@miku-chi）
- ベストアンサー率31% (3132/9928)
皆さんが仰るとおり、JavaScriptが動かない環境の人への配慮を考えると、JavaScriptでどうこうするのはオススメできません。 「IFRAME」をお使いになられてはいかがでしょうか？ http://www4.plala.or.jp/airegin/css/page40.html ただし、IFRAMEが表示されない環境もありますからね。。。
お礼
遅くなりましてすいません。ありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
いまひとつ、されたいことがわかりませんが、 あなたのサイトが、複数のカテゴリーに分かれていて、それぞれのカテゴリー内のページを開いたときに、そのカテゴリー内のナビゲーションが表示されるということでしょうか？ もっとも効率的で楽なのは、サーバーサイドでプログラムを実行し提供するページを動的に作らせることです。作成するのは、本文だけ書き換えるHTMLを作成し、ヘッダーやナビゲーション、フッターなどはbodyのclass名でも見て置換させる。 また、共通のナビゲーションをすべてのページに入れておいて、不必要なものは見せない。あるいは、階層を隠す。 この場合メニューの変更は高機能なテキストエディタで一気に行ってしまいます。(私はEmEditop Pro)ですが、フォルダーを指定して、複数行にわたるテキストを一気に置換させています。 他にjavascriptを使ってもできなくは無いですが、基本的にデータをすべて読み込む必要があることと、javascriptが無効になっている場合に表示に問題があること。そして一番の問題は、検索エンジンに読み込まれないことです。
お礼
おそくなりましてすいません。ありがとうございました。
お礼
遅くなりましてすいません。 参考にさせていただき、jQueryで作成することができました。 ありがとうございました。