JavaScriptでリストを縦に並べる方法とは？

前へ 次へ
このQ&Aのポイント
  • JavaScriptを使用してリストを縦に並べる方法について質問があります。特定のリストを上から下に並べることで、クリックするとメニューが表示されるような動作を実現したいです。現在はフレームページで作業を行っていて、メニューをクリックすると新しいウィンドウが開いてしまうため、左側にリストを表示し、右側にメニューを表示する方法がわかりません。具体的な手順を教えていただけると助かります。
  • JavaScriptを使用してリストを縦に並べる方法について質問があります。特定のリストを上から下に並べることで、クリックするとメニューが表示されるような動作を実現したいです。現在はフレームページで作業を行っていて、メニューをクリックすると新しいウィンドウが開いてしまうため、左側にリストを表示し、右側にメニューを表示する方法がわかりません。詳しい手順を教えていただけると助かります。
  • JavaScriptを使用してリストを縦に並べる方法についての質問です。特定のリストを上から下に並べることで、クリックするとメニューが表示されるような動作を実現したいです。現在はフレームページで作業を行っていて、メニューをクリックすると新しいウィンドウが開いてしまうため、左側にリストを表示し、右側にメニューを表示する方法がわかりません。手順を具体的に教えていただけると助かります。
回答を見る
  • ベストアンサー

JavaScriptで質問があります。

http://bunjin.com/java/link_list.html このスクリプトで質問があるんですが このリストを何列か縦に並べることってできますか？ その時、間はあけたくないんですが 上のリストをクリックすると下のが下がり メニューが現れるという感じなんですが。 自分はフレーム縦2分割の ページなんですが そのメニューをクリックするとどうしても 新しいウインドウで開いてしまうんですよ フレームページの左側で選んで 右側に表示させたいんですが・・・・。 自分はJavaあまり詳しくないので やり方を具体的に教えてくださると助かります。 わかりにくかったら補足します。

  • 0423a
  • お礼率11% (11/98)

質問者が選んだベストアンサー

  • ベストアンサー
  • zzzzzz
  • ベストアンサー率61% (70/113)
回答No.4

・レイアウト変更について HTMLを変更すれば可能です。 例えばBODYの内容を <a id="menu1" href="#"><font size="+1">検索エンジン</font></a><br> <div id="sub1"> &nbsp;&nbsp;<a href="http://www.google.co.jp/">Google</a><br> &nbsp;&nbsp;<a href="http://www.yahoo.co.jp/">Yahoo</a><br> &nbsp;&nbsp;<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"> &nbsp;&nbsp;<a href="http://www.w3.org/">W3C</a><br> </div> <a id="menu3" href="#"><font size="+1">その他</font></a><br> <div id="sub3"> &nbsp;&nbsp;<a href="http://www.microsoft.com/">Microsoft</a><br> &nbsp;&nbsp;<a href="http://java.sun.com/">Java(SUN)</a><br> </div> のようにすれば間が空かなくなります。 HTML、スタイルシートで可能なレイアウト変更は全て対応しているはずです。 (対応していないのは、javascriptでのonclickイベントだけです) (onclickに対応させることもできますが、面倒なので書いていません) > サブメニューは画像でも機能すると書いてありますが > メニューを画像ファイルにすることはできますか？ 可能です。IMGタグにidを指定してください。

0423a
質問者

お礼

zzzzzzさん本当に助かりました。 どうもありがとうございました。 ↓私のHPです、こんな感じで使わせていただきました。http://www.geocities.co.jp/Playtown-Rook/3945/

その他の回答 (3)

  • zzzzzz
  • ベストアンサー率61% (70/113)
回答No.3

それでは使用法を書いておきます。 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です。 不明なことがありましたら補足いたします。

0423a
質問者

補足

