上下フレーム分割ページでプルダウンメニューはできますか？

前へ 次へ
このQ&Aのポイント
  • HPのコンテンツが増えてきたため、スタイルシートを使用してプルダウンメニューにしたい
  • 上下でフレーム分割をして、上にプルダウンメニュー、下に各ページを表示したい
  • しかし、プルダウンが隠れてしまい、タイムエラーが発生してしまう
回答を見る
  • ベストアンサー

上下フレーム分割ページでプルダウンメニューはできますか？

こんにちは。 いつもお世話になっております。 HPのコンテンツが増えてきたので、スタイルシートを 使って、プルダウンメニューにしたのですが・・・。 ちょっと、メニューの項目名を変えたい、と思った 時に、全部のページを変更してまわるのは、手間だなぁ と思って、上下でフレーム分割をして、上に プルダウンメニュー、したに、それぞれのページが 来るようにしたいのです。 ためしにやってみたのですが、プルダウンがしたの ページで隠れてしまう上に、 タイムエラーが出ました。　デバッグして下さい というエラーメッセージが出てします。 上下フレーム分割ページでプルダウンメニューはできない のでしょうか・・・？ どうかご指導よろしくお願いいたします。

  • HTML
  • 回答数4
  • ありがとう数6

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

  • ベストアンサー
  • kaiu
  • ベストアンサー率20% (65/315)
回答No.4

こんにちは。No.1のものです。 プルダウンメニューを表示した時に下のフレームに 隠れてしまうとの事ですね？ 確かにそうですね。すみません。 今のところ、両方とも子フレームなので、親子関係を 作ってあげたら出来るかもしれません…。 とりあえず抵抗がなければインラインフレームを 使うのが一番簡単だと思います。 前のindex.htmlを使うのをやめて、 code_top.htmlを変更します。 code_top.html--------------------------------- <iframe src="code_blank.html" name="contents" width="100%" height="95%" frameborder="0" noresize style="margin-top:60px; border-style:solid; border-width:1px; border-color:#888888;"> </iframe> </body> </html> ----------------------------------------------- 最後のbodyの閉じタグの直前に 上記<iframe>～</iframe>を追加してください。 トップページはcode_top.htmlとなります。 レイアウトはどのようにしているのかは 分かりませんが、とりあえず上に詰めても かぶらないと思います。 適宜修正お願いします。 ではでは。

sibazuke
質問者

お礼

kaiuさま。 こんにちは。 インラインフレームで、表示する事が出来ました。 最後まで、丁寧にご指導して頂きまして、本当に ありがとうございました。

その他の回答 (3)

  • kaiu
  • ベストアンサー率20% (65/315)
回答No.3

理解しました。 こちらもうまく把握できてなかったみたいですね。 すみません。 一番簡単なやり方は ---index.html※No.1のサンプルページと同じ------ <html> <head> <title>セレクトメニューを選んだら指定フレームに指定ページを表示する</title> <frameset rows="40%,*"> <frame src="code_top.html"> <frame src="code_blank.html" name="contents"> </frameset> </head> </html> ----------------------------------------------- --code_top.html※NO.2のサンプルページと同じ---- <!DOCTYPE HTML PUBLIC> <html lang="ja"> <head> ～＜中略＞～ <tbody> <tr style="background-color:navy;"> <td><div class="bar" onmouseover="showDrop(0);">「花巻ラーメン紀行」関係</div></td> <td><div class="bar" onmouseover="showDrop(1);">「その他のＨＰ」</div></td> </tr> <tr valign="top"> <td><div id="drop0" class="drop"> <a href="http://www14.plala.or.jp/sugachuu/" target="contents">花巻ラーメン紀行</a><br> <a href="http://www14.plala.or.jp/sugachuu/L/" target="contents">Ｌモード版　「花巻ラーメン紀行」</a><br> <a href="http://www14.plala.or.jp/sugachuu/i/" target="contents">imode版　「花巻ラーメン紀行」</a><br> </div></td> <td><div id="drop1" class="drop"> <a href="http://www14.plala.or.jp/sugachuu/reimen/" target="contents">「花巻冷麺ガイド」</a><br> <a href="http://www14.plala.or.jp/sugachuu/open/" target="contents">「花巻営業時間」</a><br> </div></td> </tr> </tbody> ～＜中略＞～ </strong> </center> </body> </html> ----------------------------------------------- code_blank.html※No.1のサンプルページと同じ---- ～＜略＞～ ----------------------------------------------- 要は、frame定義ページでnameを指定して、 ドロップダウンメニューで target="『フレーム名』"の属性を 付ければいいだけです。 計算や値の格納をする場合はjavascriptを いじる必要がありますが、 リンクを張るだけでしたらそれで 解決すると思います。

