JavaScriptを使用してナビゲーションメニューや擬似プルダウンメニューを作成したのですが、
メニューが展開された先にHTMLのselectボックスがあると
メニューがセレクトボックスの下に隠れるように表示されてしまい困っております。

メニューが隠れない方法はありますでしょうか?

このQ&Aに関連する最新のQ&A

A 回答 (2件)

selectボックスが他のオブジェクトを無視して最上位に表示されてしまうのは、IEのバグのようです。

(参考URL参照)

正しい動作をさせるのは無理なので、レイアウトを変更するか、プルダウン表示時に select を visibility:hidden にするなどして対処するしかないようです。

参考URL:http://cssbug.at.infoseek.co.jp/detail/winie/b11 …
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。

確かにIEエンジン以外のブラウザでは希望どうりに表示されました。
IEエンジンだとやはりダメな様です。

お礼日時:2005/04/06 19:12

ナビゲーションメニュー部分を別フレームに置くという対処はいかがでしょうか

この回答への補足

ご回答ありがとうございます。

リストメニューとセレクトボックスの間をフレームで区切る事は出来るのですが、
JavaScriptで作成したリストメニューだとフレームを超える事が出来ない様になっております。

補足日時:2005/04/06 14:06
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qカトープレジャーグループのつるとんたんって有名なんですか?

カトープレジャーグループのつるとんたんって有名なんですか?
最近名前を知ったのですが、教えてくれた友人はつるとんたんを知らない私に驚いていました。
けっこうたくさん店舗があるのでしょうか?うどんは好きなので一度行ってみたいなと思っています。

Aベストアンサー

