（JavaScriptなどの）外部ファイルでプルダウンメニューを一括管理するには？

投稿者

投稿内容

さとか: 会議室デビュー日: 2008/03/11; 投稿数: 5

投稿日時: 2008-03-11 21:02

JavaScript初心者です。
（JavaScriptなどの）外部ファイルでプルダウンメニューを一括管理するにはどのようにしたら良いのでしょうか？
現在は、各ページに下記のようなソースで、メニューを追加するたびに全てのページを更新しなければなりません。

_______________________________________________________________________________

<html>
<head>
<title>サンプル</title>

<link rel="stylesheet" type="text/css" href="menu.css" media="all">

<script Language="JavaScript"></script>

</head>
<body>

<div class="menuA" style="position:absolute;top:5px;left:5px;">
<a href="javaScript:pulldownmenu('a')">
　　<IMG src="image/a.gif" onmouseover="this.src='image/ah.gif'" onmouseout="this.src='a.gif'" width="100" height="50" border="0" alt="A">
</a>
</div>
<div id="a" class="menuA" style="position:absolute;top:55px;left:5px;visibility:hidden">
<a href="a.html" style="font-size:15px;">Ａ-１のページ</A><BR>
</div>
<div id="a" class="menuA" style="position:absolute;top:55px;left:5px;visibility:hidden">
<a href="a.html" style="font-size:15px;">Ａ-２のページ</A><BR>
</div>

<div class="menuB" style="position:absolute;top:5px;left:105px;">
<a href="javaScript:pulldownmenu('b')">
　　<IMG src="image/b.gif" onmouseover="this.src='image/bh.gif'" onmouseout="this.src='b.gif'" width="100" height="50" border="0" alt="B">
</a>
</div>
<div id="b" class="menuB" style="position:absolute;top:55px;left:105px;visibility:hidden">
<a href="b.html" style="font-size:15px;">Ｂ-１のページ</A><BR>
</div>
<div id="b" class="menuB" style="position:absolute;top:55px;left:105px;visibility:hidden">
<a href="b.html" style="font-size:15px;">Ｂ-２のページ</A><BR>
</div>

</body>
</html>
_______________________________________________________________________________

どなたか、助けてください！
よろしくお願いします。

じゃんぬねっと: ぬし; 会議室デビュー日: 2004/12/22; 投稿数: 7811; お住まい・勤務地: 愛知県名古屋市

投稿日時: 2008-03-11 21:08

Visual Studio や Web Expression でマスタページ機能を使ったりするのが今風なのではないでしょうか。一昔前だと Fontpage などで「共有枠」という機能がありました。ともかく一括で更新できます。

_________________
C# と VB.NET の入門サイト
じゃんぬねっと日誌

さとか: 会議室デビュー日: 2008/03/11; 投稿数: 5

投稿日時: 2008-03-12 11:22

じゃんぬねっと様

早速のご返答ありがとうございます。
質問の書き方が悪かったのですが、デザインの共有では無く、ページを増やす＝メニュー項目を増やす度に全てのページを更新しなければならないので、メニュー項目の一括管理をしたいのです。
＊しかも、前回のソースは一部間違っておりました。
　混乱を招き、申し訳ございません。
フレームが画面が小さくなるので、フレーム以外での方法を探しております。
何度もお手数をおかけして申し訳ございませんが、ご教授いただけませんでしょうか。
よろしくお願いいたします。
_______________________________________________________________________________

<html>
<head>
<title>サンプル</title>

<script Language="JavaScript"></script>

</head>
<body>

<div style="position:absolute;top:5px;left:5px;">
<a href="javaScript:pulldownmenu('a')">
　　<IMG src="image/a.gif" border="0" alt="A">
</a>
</div>
<div id="a" style="position:absolute;top:55px;left:5px;visibility:hidden">
<a href="a.html"Ａ-１のページ</A><BR>
<a href="a.html">Ａ-２のページ</A><BR>
</div>

<div style="position:absolute;top:5px;left:105px;">
<a href="javaScript:pulldownmenu('b')">
　　<IMG src="image/b.gif" border="0" alt="B">
</a>
</div>
<div id="b" style="position:absolute;top:55px;left:105px;visibility:hidden">
<a href="b.html">Ｂ-１のページ</A><BR>
<a href="b.html">Ｂ-２のページ</A><BR>
</div>

</body>
</html>
_______________________________________________________________________________

あつしfx: 大ベテラン; 会議室デビュー日: 2002/04/08; 投稿数: 104; お住まい・勤務地: XPできるところ