sibazuke
質問者

お礼

kaiuさま。 ご指導ありがとうございます。 教えて頂いた方法で、クリックすると、下のcontentsページに、ちゃんとリンクが反映されました♪ ありがとうございます。 ただ、フレームの位置を、プルダウンで表示される一番下の ラインより上で設定してしまうと、プルダウンが 下のページで隠れてしまうのです・・・。 ２日悩んでみたのですが、にっちもさっちも行かず・・・。 何度もすみません。どうかよろしくお願いいたします。

  • kaiu
  • ベストアンサー率20% (65/315)
回答No.2

こんにちは。No.1のものです。 >これを、フレーム分割で、 >ドロップダウンリストにする事って >できるのでしょうか・・・？　 すみません、 ドロップダウンリスト＝プルダウンメニュー ＝セレクトメニューで、掲載した形と同じものになります。 おっしゃっているのは、 リスト形式のセレクトメニューの事でしょうか。 サンプルのcode_top.htmlの<form>*</form>の*部分を 下記に書き換えてください。 ----------------------------------------------- <form> 選択して下さい<br> <select onChange="popJump(this)" size="3"> <option value="http://www.yahoo.co.jp/">Yahoo! <option value="http://www.infoseek.co.jp/">Infoseek <option value="http://www.lycos.co.jp/">Lycos </select> </form> ------------------------------------------------ 基本的にセレクトタグに『size="3"』を付加するだけです。 検討違いであればまたご連絡ください。

sibazuke
質問者

お礼

kaiuさま。 こんにちは。 ご指導ありがとうございます。 リストの名前をきちんと把握していなくて 混乱を招いてしまったようで、申し訳ありません・・・。 私がしたいと思っている　リストの形は↓のイメージなのです。 http://www14.plala.or.jp/sugachuu/JavaScript/2003/dropdownlist2.html ↑を、上下分割のテーブルで使用する事は出来るので しょうか・・・？ 何度もすみません。 何卒よろしくお願いいたします。

  • kaiu
  • ベストアンサー率20% (65/315)
回答No.1

こんにちは。 普通にできます。 フレームでプルダウンの書き方が 間違っているのだと思いますが・・・。 実際のソースが分からないので サンプルソースを載せておきます。

参考URL：
http://www.openspc2.org/reibun/javascript/form_selectmenu/024/index.html
sibazuke
質問者

お礼

kaiuさま。 ご指導ありがとうございます。 紹介していただいたスクリプトって、ジャバスクリプト ですよね？ 私が使っていたのは、CSSでプルダウンメニューに するタイプのだったので、駄目だったみたいです。 ジャバスクリプトってあまり触った事がなかったので ちょっとかじってみようと思います。 ありがとうございました。

sibazuke
質問者

補足

kaiuさま。 こんにちは。 無事に表示する事ができました。 ありがとうございます。 これを、フレーム分割で、ドロップダウンリストにする事って できるのでしょうか・・・？　 検索かけていろんなサイトさんをめぐってみたのですが、フレーム分割対応のドロップダウンリストの 紹介してある所がみつからなくて・・・。 何度もすみません。 どうかよろしくお願いいたします。

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

