- ベストアンサー
JavaScriptでリストを縦に並べる方法とは？
- JavaScriptを使用してリストを縦に並べる方法について質問があります。特定のリストを上から下に並べることで、クリックするとメニューが表示されるような動作を実現したいです。現在はフレームページで作業を行っていて、メニューをクリックすると新しいウィンドウが開いてしまうため、左側にリストを表示し、右側にメニューを表示する方法がわかりません。具体的な手順を教えていただけると助かります。
- JavaScriptを使用してリストを縦に並べる方法について質問があります。特定のリストを上から下に並べることで、クリックするとメニューが表示されるような動作を実現したいです。現在はフレームページで作業を行っていて、メニューをクリックすると新しいウィンドウが開いてしまうため、左側にリストを表示し、右側にメニューを表示する方法がわかりません。詳しい手順を教えていただけると助かります。
- JavaScriptを使用してリストを縦に並べる方法についての質問です。特定のリストを上から下に並べることで、クリックするとメニューが表示されるような動作を実現したいです。現在はフレームページで作業を行っていて、メニューをクリックすると新しいウィンドウが開いてしまうため、左側にリストを表示し、右側にメニューを表示する方法がわかりません。手順を具体的に教えていただけると助かります。
- 0423a
- お礼率11% (11/98)
- JavaScript
- 回答数4
- ありがとう数1
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
・レイアウト変更について HTMLを変更すれば可能です。 例えばBODYの内容を <a id="menu1" href="#"><font size="+1">検索エンジン</font></a><br> <div id="sub1"> <a href="http://www.google.co.jp/">Google</a><br> <a href="http://www.yahoo.co.jp/">Yahoo</a><br> <a href="http://www.goo.ne.jp/">Goo</a><br> </div> <a id="menu2" href="#"><font size="+1">WWW</font></a><br> <div id="sub2"> <a href="http://www.w3.org/">W3C</a><br> </div> <a id="menu3" href="#"><font size="+1">その他</font></a><br> <div id="sub3"> <a href="http://www.microsoft.com/">Microsoft</a><br> <a href="http://java.sun.com/">Java(SUN)</a><br> </div> のようにすれば間が空かなくなります。 HTML、スタイルシートで可能なレイアウト変更は全て対応しているはずです。 (対応していないのは、javascriptでのonclickイベントだけです) (onclickに対応させることもできますが、面倒なので書いていません) > サブメニューは画像でも機能すると書いてありますが > メニューを画像ファイルにすることはできますか？ 可能です。IMGタグにidを指定してください。
その他の回答 (3)
- zzzzzz
- ベストアンサー率61% (70/113)
それでは使用法を書いておきます。 function init() { の前に記述されているJavascriptに関しては変更しないでください。 (javascript部分はほとんど変更しないように作ってあります) 以下では、「Menu_List (ココをクリック)」に相当するものを「メニュー」、 メニューをクリックしたときに開くものを「サブメニュー」と呼ぶことにします。 １．HTMLの準備 サブメニューをすべて同時に開いた時の表示になるようにHTMLを書いてください。 下の例をJavascriptを切って閲覧していただけば大体の感じが分かると思います。 ２．HTMLの修正 メニューとサブメニューに名前を付けます。 それぞれのタグ内に id="menu" という記述を追加してください。但し、"menu"は各タグごとに変えてください。 (異なるタグは異なるidを持つようにしてください) 下の例の<body>タグ以下を見ていただければ感じが掴めるかと思います。 下の例では、メニューのidに"menu1", "menu2", "menu3"という名前を付け、 サブメニューのidに"sub1", "sub2", "sub3"という名前を付けています。 ３．Javascriptの修正 // ********* ここにサブメニューの記述を追加してください。********** と書いてある行の直後に、 mc.append(<メニューのID>, <サブメニューのID>); という行を、メニューとそのサブメニューの組の個数分だけ記述してください。 (元から書いてあるmc.append()の行は削除してください) ここで、<メニューのID>および<サブメニューのID>は２．で決めたものを「"」でくくって書いてください。 例えば、２．までで <span id="newmenu">新しいメニュー</span> <div id="newsubmenu">このメニューに対応するサブメニュー</div> というようにHTMLを書いていたならば、 mc.append("newmenu", "newsubmenu"); という行を追加してください。 以上です。 idをきちんとつける限り、HTMLには何を書いてもかまいません。 サブメニューの内容がリンクだろうと画像だろうと正しく機能します。 表示制御以外を全て通常のHTMLとして書けるようにしていますので、 右側フレームにリンク先を表示する、という件に関しては、 <a href="content.html" target="right"> のようにすればOKです。 不明なことがありましたら補足いたします。
補足
その通りにやったら 項目を増やすことができました。 しかし一つ聞きたいのですが サブメニューをもう少し左に 寄せることはできませんか？後、メニューと の間ももう少しなくしてほしいのですが・・・。 フレームなのでできるだけ幅をとりたくないんです。 今から変更可能なようでしたらやり方を 教えてくれませんか？ 後もう一つ サブメニューは画像でも機能すると書いてありますが メニューを画像ファイルにすることはできますか？
- zzzzzz
- ベストアンサー率61% (70/113)
> 「識別子がありません」 フレームの名前が間違っているか、あるいは変数名のうつし間違いだと思います。 > 確認ですが<>はいらないんですよね？ はい。フレーム名がrightなら top.right.location.href = "http://" + url; hideMenu(act_mnu); top.right.focus(); と記述します。スペースは空けても空けなくてもかまいません。 但し、全角スペースは入れないでください。 縦に並べる、という話に移ります。 挙げられていたページの方法では、縦に並べた場合に表示間隔が開いてしまう、という問題があります。 (このページの方法は、サブメニューを静的に作成しておき、クリックで表示／非表示を切り替える、という方法をとっているため) これを回避するために、全く別の方法でスクリプトを書いてみました。 (但しNetscape4以前ではうまく動作しないと思われますが、挙げられていたページのスクリプトの方もNetscape非対応の書き方がされています) コピー＆ペーストして動きを見てみてください。 使う気がおありでしたら使用法を書きますので。 <HTML> <HEAD> <SCRIPT> <!-- function __declare_Menu() { function window.Menu(parent, submenu) { this.isHidden = false; this.parentId = parent; this.parentRef = document.getElementById(parent); this.alterNode = document.createElement("DIV"); this.menuId = submenu; this.menuRef = document.getElementById(submenu); this.prevParentOnclickHandler = null; }; new Menu("", ""); Menu.prototype.alterOnclickHandler = function(newHandler) { if (this.parentRef != null) { if ((this.parentRef.onclick) && (this.prevParentOnclickHandler == null)) { this.prevParentOnclickHandler = this.parentRef.onclick; } this.parentRef.onclick = newHandler; return true; } return false; }; Menu.prototype.restoreOnclickHandler = function() { if (this.parentRef != null) { if (this.prevParentOnclickHandler != null) { this.parentRef.onclick = this.prevParentOnclickHandler; this.prevParentOnclickHandler = null; } else { this.parentRef.onclick = null; } return true; } return false; } Menu.prototype.showMenu = function() { if (this.isHidden) { this.alterNode.parentNode.replaceChild(this.menuRef, this.alterNode); this.isHidden = false; } }; Menu.prototype.hideMenu = function() { if (!this.isHidden) { this.menuRef.parentNode.replaceChild(this.alterNode, this.menuRef); this.isHidden = true; } }; Menu.prototype.toString = function() { return this.parentId + ", " + this.menuId; }; } __declare_Menu(); function __declare_MenuCollection() { function window.MenuCollection() { this.aaa = "erere"; this.current = null; this.elements = new Object(); } new MenuCollection(); MenuCollection.prototype.append = function(parent, submenu) { this.elements[parent] = new Menu(parent, submenu); this.elements[parent].parentRef.mcObject = this; this.elements[parent].alterOnclickHandler(new Function("", "this.mcObject.onclickHandler(this.id); return false;")); }; MenuCollection.prototype.remove = function(parent) { if (this.elements[parent] !== void(0)) { this.elements[parent].hideMenu(); this.elements[parent].restoreOnclickHandler(); this.elements[parent].parentRef.mcObject = null; var tmp = this.elements; delete tmp[parent]; return true; } else { return false; } }; MenuCollection.prototype.removeAll = function() { for (var menu in this.elements) { this.remove(menu); } this.elements = null; }; MenuCollection.prototype.hideAll = function() { for (var menu in this.elements) { this.elements[menu].hideMenu(); } this.current = null; }; MenuCollection.prototype.select = function(parent) { this.elements[parent].showMenu(); this.current = parent; }; MenuCollection.prototype.onclickHandler = function(id) { if (this.current == id) { this.hideAll(); } else { this.hideAll(); this.select(id); } }; } __declare_MenuCollection(); function init() { mc = new MenuCollection(); mc.append("menu1", "sub1"); mc.append("menu2", "sub2"); mc.append("menu3", "sub3"); // ********* ここにサブメニューの記述を追加してください。********** mc.hideAll(); } --> </SCRIPT> </head> <body onload="init()" onunload="mc.removeAll()"> <a id="menu1" href="#"><font size="+1">検索エンジン</font></a><br> <div id="sub1"> <ul> <li><a href="http://www.google.co.jp/">Google</a></li> <li><a href="http://www.yahoo.co.jp/">Yahoo</a></li> <li><a href="http://www.goo.ne.jp/">Goo</a></li> </ul> </div> <a id="menu2" href="#"><font size="+1">WWW</font></a><br> <div id="sub2"> <ul> <li><a href="http://www.w3.org/">W3C</a></li> </ul> </div> <a id="menu3" href="#"><font size="+1">その他</font></a><br> <div id="sub3"> <ul> <li><a href="http://www.microsoft.com/">Microsoft</a></li> <li><a href="http://java.sun.com/">Java(SUN)</a></li> </ul> </div> </body> </html>
補足
わざわざありがとうございます。 エラーもなく正常に動いています。 これを是非使いたいと思います！ 使用法、よろしくお願いします。
- zzzzzz
- ベストアンサー率61% (70/113)
「縦に並べる」という部分の意味がよく分からないので補足をお願いします。 「Menu_List (ココをクリック)」に該当するものを縦に並べる、ということでしょうか。 (もしそうであればDHTMLを使用することになると思います) 表示先をポップアップウィンドゥではなく、右側フレームにしたい、ということに関しては、 popup = window.open("http://"+url,"MenuPopup",win_param); hideMenu(act_mnu); popup.focus() の部分を top.<frame1>.location.href = "http://"+url; hideMenu(act_mnu); top.<frame1>.focus(); とすればできます。 ここで、<frame1>の部分には右側フレームの名前を記入してください。 例えば、右側フレームを <frame src="content.html" name="bodyframe"> のように定義しているのなら、１行目は top.bodyframe.location.href = "http://"+url; とします。
補足
右側フレームに表示はなんとかできました。 しかし「行183」「識別子がありません」とエラーが でてしまいます。183行目(修正したところです) に間違いがあるらしいのですがどうしていいか わからないです・・・。そのエラーがでると修正前の popup = window.open("http://"+url,"MenuPopup",win_param); hideMenu(act_mnu); popup.focus() に戻ってしまうんですよ。 確認ですが<>はいらないんですよね？勝手に修正されて<right(フレーム名)>になってます・・・。 後、半角2マスはあける必要があるのですか？ 縦に並べるはその通りです。これについても 教えていただけると助かります＾＾;
お礼
zzzzzzさん本当に助かりました。 どうもありがとうございました。 ↓私のHPです、こんな感じで使わせていただきました。http://www.geocities.co.jp/Playtown-Rook/3945/