つるとんたんはカトープレジャーグループを代表するお店の一つです。うどん専門店といえばつるとんたん、という人も少なくないです。
外食を基本しない人だったら知らない人もいると思うので、驚くというのはやや大げさかもしれませんね(^^;
でも、有名なのは間違いないです。テレビでもよく取材されていますし、芸能人がつるとんたんに行ったという話をすることも多いです。
うどんが好きならぜひ一度行ってみてください!店舗は都内と大阪を中心に13店舗ほどありますよ。
いろいろなうどんメニューがあるのでおすすめです。

Qjavascriptでセレクトボックスの"selected"を動的につ

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
</select>月

<select name='day'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
<option value='13'>13</option>
<option value='14'>14</option>
<option value='15'>15</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
<option value='20'>20</option>
<option value='21'>21</option>
<option value='22'>22</option>
<option value='23'>23</option>
<option value='24'>24</option>
<option value='25'>25</option>
<option value='26'>26</option>
<option value='27'>27</option>
<option value='28'>28</option>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日


このセレクトボックスに、例えば今日の日付"2010年9月30日"だったら、それぞれの年、月、日の<option>に"selected"をつけたいのですが、javascriptではどのようにして実現したら良いのでしょうか?

よろしくお願いします。

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8...続きを読む

Aベストアンサー

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<option value='2009'>2009</option>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
</select>月

<select name='day'>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日
</div>
</form>

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<opt...続きを読む

Q【大阪 つるとんたん】について教えて下さい。

こんばんわ。

『つるとんたん』について教えて下さい。

北新地店と大丸梅田店では、同様の味を堪能出来ますでしょうか?
やはり、北新地の方が美味しいのかな???

北新地店へ行くには、JR大阪駅より、徒歩○分でしょうか?
旅行者が夜に出歩くには無謀な距離?
治安は良い方でしょうか?
大阪駅よりわかりやすい道のりをご存知でしたら、教えて下さい。


テレビで美味しいと話していたのを見て、行きたいと思いました。
オススメメニューがございましたら、合わせて教えて頂けたら嬉しいです。
どうぞ、宜しくお願い致します。

Aベストアンサー

通常はデパートの場所代は売り上げの15~20%前後です。
一般店では売り上げに対する地代は5%前後です。
ですから、どんぶり勘定のお店でなければ、デパートの店では単価を
10%くらい上げるか、コストを10%くらいカットしなければ採算が
合わなくなります。

つるとんたんはうどんのお店ですので、北新地の店の方が良いのではないですか?
デパートの地下でうどんを一から打っているとは思われません。たとえ、打っている
としても、雰囲気が北新地店の方がよいです。雰囲気も味の一部です。

北新地店はJR大阪から徒歩で12~18分くらいでしょう。
ディアモール大阪、または大阪第4、第3ビルを抜けるとJR北新地に出ます。
そこから地上に上がって、南側に徒歩3分くらいのかに道楽の南側です。

http://www.tsurutontan.co.jp/kitashinti/

Qselectメニューのselectedの位置をJavaScriptで移動させたい。

selectメニューで困っています。
下のようなselectメニューをクリアボタンを使って一番上の「------」まで移動させたいのです。
IEやNN4.7はきっちり動くのですが、NN6.2で上手く動きません。
NN6だけは、かたくなに「ゲームで」に戻ろうとします。

「ここ」と書いた所を
document.JTform.play_l.options[0].defaultSelected="true";
document.JTform.play_l.options[1].defaultSelected="false";
document.JTform.play_l.options[2].defaultSelected="false";
document.JTform.play_l.options[3].defaultSelected="false";
に増やしてみたのですが、変わらないみたいでした。
なにか他に良い方法はないでしょうか?

<html>
<Script Langage="JavaScript">
function init_func()
{
document.JTform.play_l.selectedIndex=0;
document.JTform.play_l.options[0].defaultSelected="true";<!--ここ-->
document.JTform.play_l.index=0;
}
</Script>
<form name="JTform">
<select name="play_l">
<option value="">--------------------</option>
<option value="1">犬と</opne>
<option value="2">ラジコンで</opne>
<option value="3" selected>ゲームで</opne>
</select>
<INPUT TYPE="submit" VALUE="さあ、遊ぼう"> <INPUT TYPE="reset" VALUE="クリア" Onclick="init_func()">
</form>
</html>

selectメニューで困っています。
下のようなselectメニューをクリアボタンを使って一番上の「------」まで移動させたいのです。
IEやNN4.7はきっちり動くのですが、NN6.2で上手く動きません。
NN6だけは、かたくなに「ゲームで」に戻ろうとします。

「ここ」と書いた所を
document.JTform.play_l.options[0].defaultSelected="true";
document.JTform.play_l.options[1].defaultSelected="false";
document.JTform.play_l.options[2].defaultSelected="false";
document.JTform.play_l.options[3].defau...続きを読む

Aベストアンサー

恐らく、リセットボタンの本来の機能が init_func() 実行後に働き、「ゲームで」に戻ってしまうのでしょう。
init_func関数の最後に
  return false;
を追加し、onClick の部分も
  onClick="return init_func()"
としてみて下さい。
もしこれで直らない場合、type="reset" ではなく type="button" に変えるしかなさそうです。

また、init_func関数の方は、
  document.JTform.play_l.selectedIndex=0;
だけで良いでしょう。
  document.JTform.play_l.options[0].defaultSelected="true";
の defaultSelected というプロパティは 初期状態で選択されている OPTIONタグのみ true となる ReadOnly 属性なので、値の代入は無効のはずです。
(ちなみに、true は "" で囲まなくてOKです。)

同じく、
  document.JTform.play_l.index=0;
これも不要です。
(indexなんて属性あったかな・・?)

恐らく、リセットボタンの本来の機能が init_func() 実行後に働き、「ゲームで」に戻ってしまうのでしょう。
init_func関数の最後に
  return false;
を追加し、onClick の部分も
  onClick="return init_func()"
としてみて下さい。
もしこれで直らない場合、type="reset" ではなく type="button" に変えるしかなさそうです。

また、init_func関数の方は、
  document.JTform.play_l.selectedIndex=0;
だけで良いでしょう。
  document.JTform.play_l.options[0].defaultSelected="true";
...続きを読む

Qつるとんたんの器探してます

今年中にうどんやの開業を目指していますが
つるとんたんのような大きな器(幅28cm程)を売っているお店や
作ってくれる窯元、会社などご存知の方いらっしゃらないでしょうか?

Aベストアンサー

ここのお店は見ましたか?

http://item.rakuten.co.jp/setomonohonpo/tga01601-176/

http://item.rakuten.co.jp/setomonohonpo/tri77101-077?s-id=top_normal_browsehist

丼だけでも、随分たくさんありますよ。

Q複数のセレクトボックスの値から別のセレクトボックス

この度はお世話になります。
複数(4個)のselectboxからselectboxの値の組み合わせによって、別のselectbox(1個)の選択肢を変えたいのですが、どなたか助けていただけませんでしょうか?

動作のイメージは以下の通りです。

selectboxAの選択肢:1,2,3,4,5,
selectboxBの選択肢:あ,い,う,え,お,
selectboxCの選択肢:ア,イ,ウ,エ,オ,
selectboxDの選択肢:a,i,u,e,o,

上記の操作で、
selectboxA に1 selectboxB に い selectboxCに ウ selectboxDに e と
selectboxA に5 selectboxB に え selectboxCに ウ selectboxDに i の
組み合わせが選択されたときのみ、

selectbox E の選択肢に あいうえお,かきくけこ,さしすせそ,が表示され、

それ以外のselectbox A~Dの選択肢の組み合わせの時はすべて、
たちつてと,なにぬねの,はひふへほ, の選択肢が表示されます。

各selectボックスの選択肢は、選択肢の数により増減します。
また選択肢Aには数字を使ってますが、すべて文字列として扱いたいです。

ネット上でjavascript のサンプルプログラム等も見て、色々と試してみたのですが、
なかなかハードルが高く困っております。

当方素人。任意の集まりで使います。何卒よろしくお願い致します。

この度はお世話になります。
複数(4個)のselectboxからselectboxの値の組み合わせによって、別のselectbox(1個)の選択肢を変えたいのですが、どなたか助けていただけませんでしょうか?

動作のイメージは以下の通りです。

selectboxAの選択肢:1,2,3,4,5,
selectboxBの選択肢:あ,い,う,え,お,
selectboxCの選択肢:ア,イ,ウ,エ,オ,
selectboxDの選択肢:a,i,u,e,o,

上記の操作で、
selectboxA に1 selectboxB に い selectboxCに ウ selectboxDに e と
selectboxA に5 selectboxB に え selectboxC...続きを読む

Aベストアンサー

配列変数に「あいうえお,かきくけこ,さしすせそ」と「たちつてと,なにぬねの,はひふへほ, 」を作ります。
次にselectboxA~Dのvalueを取得してif elseを使用してselectboxEのvalueに「あいうえお,かきくけこ,さしすせそ」か「たちつてと,なにぬねの,はひふへほ, 」を入れてあげればいいと思いますよ。

イメージ的には以下のような形だと思います。

selectboxA~Dのvalueがチェンジされた場合のイベントハンドラ {
if(~~~) {
selectboxE.value = 「あいうえお,かきくけこ,さしすせそ」
} else {
selectboxE.value = 「あいうえお,かきくけこ,さしすせそ」
}
}

Qつるとんたん

都内で比較的空いてるつるとんたんの店はありますか?
どこへ行っても行列です。

Aベストアンサー

関西人ですが、にわかには信じられない話です。
関西にも同系列店はありますが、味覚的にそれほど高い評価を
受けている訳でもなく(低い評価も受けていませんが)、行列になる
ことはまずありません。
私もたまに都内に行きますが、食環境に関しては悲しくなるくらい
レベルが低いです。

Qセレクトボックスの内容に応じウインドウを書き換え、さらにセレクトボックスを設置したい

web上のjavascript入門ページなどを参照しながら学習中ですが詰まってしまいました。よろしくお願いします。

1. topページにセレクトボックスを設置。
2. セレクトされた内容に応じて、現在のウインドウを書き換えた後topページと同じセレクトボックスを設置。
3. 2を繰り返す。

このような動作をさせたいのですが、現在のウインドウを書き換えることは出来るのですがセレクトボックスを設置しようとするとエラーになります。

script_test01.htmlの内容
--------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
</head>
<body>
<script type='text/javascript' src='script_test01.js'>
</script>
<br>
<form name='form_0'>
<select onchange='rewrite()' name='sel_0'>
<option>A or B</option>
<option>A</option>
<option>B</option>
</select>
</body>
</html>
--------------------------------------------------

script_test01.jsの内容
--------------------------------------------------
function rewrite() {
var sel_in =document.form_0.sel_0.options.selectedIndex;
var sel_name = document.form_0.sel_0.options[sel_in].text;
document.write('<html>\n');
document.write('<head>\n');
document.write('<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">\n');
document.write("<script type='text/javascript' src='script_test01.js'>\n");
document.write("</script>\n");
document.write('</head>\n');
document.write('<body>\n');
document.write(sel_in,' : ',sel_name,'<br>\n');

/*↓この部分がうまくいかない
document.write('<br>\n');
document.write('<form name='form_0'>\n');
document.write('<select onchange='rewrite()' name='sel_0'>\n');
document.write('<option>A or B</option>\n');
document.write('<option>A</option>\n');
document.write('<option>B</option>\n');
document.write('</select>\n');
/*↑この部分がうまくいかない

document.write('</body>\n');
document.write('</html>\n');
}
--------------------------------------------------

script_test01.jsのコメントアウトをはずすとエラーになります。
script_test01.js内でさらに自分自身を記述している部分辺りなど、なにかおかしなことをやっていのではという自覚はありますが、よくわかりません。

あわせて質問ですが、.htmlと.jsはEUCで作成しcharsetもEUC-JPを指定しています。
topページをブラウザのエンコードで確認すると当然「日本語[EUC]」となっていますが、セレクトボックス選択後書き換えられたページを確認すると、「Unicode」なっていますがなぜでしょうか?「日本語[EUC]」に出来ないでしょうか?

web上のjavascript入門ページなどを参照しながら学習中ですが詰まってしまいました。よろしくお願いします。

1. topページにセレクトボックスを設置。
2. セレクトされた内容に応じて、現在のウインドウを書き換えた後topページと同じセレクトボックスを設置。
3. 2を繰り返す。

このような動作をさせたいのですが、現在のウインドウを書き換えることは出来るのですがセレクトボックスを設置しようとするとエラーになります。

script_test01.htmlの内容
-----------------------------------------...続きを読む

Aベストアンサー

document.write('<form name='form_0'>\n');
document.write('<select onchange='rewrite()' name='sel_0'>\n');
この2行。’の中に’が入っている。
\’のようにエスケープするか、”を使いましょう。

後、document.writeの前後のopen/closeを行いましょう。
特にcloseが無い為、永遠に読み続けるのが鬱陶しいです。


文字コードに関しては、JavaScriptは内部処理でunicodeを使用している為。
documentのopen後に、「document.charset='EUC-JP';」のような指定をすることで解消できます。

Q下記のような単純な階層メニューの作り方を教えていただきたいです。

下記のような単純な階層メニューの作り方を教えていただきたいです。
閉じたり開いたり等はなく、常に下のような感じで表示されるようにしたいです。

スペースを使えばできてしまうのですが、きちんとしたやり方が知りたいので
教えていただけましたら幸いです。


・メニュー1
  ・サブメニュー1
  ・サブメニュー2
  ・サブメニュー3


・メニュー2
  ・サブメニュー1
  ・サブメニュー2
  ・サブメニュー3


『・』の部分にはアイコン画像を表示させたいと思っています。

たて並びに記載していますが、「メニュー1」と「メニュー2」は
横に並べて表示させたいと思っています。
よろしくお願いいたします。

Aベストアンサー

横並びにするときはたいていfloatを使います。
floatすると幅がわからなくなるので、明示的にwidthを指定するとよいでしょう。
ただしfloatした場合はどこかで、clear処理をいれる必要があります

<style>
#menu>li{
float:left;
width:200px;
}
</style>
<ul id="menu">
<li><div>メニュー1</div>
<ul>
<li>サブメニュー1</li>
<li>サブメニュー2</li>
<li>サブメニュー3</li>
</ul>
</li>
<li><div>メニュー2</div>
<ul>
<li>サブメニュー1</li>
<li>サブメニュー2</li>
<li>サブメニュー3</li>
</ul>
</li>
</ul>

Qセレクトメニューで選択された項目に応じて、別のセレクトメニューの内容を変更する場合について

アドバイスお願いします。
ページロード時、最初ののセレクトメニューは「国を選択してください」が選択された状態となりますが、次のセレクトメニューが空白になってしまいます。
これを最初のメニューと同じく「国を選択してください」と表示させるには、どうしたらよろしいでしょうか?

【HTML】
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScript</title>
<link rel="stylesheet" type="text/css" href="main.css" media="all">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<form action="./enq.cgi" method="get" id="mainForm" name="mainForm">
<select id="selMain">
<option value="">国を選択してください</option>
<option value="jp">日本</option>
<option value="usa">アメリカ</option>
</select>
<select id="selSub">国を選択してください</select>
</form>
</body>
</html>

【main.js】
window.onload = function(){
document.getElementById("selMain").onchange = function(){
var selNo = this.selectedIndex;
var selObj = document.getElementById("selSub");
var optionData = [[
],[
{ text:"東京", value:"tokyo"},
{ text:"大阪", value:"osaka"},
{ text:"名古屋", value:"nagoya"}
],[
{ text:"ニューヨーク", value:"ny"},
{ text:"ロサンゼルス", value:"la"}
]
];
while(selObj.hasChildNodes()) {
selObj.removeChild(selObj.firstChild);
}
for (var i=0; i<optionData[selNo].length; i++){
selObj.options[i] = new Option(optionData[selNo][i].text, optionData[selNo][i].value);
}
}
}

また、質問にありますようなセレクトメニューを実装する場合、JavaScriptとAJAX、どちらが適したものと言えるのでしょうか?

アドバイスお願いします。
ページロード時、最初ののセレクトメニューは「国を選択してください」が選択された状態となりますが、次のセレクトメニューが空白になってしまいます。
これを最初のメニューと同じく「国を選択してください」と表示させるには、どうしたらよろしいでしょうか?

【HTML】
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScript</title>
<link rel="stylesheet" type="text/css" href="main.css" media="all">
<script type=...続きを読む

Aベストアンサー

<補足>
value値をCGIに送信する方法は、蛇足ですよね。
別にajaxやjavascript使わなくても、
<form method="POST" action="xxx.cgi">
----
<input type="submit" value="送信" />
</form>
で送信するだけです。


人気Q&Aランキング

おすすめ情報