複数あるページからそれぞれ違うメニューを表示させたいです。
ページもメニューの種類も大量にあるため、メニューはjavascript内などに
記述して、共通のコードを読むようにしたいです。
[メニューA]
・menuA-1
・menuA-2
・menuA-3
[メニューB]
・menuB-1
・menuB-2
・menuB-3
[メニューC]
(以下略)
メニューがA~の数種類あるとして、
page1.html→メニュAを表示
page2.html→メニュBを表示
page3.html→メニュAを表示
page4.html→メニュBを表示
page5.html→メニュCを表示
・
・
・
…という風にしたい。
<body class=・・・>でページ毎に名前を付け、
javascript内で条件分岐にて選択しようとしたのですが、記述の仕方が
わかりませんでした。
メニューが増えた際になるべく効率よく修正できるようにしたいです。
よろしくお願いします。
No.1ベストアンサー
- 回答日時:
こんにちは。
気になったのは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
No.3
- 回答日時:
皆さんが仰るとおり、JavaScriptが動かない環境の人への配慮を考えると、JavaScriptでどうこうするのはオススメできません。
「IFRAME」をお使いになられてはいかがでしょうか?
http://www4.plala.or.jp/airegin/css/page40.html
ただし、IFRAMEが表示されない環境もありますからね。。。
No.2
- 回答日時:
いまひとつ、されたいことがわかりませんが、
あなたのサイトが、複数のカテゴリーに分かれていて、それぞれのカテゴリー内のページを開いたときに、そのカテゴリー内のナビゲーションが表示されるということでしょうか?
もっとも効率的で楽なのは、サーバーサイドでプログラムを実行し提供するページを動的に作らせることです。作成するのは、本文だけ書き換えるHTMLを作成し、ヘッダーやナビゲーション、フッターなどはbodyのclass名でも見て置換させる。
また、共通のナビゲーションをすべてのページに入れておいて、不必要なものは見せない。あるいは、階層を隠す。
この場合メニューの変更は高機能なテキストエディタで一気に行ってしまいます。(私はEmEditop Pro)ですが、フォルダーを指定して、複数行にわたるテキストを一気に置換させています。
他にjavascriptを使ってもできなくは無いですが、基本的にデータをすべて読み込む必要があることと、javascriptが無効になっている場合に表示に問題があること。そして一番の問題は、検索エンジンに読み込まれないことです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(IT・Webサービス) メニューについて 3 2022/07/12 16:06
- PHP PHP MySql ページング 2 2022/09/20 06:38
- gooブログ ブログの記事を書きだしのみに表示したい 1 2022/06/25 19:11
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- WordPress(ワードプレス) Wordpress テーマを編集 の編集する枠が表示されない 2 2022/11/19 11:07
- Visual Basic(VBA) 【ExcelVBA】動的にボタン、ボタン名を生成できますか? 7 2022/04/08 12:54
- Excel(エクセル) [クイックアクセスツールバー]の設定ファイルの格納場所について、 5 2023/04/21 14:43
- JavaScript [Java] Edgeでのアドレスバー非表示について 3 2022/04/20 17:51
- LINE スマホを替えてから、LINEの画像が表示されなくなりました 1 2022/10/04 13:41
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HP上のPDFファイルを保存禁止...
-
プルダウンと入力を両方行う検...
-
<a href="#" …>の意味を教えて...
-
別ファイルのfunctionの読み込み方
-
javascriptでalertの文字列をコ...
-
bodyにidをつける理由は何ですか?
-
フレームを跨ぐドロップダウン...
-
base64encodeでの文字化けについて
-
getElementsByNameで要素が取得...
-
JavaScriptからVBScriptの呼び...
-
JavaScriptでiframeの内容を「...
-
processing
-
onLoadをbodyタグ以外で使用する
-
楽天商品検索APIをjavascriptで...
-
<body id=~>の用途は?
-
フォーカス移動抑止について
-
XMLHTTPRequestでstatusが0に
-
window.openでフルスクリーン表...
-
javascript内で外部ファイルを...
-
javascriptファイルは1つに統...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【SSI】include file、include ...
-
ランダムにページにアクセスしたい
-
ユーザーが更新ボタンを押さな...
-
プルダウンと入力を両方行う検...
-
ウインドウを縮小しても文字を...
-
[html] リンク先のページのラジ...
-
HP上のPDFファイルを保存禁止...
-
Html(表)のExcel出力
-
ページを訪問者にたった一度だ...
-
HTML5のcanvasで描画がされない
-
index1.htmlからindex2.htmlに...
-
「街」や「428」や「かまいたち...
-
ifraameでのランダム表示時に不...
-
SDカードに入れたjavascriptフ...
-
WebBrowserコントロール(続き)
-
カウントダウンタイマー終了で...
-
javaScriptの記述方法
-
Javaを使って、ページ更新する...
-
VBAでIEの操作→サブウインド...
-
Visual Studio C# で htmlの文...
おすすめ情報