- ベストアンサー
上下フレーム分割ページでプルダウンメニューはできますか？
- HPのコンテンツが増えてきたため、スタイルシートを使用してプルダウンメニューにしたい
- 上下でフレーム分割をして、上にプルダウンメニュー、下に各ページを表示したい
- しかし、プルダウンが隠れてしまい、タイムエラーが発生してしまう
- みんなの回答 （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となります。 レイアウトはどのようにしているのかは 分かりませんが、とりあえず上に詰めても かぶらないと思います。 適宜修正お願いします。 ではでは。
その他の回答 (3)
- kaiu
- ベストアンサー率20% (65/315)
理解しました。 こちらもうまく把握できてなかったみたいですね。 すみません。 一番簡単なやり方は ---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を いじる必要がありますが、 リンクを張るだけでしたらそれで 解決すると思います。
お礼
kaiuさま。 ご指導ありがとうございます。 教えて頂いた方法で、クリックすると、下のcontentsページに、ちゃんとリンクが反映されました♪ ありがとうございます。 ただ、フレームの位置を、プルダウンで表示される一番下の ラインより上で設定してしまうと、プルダウンが 下のページで隠れてしまうのです・・・。 ２日悩んでみたのですが、にっちもさっちも行かず・・・。 何度もすみません。どうかよろしくお願いいたします。
- kaiu
- ベストアンサー率20% (65/315)
こんにちは。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"』を付加するだけです。 検討違いであればまたご連絡ください。
お礼
kaiuさま。 こんにちは。 ご指導ありがとうございます。 リストの名前をきちんと把握していなくて 混乱を招いてしまったようで、申し訳ありません・・・。 私がしたいと思っている リストの形は↓のイメージなのです。 http://www14.plala.or.jp/sugachuu/JavaScript/2003/dropdownlist2.html ↑を、上下分割のテーブルで使用する事は出来るので しょうか・・・？ 何度もすみません。 何卒よろしくお願いいたします。
- kaiu
- ベストアンサー率20% (65/315)
こんにちは。 普通にできます。 フレームでプルダウンの書き方が 間違っているのだと思いますが・・・。 実際のソースが分からないので サンプルソースを載せておきます。
お礼
kaiuさま。 ご指導ありがとうございます。 紹介していただいたスクリプトって、ジャバスクリプト ですよね？ 私が使っていたのは、CSSでプルダウンメニューに するタイプのだったので、駄目だったみたいです。 ジャバスクリプトってあまり触った事がなかったので ちょっとかじってみようと思います。 ありがとうございました。
補足
kaiuさま。 こんにちは。 無事に表示する事ができました。 ありがとうございます。 これを、フレーム分割で、ドロップダウンリストにする事って できるのでしょうか・・・？ 検索かけていろんなサイトさんをめぐってみたのですが、フレーム分割対応のドロップダウンリストの 紹介してある所がみつからなくて・・・。 何度もすみません。 どうかよろしくお願いいたします。
お礼
kaiuさま。 こんにちは。 インラインフレームで、表示する事が出来ました。 最後まで、丁寧にご指導して頂きまして、本当に ありがとうございました。