その通りにやったら 項目を増やすことができました。 しかし一つ聞きたいのですが サブメニューをもう少し左に 寄せることはできませんか？後、メニューと の間ももう少しなくしてほしいのですが・・・。 フレームなのでできるだけ幅をとりたくないんです。 今から変更可能なようでしたらやり方を 教えてくれませんか？ 後もう一つ サブメニューは画像でも機能すると書いてありますが メニューを画像ファイルにすることはできますか？

  • zzzzzz
  • ベストアンサー率61% (70/113)
回答No.2

> 「識別子がありません」 フレームの名前が間違っているか、あるいは変数名のうつし間違いだと思います。 > 確認ですが<>はいらないんですよね？ はい。フレーム名が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>

0423a
質問者

補足

わざわざありがとうございます。 エラーもなく正常に動いています。 これを是非使いたいと思います！ 使用法、よろしくお願いします。

  • zzzzzz
  • ベストアンサー率61% (70/113)
回答No.1

「縦に並べる」という部分の意味がよく分からないので補足をお願いします。 「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; とします。

0423a
質問者

補足

右側フレームに表示はなんとかできました。 しかし「行183」「識別子がありません」とエラーが でてしまいます。183行目(修正したところです) に間違いがあるらしいのですがどうしていいか わからないです・・・。そのエラーがでると修正前の popup = window.open("http://"+url,"MenuPopup",win_param); hideMenu(act_mnu); popup.focus() に戻ってしまうんですよ。 確認ですが<>はいらないんですよね？勝手に修正されて<right(フレーム名)>になってます・・・。 後、半角2マスはあける必要があるのですか？ 縦に並べるはその通りです。これについても 教えていただけると助かります＾＾;

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • ホームページビルダー１１を使っているのですが・・・

    フレームを縦に２つに分割したページを作っています。 左側にメニューを表示して、右側のフレームには色々な情報をのせる・・というとこまでは出来ました。 その後なんですが、左のメニューの例えば「新着情報」をクリックしたら、右側のフレームが新着情報を表示している場所へとぶ（下がる？）ようにしたいのですが、やりかたがわかりません。 ラベルを付けることはできるのですが、メニューの「新着情報」の文字列にラベルへのリンクを貼ると、左側のフレームがそこへとんでしまいます・・・。 ガイドを見てもわからずお手上げ状態なので、どなたかわかる方がいたら教えて下さい！！お願いします！

  • リストボックスからのリンク

    新年明けましておめでとうございます。 sweetnovemberと申します。 早速質問です。 ホームページビルダーにてフレームで縦2分割したページの右側のフレームに リストボックスを設置したのですが、そこから目的のページ（フレーム縦2分割 されたページ）へ新規ウィンドウでリンクを貼りたいのですが どのようなスクリプトを記述したらよろしいのでしょうか？ 今のままだと、フレームの中に更にフレームページが出来てしまい 見ずらいのです。 宜しくお願い致します。 HPの提出期限が迫っているのでお願いしますっ！ （また、リストボックスとオプションメニューの違いも教えていただきたいです）

  • alphaEDIT フレームターゲット

    alphaEDITでホームページを作成しています。 フレームを縦２分割にして左側のフレームにメニュー、右側にメニュー 画面にあるメニュー項目をクリックすると右側のフレームの画面が切り替わる・・という風にしたいのですが、メニュー項目にリンクをつける時にターゲットの項目にrightがないので、自分でrightとターゲットのところに記入して見たのですが、実際にネット上で動かすと右側に独立して新しいウインドウページが飛び出てしまいます。 枠の中でパシャツと変わらないのです。 そうするためには、ターゲットの選択は、何にしたらいいでしょうか？

    • ベストアンサー
    • HTML
  • ホームページビルダーのフレームのトップページの表示がおかしい。

    ホームページビルダー11で3分割のフレームページをつくりました。トップページの上や左側のフレームからのリンクをクリックすると、右側のフレームに表示されるのですが、トップページをクリックすると右側のフレームに3分割されたトップページが表示されてしまうのです。 どうしたらよいのかお分かりになる方教えていただけますようお願いいたします。

  • フレームから場所を指定したリンクを・・・

    　今私が製作しているホームページはフレームを縦に二分割しています。 左側のフレームにメニューとしてリンク用のボタンをおいて、右側のフレームにメインのページをおいてます。 今回あまりにも長いページが１ページできてしまったのでリンク用のボタン二つを用意し、長いページの中に二箇所<a name="～"></a>と付けました。 左側のリンク用のボタンにも<a href="～.html#～></a>としているのに、 実際クリックするとその長いページの頭から普通に表示されてしまいます。 フレームをつかってメインの方に場所を指定してリンクはできないのでしょうか？ 読みにくい文章で申し訳ありませんがどなたか助けてください。

    • ベストアンサー
    • HTML
  • フレームで分かれたページへのリンク

    フレームで分割されていないページからフレームで分かれているページへリンクしたいのですが、そのときにリンク先によりフレームに表示されるページを指定したいのですがうまくできません・・・どうしたらいいのでしょうか？ たとえば TOPページからリンクしていくと左側のフレームへメニューで右側には指定されたリンク先のページが表示するように。なのでクリックされたリンクが変わればそのページも違うページが表示されるようにです。 どうかよろしくお願いします。

    • ベストアンサー
    • HTML
  • フレームで使用したいアプレットのソースを教えて下さい

    初めまして。どうしてもやりたいアプレットがあり、「Star Select」というものですが（下記アドレス参照）、そこでは、フレームをする際のソースを公開してません。 でも、左右フレーム分割して、左側にメニューし、右側にlinkしたいのですけど、それをこのキラキラ効果の「Star Select」でやりたいのですが、どなたかどこを追加すればフレーム対応で出来るのか教えて下さいませんか？ ない、一応パラメータ説明は、このアドレスで説明文がのってますけど、あまり知識がないのでどうやっても自分では出来ませんでした。 宜しくお願いします。 http://homepage1.nifty.com/7/java/StarSelect/StarSelect.html あと、この上記の「フレームサンプル」ページでは、ソースが見れなくなってますけど、どうやってやってるのかも分かる方がいらっしゃったら教えて下さい。

  • このjavaスクリプトをjavaアプレットで表現するには

    http://bunjin.com/java/hanabi_samp.html http://bunjin.com/java/hanabi.html　(ソース) この花火のjava scriptを、クリックしたところで表示されるようなjavaアプレットにしたいのですが、どう記述すれば良いのでしょうか？ java scriptが読めないのでわかりません…。 どなたか分かる方お願いします。

  • ホームページビルダー９　リンクエラーの件

    ホームページのTOPページをフレームで縦に２分割しています。 左列にメニューを羅列し、そこをクリックすると右側が切り替わります。 今まで問題ありませんでしたが、突然、クリックしてもリンクを貼ったページに飛ばなくなりました。 「ターゲット」を「右のページ」から「新しいウインド」に変更すると新しいウインドは開きます。 たまにデバッカーが開くのですが、直し方がよく分かりません。 どうやら、アクセス分析のためのHTMLが悪さをしているみたいなのですが、よく分かりません。 私のHPは、internet explorerで開くと、最初に左のメニューが表示されて、次に右側にコンテンツが開きます。右のコンテンツが開かない間に、左のメニューを押すと正常に動きます。 詳しい方、解決方法を教えて下さい。 よろしくお願いします。

  • JavaScriptでウィンドウを操作する方法

    "index.html"は水平方向に２分割のフレーム構成で、それぞれ「menu」「body」というnameがついています。 いま、「body」側のsrc"body1.html"にJavaScriptのソースを書いているのですが、"body1.html"中のある文字列をクリックしたら (1)新しいページ「new.html」が別ウィンドウで開く。 (2)もとの「body」側のページが"body2.html"に遷移する（フレームは解除しない）。 上記２つの処理が一度に出来るスクリプトを書きたいのです。 window.open()で(1)を書いてしまうと、(2)の分の処理がうまく動きません。 どなたか教えていただけないでしょうか？？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する