- ベストアンサー
プルダウンメニューの開く方向をコントロールしたいのですが
はじめまして、flyingmanと申します。いつも皆なさんの質問・回答で勉強させていただいて大変感謝しております。 さて今回、年・月・日・時を選択するために４つのプルダウンメニューをselectタグを使い作成したのですが、日指定のプルダウンメニューだけが、上方向に開いてしまいほかの3つのメニューと開く方向をそろえたいと色々調べておりますがなかなかいい方法が見つからないしだいです。 selectタグへのスタイル指定でそのようなことができるかどうか教えていただけないでしょうか？ 環境 OS：WindowsXP SP2 ブラウザ：Internet Explorer Ver6.0 のみ プルダウンメニューの開く方向は、プルダウンメニューの位置と開くメニューの高さで自動に決まってしまうのだろうとは思うのですが、位置をずらさずに開く方向だけを変更できる方法をご存知でしたら教えてください。 よろしくお願いいたします。
- flyingman
- お礼率66% (6/9)
- HTML
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
#1補足＞ 補足ありがとうございました。 状況は確認できましたが、やはり、そのような指定をする設定はないようです。
その他の回答 (3)
- UKY
- ベストアンサー率50% (604/1207)
> ウィンドウサイズを小さくした後も、年・月・時のプルダウンメニューは下方向に開くので、「なんでじゃぁ～」と突っ込まれ、返答に困ってしまっているしだいです ウィンドウサイズは関係ありません。 メニューが出る位置は画面全体の大きさとメニューの基点の位置だけで決まります。 ウィンドウサイズが小さいときは、メニューがウィンドウからはみ出ることもあります。
お礼
下記に載せたサンプルを使って、ウィンドウサイズやメニューの位置をいろいろ変えて試したところ、UKYさんの書かれた通りでした。 自分の思い込みを正すことができました。ありがとうございました。
- Kuppycat
- ベストアンサー率50% (109/216)
プルダウンメニューが長くなって、下方向に表示できないために上方向に表示しているのだと思います。 Windowsの仕様だったと。 なので指定はできないはず。
補足
早速の回答ありがとうございました。 今までは私もKuppycatさんと同じ認識で、そのように説明したのですが、解像度1024×1280の状態でウィンドウを生成した段階で、日付選択メニューで上方向にメニューが開いてしまうのは理解できたのですが、ウィンドウサイズを小さくした後も、年・月・時のプルダウンメニューは下方向に開くので、「なんでじゃぁ～」と突っ込まれ、返答に困ってしまっているしだいです。(^_^;)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
上に開く下に開くというような設定は無かったように思います。 ちょっと再現できないので、ソースを補足していただけますか
補足
早速の回答ありがとうございます。 サンプルソースは以下のようになります。（ちょっと長いです。） <HTML><HEAD><title>プルダウンメニュー サンプル</title></HEAD><BODY> <table rules="all" celspacing="1" cellpadding="5" border="1" bgcolor="d2ffff"> <tbody> <tr><TD>あいうえお</TD><TD width="500">アイウエオ</TD></tr><tr><TD>かきくけこ</TD><TD>カキクケコ</TD></tr><tr><TD>たちつてと</TD><TD>タチツテト</TD></tr> <tr><TD> </TD><TD> </TD></tr><tr><TD> </TD><TD> </TD></tr><tr><TD> </TD><TD> </TD></tr> <tr><TD> </TD><TD> </TD></tr><tr><TD> </TD><TD> </TD></tr><tr><TD> </TD><TD> </TD></tr> <tr><TD> </TD><TD> </TD></tr><tr><TD> </TD><TD> </TD></tr><tr><TD> </TD><TD> </TD></tr> <tr><TD> </TD><TD> </TD></tr><tr><TD> </TD><TD> </TD></tr><tr><TD> </TD><TD> </TD></tr> <tr> <td>開始時間</td> <TD > <select id="year"> <option value="1995">1995</option><option value="1996">1996</option><option value="1997">1997</option><option value="1998">1998</option><option value="1999">1999</option><option value="2000">2000</option><option value="2001">2001</option><option value="2002">2002</option><option value="2003">2003</option>ption value="2004">2004</option><option value="2005" selected="selected">2005</option></select>年 <select id="month"> <option value="01">01</option><option value="02">02</option><option value="03">03</option><option value="04">04</option><option value="05">05</option><option value="06">06</option><option value="07">07</option><option value="08">08</option><option value="09">09</option><option value="10">10</option><option value="11" selected="selected">11</option><option value="12">12</option></select>月 <select id="day"> <option value="01">01</option><option value="02">02</option><option value="03">03</option><option value="04">04</option><option value="05">05</option><option value="06">06</option><option value="07">07</option><option value="08">08</option><option value="09">09</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" selected="selected">30</option><option value="31">31</option></select>日 <select id="hour"> <option value="00" selected="selected">00</option><option value="01">01</option><option value="02">02</option><option value="03">03</option><option value="04">04</option><option value="05">05</option><option value="06">06</option><option value="07">07</option><option value="08">08</option><option value="09">09</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></select>時 </td> </tr> </tbody> </table> </BODY></HTML>
関連するQ&A
- プルダウンメニュー表示時の高さの指定方法
ブラウザ上でプルダウンメニューを表示させる際に、表示される高さ（タテ幅）の指定をするにはどうすればよいか、ご存知の方は教えていただけないでしょうか？ ちなみに、プルダウンメニューの横幅は、<select>タグ内に、「style="width:（幅を指定）;"」を記述することで固定幅の設定が可能でしたが・・・ なお、プルダウンメニューは初期表示として、１件のみ表示させるものとします（すなわち、<select>タグ内の「size="1"」の指定は変えないこととする）。 というのも、プルダウンに表示させる項目（条件によって可変）の件数が多い場合に、プルダウンメニュー内でスクロールさせるのをできるだけ避けたいためです。 よって、方法としては、 １．プルダウン表示させる際の高さ（タテ幅）を固定で指定する ２．可能であれば、登録されている全項目の表示をさせる 以上２つの方法を考えています。 なにかよい方法があれば、ぜひ教えてください。
- ベストアンサー
- HTML
- javascriptでプルダウンメニューの操作
javascriptで、select/optionタグからなるプルダウンメニューから、マウスが外れたらプルダウンメニューが閉じるという動きを実装したいです。 select/optionからマウスアウトした際に、別のフォームにフォーカスを合わせる（これで無理やりプルダウンを閉じた状態にする）処理を書いているのですが、 これだと、optionから次のoptionタグにマウスが移動したときもマウスアウトと判定されてしまい、プルダウンの中身を選択する前にメニューが閉じてしまいます。 このあたりの問題をうまく解消できる描き方などありましたら教えて下さい。
- 締切済み
- JavaScript
- selectボックスのプルダウンメニューを上方向へ表示する方法
すみません、どなたか教えて下さい。 selectボックスのプルダウンメニューを上方向へ表示することは可能でしょうか？ ハンディーターミナル用に開発しているのですが、ページ下の方にあるプルダウンを選択すると１度ページ移動？するため、プルダウンのメニューが表示されず、２度選択しないといけません。 JavaScriptで対応可能でしょうか？それとも何か別の対策があれば教えて下さい、よろしくお願いします。
- ベストアンサー
- JavaScript
- プルダウンメニューについて教えてください。
プルダウンメニューについて教えてください。 http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-vertical/ ここに乗っているタグでメニューを作成したのですが、 なぜか ●隙間が開いてしまう ●サブメニューがすぐに閉じてしまう という現象が起きて困っています。 スクリーンショットを置きます。 CSSの部分をいろいろ変えてみたのですが、解決できませんでした。 どなたか教えて下さると助かります！ どうかお願いします。
- 締切済み
- Java
- プルダウンメニューの見た目を変えたい!!!!!!!!……です。
はじめましてJackMINIと申します。 HP上で『プルダウンメニュー(オプションメニュー)を使いたい』と思うのですが、普通はメニューボタンの見た目がユーザー側の機種やブラウザに依存されてしまいますよね。 ですが、自分の作っているサイトのデザインにあまりに合わないので、その"メニューボタンの見た目"を変えたいのですが、出来る方法はありますでしょうか? (プルダウンの使用目的は、コンテンツのINDEXページからその下層にある各ページに飛べるようにするためです。) 実際には、例えばオリジナルのセレクトボタン画像を作ってsrcでリンクさせたり、形はデフォルトのままでも下地やテキストの色を指定したり…といった形でサイトのデザインに合わせられると良いのですが…。 ちなみに、Mac OS9.x のiCabでも正常に動作するように作っているので、 フォームの<SELECT>タグ<OPTION>タグを使ったオプションメニューを使うつもりです。(…条件が厳しくてスミマセン) もし無理なようでしたら、プルダウンと同じような機能で見た目をカスタマイズできる方法を教えていただけるとヒジョーに助かります。 ただ、FLASHは持っていないので使えません。m(__)m (…お金がないので) HTMLとJavaScript(もしくはCSS)で可能でしたら、多少面倒だったり難解だったりしても構いませんので、何卒御教授お願い致します。
- ベストアンサー
- JavaScript
- CSSでプルダウンメニューを作りたい
お世話になります。 画像にマウスオーバーすると下にプルダウンでメニューが出るボタンを作りたいです。下記を希望のサイズやカラーにカスタマイズさせていただき、プルダウン自体はできました。 http://www.stylish-style.com/csstec/ultimate/css-roll-4.html しかし、今回私が作りたいのは A=プルダウンメニューが出ない B～E=プルダウンメニューが出る と、プルダウンの有無が混ざったボタンを横に並べる形です。 上記URLに書かれている方法ですとB～Eは問題なく並ぶのですが、Bの前にA画像を<li>タグで挿入するとAとBの間で改行されてしまいます。 どうしたら横にきちんと並ぶのでしょうか？ ちなみにulの横幅は希望のものに合わせました。 CSSではなくjavascriptでないと無理なのでしょうか？ どうぞよろしくお願い致します。
- ベストアンサー
- HTML
- プルダウンメニュー不具合
ホームページのデータ－入力などで、プルダウンメニュー が不適切な位置に出たりして、うまく表示されない場合が あるのですが、なにか解決方法は、ないでしょうか？
- 締切済み
- Windows 95・98
- cssによるプルダウンメニューの不具合
宜しくお願いします。 フリーのcssをカスタマイズ使用してプルダウンメニューを作っていますがうまくいきません。便宜上、外部スタイルを内部に記述しています。 製品紹介のボタンだけがプルダウンです。 （ケースA） http://nasu-exnet.info/pull-down2.html DIV#menu{ top:; left:; width:100%; position:absolute; z-index:100; } こちらは、position:absolute;を入れています。これを入れるとボタンの位置がずれてしまいます。 （ケースB） http://nasu-exnet.info/pull-down1.html DIV#menu{ top:; left:; width:100%; 123position:absolute; z-index:100; } こちらは、position:absolute;を無効にしてあります。ポジションは敵適正位置になりますが、プルダウンすると、全体がずれてしまいます。 どうすれば、適正位置でなおかつプルダウン時にずれなくなるでしょうか？ 宜しくお願いします。
- 締切済み
- HTML
- マウスオーバーでプルダウンメニュー？
http://www.bton.net/test/index5.htm ↑ マウスオーバーで、プルダウンメニュー（activateMenu）というものを造ってみましたが、ブラウザの設定が「大フォント」のときはナントカ動くのですが、「小フォント」になるほど、上下のメニューがちらちら代わってしまって、思うようにクリックできないのです。 もしできるなら上下のメニューでレイヤーの位置も変えたいのですが、なにせ外国のサイトからソースを切り貼りしたので、いまいちわからないのです・・（泣） なにか良い方法をご存知の方、いらっしゃいますでしょうか？ソースはかなり長いので、URLを見ていただければ助かります。 http://www.bton.net/test/index5.htm
- ベストアンサー
- JavaScript
お礼
回答ありがとうございました。UKYさんの回答とあわせて、メニューの位置が動かせない以上、開く方向を変更することはできないことを説明したいと思います。 ありがとうございました。