投稿日時: 2008-03-15 01:24

検証してませんが。
SEOなどの見地から見た場合ですと、ページにテキストリンクを書いたほうがいいので全ページ更新は仕方ありません。
PHPなどのサーバサイドスクリプトでメニューを動的に表示すべきでしょう。
コンテンツマネジメントシステムを使えば、比較的楽に導入できるとは思います。
_________________
http://aglabo.com/ @Homepage
http://furukawa-select.com/mt/ @Blog

indigo-x: 大ベテラン; 会議室デビュー日: 2008/02/21; 投稿数: 207; お住まい・勤務地: 太陽の塔近く

投稿日時: 2008-03-15 07:03

楽をしようと思うと、

(じゃんぬねっとさん、あつしfxさんと同じですが)

動的にスクリプトを吐く必要があると思います。

で、サーバーサイドが何なのかを記述する必要があるのでは。。。

（PHP,ASP.NET,Struts)

Anthyhime: ぬし; 会議室デビュー日: 2002/09/10; 投稿数: 437

投稿日時: 2008-03-15 08:22

外部にJavaScriptファイルを置いて、DOMで動的に<option>タグを追加すればできますよ。
そのファイルを全体のページでリンクすればよいだけです。

kuma: 大ベテラン; 会議室デビュー日: 2004/02/25; 投稿数: 110

投稿日時: 2008-03-15 10:03

私はあまりJavaScriptが好きではないので使いませんが
(ブラウザを限定すれば？)次のようなこともできます。

test.html

コード:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <title>test</title>
    <script type="text/javascript" src="test.js"></script>
  </head>
  <body>
    <div id="hint" />
    <script>
      createHint();
    </script>
  </body>
</html>

test.js

コード:

function createHint() {
  hintElement = document.all.hint;
  aElement = document.createElement("a");
  aElement.setAttribute("href","http://www.tohoho-web.com/js/dom.htm");
  aElement.innerHTML = "参照ページ";
  hintElement.appendChild(aElement);
}

p.s.
個人的にはサーバサイドが無くてもXSLTなどで一括更新するかな

さとか: 会議室デビュー日: 2008/03/11; 投稿数: 5

投稿日時: 2008-03-16 22:21

皆様
ご教授ありがとうございます！
PHPかXSLTが良さそうですね。
（作成しているのは社内HPなので、とりあえずはJavaScriptで組み、勉強しながらPHPかXSLTに移行したいと思います。）

じゃんぬねっと様
もしかして、見当違いな返信をしていたら申し訳ございません。
Visual Studio、Web Expression、マスタページ機能、Fontpageなど、全て初めて聞いた単語で、ネット検索で調べて返信しましたが、indigo-x様のアドバイスを読むと私の勘違いのようですね。
せっかくのアドバイスなのに、きちんと内容が受け取れず、すみませんでした。

あつしfx様、indigo-x様
PHP（JavaScriptもですが・・・）は自分一人でまともにコーディングできないので（もちろん自分でコーディングできるのが一番ですが、一からその勉強をしていては、いつまでたっても完成できず、上司にあきれられてしまいそうなので）、ネットでソースを拾ってきて修正することになるかと思います。
下記のページを見つけ、掲示板を修正して使おうと思ったのですが、現在、文字化けで悩んでます。（汗）
http://phpspot.net/php/
もし、お勧めサイトなどございましたら、ご教授ください。
よろしくお願いいたします。

Anthyhime様
アドバイスありがとうございます。
ただ、恥ずかしながらJavaScriptを自分一人でまともにコーディングできず、「DOMで動的に<option>タグを追加する」とは、どうして良いのか分かりません。
＊JavaScriptはネットで拾ってきたソースを修正して使っています。
下記ページを参考にして勉強しておりますが、もし、良いサイトがございましたらご教授ください。
http://www.tohoho-web.com/js/dom.htm
または、もう少し詳細にご教授いただけませんでしょうか。
よろしくお願いいたします。

kuma様
XSLTは初めて聞いた単語ですが、ネット検索したところ、とても面白そうな気がします。
もし、下記ページより初心者向けのお勧めサイトがあればご教授ください。
http://www.atmarkit.co.jp/fxml/tanpatsu/xslt/xslt00.html
よろしくお願いいたします。

1|2 次のページへ»

（JavaScriptなどの）外部ファイルでプルダウンメニューを一括管理するには？

スキルアップ／キャリアアップ（JOB@IT）