関連するQ&A

  • 上のフレーム内のプルダウンメニューが下のフレームに隠れてしまい、困っています

    ホームページビルダーでホームページを作成しています。上下分割フレームの上のフレームで作成してあるプルダウンメニュー（レイアウト枠）を下のフレームに表示する方法を教えてください。フレーム境界線を上に上げていくと、プルダウンメニューが下のフレームに隠れてしまいます。よろしくお願いします。

  • Flashのプルダウンメニュー

    FlashMXでプルダウンメニューをつくりたいと思っていますが、上下分割の上のフレームにおきたいと思います。 その場合、下のフレームにかかるようにプルダウンメニューを表示させることは可能なのでしょうか？ また可能であれば、それはFlashサイドでそのスクリプトを組み込むのでしょうか？ それともHTML？ 説明されている参考サイト等があったら教えていただければと思います。 よろしくお願いいたします。

  • フレーム分割したページの表示で困っています。

    ホームページビルダー９でホームページを作成しています。 ページを上下に２分割して上のフレームにリンクメニューを、下のフレームにメニューのリンク先を表示するように作りました。 自分のデスクトップパソコンでは問題なく表示されているのですが、試しにＢ５サイズのノートパソコンで表示してみると、画面全体が表示されず、上のページのメニューボタンを表示しているところが下のフレームページで隠れてしまっているのです。 下フレームは属性で自動的にスクロールバーが出るように設定しているので問題ないのですが、上のメニューは「なし」に設定しています。 ※デザイン上、表示させたくないので。 ここからが質問です。 ページを表示させた時に、ページ全体のサイズを変えても上のメニューのフレームページが常に下のフレームページの上に来るように、つまり、上のメニューページのサイズは変わらないように固定させる方法（！？）を教えて下さい。 説明がへたで申し訳ないのですが、どうぞ宜しくお願いします。

  • プルダウンメニューをフレームをまたいで表示させたい。

    http://www.microsoft.com/japan/ms.htm このサイト(マイクロソフト)にあるようなプルダウンメニューを 上下分割フレームをまたいで表示させたいのです。 使用OS：WindowsNT4.0WS 使用ブラウザ：NN4.7 なんとかネスケ4.7で表示したいのです！ なにとぞよろしくお願いしますm(_ _)m

  • フレームページのメニューボタン

    いくつか同じような質問がありましたが、スクリプトでの解決方法がみつかりませんでしたので質問させてもらいます 今フレームを使ったHPを作っています フレームは上下で分割してあり、上のフレームにはFLASHをつかったメニューボタンを入れあり、ボタンを押すことで下のフレームに各ページを表示させます メニューボタンはマウスが乗ると色が変わるボタンなんですけど 下のフレームに表示してあるページと対応したボタンが常にonの状態になるようなFLASHメニューにしたいんですけどスクリプトをどう記述したらいいかわかりません だれか教えていただけないでしょうか？ ちなみにFLASHソフトはフリーソフトSUZUKAを使っています

  • フレームを使ったプルダウンメニュー

    フレームで「ヘッダー・左メニュー・右メインページ」というように３分割にし、左メニューに置いたプルダウンから項目を選ぶと右メインに表示される、という構造にしたいと思っています。 <HEAD>～</HEAD>内↓ <script language="JavaScript"> function jump(form) { var myindex=form.destination.selectedIndex window.open(form.destination.options[myindex].value, target="main"); } //--> </SCRIPT> プルダウン部分↓ <FORM NAME="form"> <SELECT NAME="destination"> <OPTION VALUE="a.html" SELECTED>あ</OPTION> <OPTION VALUE="k.html">か</OPTION> <OPTION VALUE="s.html">さ</OPTION> <OPTION VALUE="t.html">た</OPTION> <OPTION VALUE="n.html">な</OPTION> </SELECT> <INPUT TYPE="image" SRC="go.gif" onClick="jump(this.form)" BORDER="0"> </FORM> という様に記述した所、例えばプルダウンで「た」を選択した場合、右フレームにちゃんとt.htmlが表示されるのですが、左フレームのプルダウンの項目が「あ」に戻ってしまいます。「た」を選択した状態のまま残したいのですが。 ちなみにボタンに画像を使わず、<INPUT TYPE="button" ・・・・>にするとなぜか「た」選択の状態でちゃんと残ります。でも、できれば画像を使いたいのです。 うまいやり方をご存じの方は、教えていただけますか。おねがいします。

  • フレームのあるHPでプルダウンメニュー

    上左右とフレームの切ってあるHPをビルダーで作っている者です。 似た感じの質問を過去ログから検索して読みましたが、質問させてください。 左フレームにプルダウンメニューを設置して、 プルダウンメニューをクリックすると 右メインページが切り替えれる様にしたいのです。 http://www.red.oit-net.jp/tatsuya/java/combobo2.htm←この様なプルダウンメニューを設置したいのですが、 フレーム切り替えのタグをどこをどういじっていいのかわかりません。 現在ローカルファイルで作成中で、フォルダに 上フレーム：flame1.htm（完成） 左フレーム：flame2.htm（←ここに設置したい） メインページ：1.htm 2.htm 3.htm 4.htm 　と入っている感じです。 左フレーム↓ <script language="JavaScript"><!-- function myGo(){ mySelect = document.myForm.myMenu.selectedIndex; location.href = document.myForm.myMenu.options[mySelect].value; } // --></script> <form name="myForm"> <select name="myMenu" onChange="myGo()"> <option value="1.htm" >第1章 <option value="2.htm" >第2章 <option value="3.htm" >第3章 <option value="4.htm" >第4章 </select> </form> どこをどう直したらいいのか、是非お教え下さい。 よろしくお願いします。

  • フレームの四分割でリンク

    こんにちは。よろしければ教えて下さい。 フレームを上中下の三分割（10%、80%、10%）にし、中を更に左右（20%、80%）で割りました。 これらを 上=ue 中=naka 下=sita 左=hidari（メニューページ） 右=migi（メインページ） とします。 この時、左（メニュー）から右（メイン）にリンクすると同時に、上もしくは下もリンクさせたい（右を押すと左と上が同時に変わる）のですが、htmlもしくはスタイルシートで出来るでしょうか？ 上をサブメニューとして使いたいのです。 申し訳無いのですが （１）JavaScriptは使えません。 （２）CGI非対応スペースです。 （３）これ以上フレームを増やすのは避けたい です。 ちなみに過去の質問は拝読しましたが、読んだ限り3分割、フレームを更に入れ子にするという回答が主でした。 しかし最初に上中下と組んでしまっているので、入れ子が出来ません。 フレームを三分割にして左メニューでテーブルを組んで見た目上同じ効果を出す、というのは考えたのですが、直接リンク出来ればそれに越した事は無いので、お尋ねさせて頂きました。 宜しくお願い致します。

  • プルダウンメニュー

    　以下のプログラムですが！ 仕様が二分割の縦分割フレームが特徴です。 　左側フレームにリンクタグがあり、そのリンクタグをクリックすると、右フレームに HPが観れるようになっています。 　しかし、プルダウンメニューのYahooをクリックしたらakkotyan.html、は左フレームになぜか 出てきてしまって困っています。 　 それともう１つ、プルダウンメニューのhouyhnhnmsをクリックしても何もフレームに出てこなくて無反応です？ 　そのほか 　　「クリックで動くプログラ」と「知恵袋 竹島問題」はちゃんと右フレームに出てきて 　問題ありません。 　　プルダウンメニュータグのHPを右フレームに出すにはどうしたらできますか！？ 　宜しくお願いします。 -------------------------------------------------------- 左フレーム <html> <head> </head> <frameset cols="26%,*"> <frame src="left.html"name="menu"> <frame src="pronagare.html"name="contents"> </frameset> <html> ------------------------------------------------------- 右フレーム <html> <HTMl> <HEAD> <TITLE>プルダウンメニューのHPを右フレームへ表示したい</title> <script>addEventListener('load',function(ev){ document.forms['jump'].elements['to'].addEventListener('change',function(ew){ var map = { yahoo: './akkotyan.html', houyhnhnms: 'http://google.com/search?tbm=isch&q=houyhnhnms' }; var url = map[ew.target.value]; if (url) window.location = url; },false); },false)</script> <body> <form name=jump><select name=to> <option value='' selected>-</option> <option value=yahoo>Yahoo</option> <option value=houyhnhnms>Houyhnhnms</option> </form> </select> <P> <a href="pronagare.html"target="contents">クリックで動くプログラム</a><br> <a href="takesima.html"target="contents">知恵袋 竹島問題</a><br> </body> </html>

  • フレーム分割について

    ホームページビルダー使用です。 １つのページを上下にフレーム分割し、上のページにいろいろなリンクを作り、そこをクリックすると下のページがそのリンク先に飛ぶように（上のページはそのまま）したいのですが、タグを探しても見つからずやり方が分かりません・・・ 分かりにくい説明ですが、どなたか宜しくお願いしますm(__)m

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する