innerHTMLでドロップダウンメニューの作り方

解決済

質問者：kuda_maki
質問日時：2013/06/14 19:07
回答数：2件

CSSだけで作るドロップダウンメニューのHTMLの構造って↓みたいな感じらしいんですが、

<ul id="dropmenu">
<li><a href="#">メニュー</a>
<ul　id="submenu">
<li><a href="#">サブメニュー</a></li>
<li><a href="#">サブメニュー</a></li>
<li><a href="#">サブメニュー</a></li>
<li><a href="#">サブメニュー</a></li>
</ul>
</li>
</ul>

これのサブメニューを配列からinnerHTMLで生成するときに、

var links="";
site[0]={link:'http;www',title:'アマゾン'};
site[1]={link:'http;www',title:'紀伊国屋'};
site[2]={link:'http;www',title:'ヤフーオークション'};

for(var m = 0; m < site.length; m++){
links += '<li><a href=" '+site[m]['link']+' ">'+site[m]['title']+'</a></li>';
}

document.getElementById("submenu").innerHTML=links;

<html>
<body>
<ul id="dropmenu">
<li><a href="#">メニュー</a>
<ul　id="submenu">
</ul>
</li>
</ul>
</body>
</html>

で、全く動きません。勉強中の自分には何処がオカシイのかすら分かりません。
何処がオカシイか指摘してください。または、もっとスマートに出来る方法がありましたら、ヒントだけでもご提示いただけたら幸いです。
よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

No.1

回答者： fujillin
回答日時：2013/06/14 20:27

2箇所ほど修正してみてください。

1）siteが配列として定義されていないので、先に
　　　var site = [];　などで、定義しておく
2）<ul　id="submenu">のul◇idの◇部分を半角スペースに

それで、DOM ready後にスクリプトが実行されていれば、HTMLに追記されると思います。

追記できても動作しない場合は、CSSが正しく設定されているかどうかも確認をしてみてください。

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。
指摘いただいた記法ミスは、ここに手打ちでコピペしたときにミスったもので、本プログラムでは間違っていませんでした。

あと、DOMreadyの意味が調べてもちょっと難解だったので分からないのですが、挿入場所が間違っているのでしょうか？自分は、GoogleAjaxFeedAPIでRSSを表示するときに、google.load("feeds", "1");の前にこのプログラムを足しました。この位置が悪いのでしょうか？（位置は何箇所か変えてやりましたが、結果はどこも同じ）

また、このプログラムを挿入すると本来動いたはずのGoogleAjaxFeedAPIのフィード読み取りプログラムが停止したので、CSSのミスではなくプログラミングが致命的にミスってると思われます。更に、document.getElementById("submenu").innerHTML=links;を消した時に、一応フィード読み取りプログラムが動作したので、この一文がミスってる可能性が高いです。
2日ぐらい、この一文について考えているのですが、どうにもわかりません。jqueryのappendを使ったり試行錯誤はしましたが、動作はすれど結果には反映されずという感じでした。

通報する

お礼日時：2013/06/14 21:16

No.2ベストアンサー

回答者： fujillin
回答日時：2013/06/16 00:03

A No1です。

＞～を消した時に、一応フィード読み取りプログラムが動作したので、この一文がミスってる可能性が高いです。
文法上はおかしくないと思います。

スクリプトの一部のみをご提示のようですが、不具合を再現できるミニマムなセットを提示いただければもう少しわかるかもしれません。

単純に、他のスクリプト等をなくした状態でも、ご提示のコードは動作しますか？
根拠のない推測ですが、A No1にも書きましたように、DOM構築前にスクリプトが実行されていてエラーになっているということはないのでしょうか。

window.onloadの関数として実行するなどで、試してみてみてください。