• 締切済み

プルダウンメニューの作成方法

ニッカンスポーツのHP http://www2.nikkansports.com/news/baseball/bb-fl.html にあるような 「ホーム、野球、、、、釣り」 のメニューで、「野球」の上にマウスをもっていくとプルダウンメニューが表示されるようなプログラムコード は分かりませんか? (JavaScriptかJavaか分かりません) (<select><option>タグではできそうにありませんが、 できるのか?)

みんなの回答

noname#10926
noname#10926
回答No.2

下記のホームページから 「7 Java、DHTML、JavaScript、CSS、XML サンプル」 -「6 DHTML ナビゲ-ション」  -「3 階層メニュー」の 15~33当たりが参考になるでしょうか。

参考URL:
http://www02.so-net.ne.jp/~oka/oritatami3c.html
WETCOLD
質問者

お礼

ありがとうございます。 参考にしてみます。

  • guruguru2
  • ベストアンサー率29% (39/132)
回答No.1

私は昔DYNAMICHTMLで作ったことがあります。 が今サンプルを持ち合わせていないので、 こちらのサイトでサンプルがありますので ソースをご覧になってください。(「垂れ幕メニュー」です。)  ただ、マウスをもっていくと(onmouseover)メニュー表示ではなくクリックしたとき(onclick)に表示なっているので、そこらへんは応用で頑張ってみてください。 あとフラッシュでもできますよ。

参考URL:
http://www1.plala.or.jp/itoben/dhtml/pull/pull.htm
WETCOLD
質問者

お礼

ありがとうございます。 参考にしてみます。

関連するQ&A

  • 同じプルダウンメニューの外部化

    フォームのプルダウンを使用して メニューを作成しているのですが、 ソースが長くなってしまうのでなんとかJavaScriptで外部化出来ないかと考えております。 <select> <option>A</option> <option>B</option> <option>C</option>     ・     ・     ・ </select> 上記の様なイメージのselectが1000個くらい必要となり かなりずらずらと書かなければなりません。 そこで、<option>の中身を外部のJavaScriptファイルから読み込んで表示出来ないかと思っています。 なにか良い方法をご存じの方いらっしゃいましたらご教授下さい。

  • javascriptでプルダウンメニューの操作

    javascriptで、select/optionタグからなるプルダウンメニューから、マウスが外れたらプルダウンメニューが閉じるという動きを実装したいです。 select/optionからマウスアウトした際に、別のフォームにフォーカスを合わせる(これで無理やりプルダウンを閉じた状態にする)処理を書いているのですが、 これだと、optionから次のoptionタグにマウスが移動したときもマウスアウトと判定されてしまい、プルダウンの中身を選択する前にメニューが閉じてしまいます。 このあたりの問題をうまく解消できる描き方などありましたら教えて下さい。

  • プルダウンメニューで・・・。

    <SELECT>タグのプルダウンメニューで、 複数選択は可能でしょうか? 以前どこかのホームページで、Shiftキーを押しながらできたと思うのですが・・・。

    • ベストアンサー
    • HTML
  • フレームのある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> どこをどう直したらいいのか、是非お教え下さい。 よろしくお願いします。

  • 複数のプルダウンメニューの作り方。

    質問内容に不備があったため再度質問させて頂きます。 前回答えて下さった方には大変ご迷惑をおかけします。 非常に多くのものを奇麗に見せたいのでプルダウンメニューがいいと思い、作りました。 ・Aリスト、Bリスト、Cリスト…とプルダウンメニュー(メニューを選ぶとアンカー先に飛ぶようにしたい)を複数含んだフォームを一つのhtmlに作ったのですが、動作しません。 一つのフォームに一つのプルダウンメニューは上手くいくのですが、Javascriptを二つ並べると動かなくなります。 とりあえず関数名を重複しない様にしたらいいという事だけはネットで調べてわかりました。 今は、下記の状態になっています。 list.html <script language="JavaScript"> <!-- function MENU(){ mySelect = document.myForm.myMenu.selectedIndex; location.href = document.myForm.myMenu.options[mySelect].value; } // --> </script> <form name="myForm"> <select name="myMenu" onChange="MENU()"> <option value="">A</option> <option value="list.html#a001">A001</option> <option value="list.html#a002">A002</option> <option value="list.html#a003">A003</option> </select> <select name="myMenu2" onChange="MENU()"> <option value="">B</option> <option value="list.html#b001">A001</option> <option value="list.html#b002">A002</option> <option value="list.html#b003">A003</option> </select> </form> <a id="a001" name="a001"></a>A001<br> <a id="a001" name="a002"></a>A002<br> <a id="a001" name="a003"></a>A003<br> <a id="a001" name="b001"></a>B001<br> <a id="a001" name="b002"></a>B002<br> <a id="a001" name="b003"></a>B003<br> あと、このように同じhtml内でのリンクになる場合は、optionのvalueのlist.htmlを省いてもいいのでしょうか? 当方、Javascriptに関してはコピペでしか使えない程度の知識の人間です。 ご指南の程宜しくお願いします。

  • プルダウンメニューの見た目を変えたい!!!!!!!!……です。

    はじめましてJackMINIと申します。 HP上で『プルダウンメニュー(オプションメニュー)を使いたい』と思うのですが、普通はメニューボタンの見た目がユーザー側の機種やブラウザに依存されてしまいますよね。 ですが、自分の作っているサイトのデザインにあまりに合わないので、その"メニューボタンの見た目"を変えたいのですが、出来る方法はありますでしょうか? (プルダウンの使用目的は、コンテンツのINDEXページからその下層にある各ページに飛べるようにするためです。) 実際には、例えばオリジナルのセレクトボタン画像を作ってsrcでリンクさせたり、形はデフォルトのままでも下地やテキストの色を指定したり…といった形でサイトのデザインに合わせられると良いのですが…。 ちなみに、Mac OS9.x のiCabでも正常に動作するように作っているので、 フォームの<SELECT>タグ<OPTION>タグを使ったオプションメニューを使うつもりです。(…条件が厳しくてスミマセン) もし無理なようでしたら、プルダウンと同じような機能で見た目をカスタマイズできる方法を教えていただけるとヒジョーに助かります。 ただ、FLASHは持っていないので使えません。m(__)m (…お金がないので) HTMLとJavaScript(もしくはCSS)で可能でしたら、多少面倒だったり難解だったりしても構いませんので、何卒御教授お願い致します。

  • プルダウンメニュー表示時の高さの指定方法

    ブラウザ上でプルダウンメニューを表示させる際に、表示される高さ(タテ幅)の指定をするにはどうすればよいか、ご存知の方は教えていただけないでしょうか? ちなみに、プルダウンメニューの横幅は、<select>タグ内に、「style="width:(幅を指定);"」を記述することで固定幅の設定が可能でしたが・・・ なお、プルダウンメニューは初期表示として、1件のみ表示させるものとします(すなわち、<select>タグ内の「size="1"」の指定は変えないこととする)。 というのも、プルダウンに表示させる項目(条件によって可変)の件数が多い場合に、プルダウンメニュー内でスクロールさせるのをできるだけ避けたいためです。 よって、方法としては、 1.プルダウン表示させる際の高さ(タテ幅)を固定で指定する 2.可能であれば、登録されている全項目の表示をさせる 以上2つの方法を考えています。 なにかよい方法があれば、ぜひ教えてください。

    • ベストアンサー
    • HTML
  • 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
  • プルダウンメニューの内容の取得方法ってありますか?

    プルダウンメニューで、VALUE値 選択された項目の内容って取得できないんでしょうか。 <FORM NAME="sltTest"> <SELECT NAME="slt01"> <OPTION VALUE="01">内容1</OPTION> <OPTION VALUE="02">内容2</OPTION> </SELECT> </FORM> たとえば上記のようなメニューのとき、 選択された「内容1」もしくは「内容2」を取得したいとき どう記述すれば取得可能でしょうか。

  • プルダウンメニューで値を渡したいのですが

    すみません。今phpとhtmlであるサイトを作っているのですが プルダウンメニューを選択した後、ボタンを押すことなく選択した途端ページ移動 して、値を持って行きたいのですがjavascriptはまったく知らないためやり方がわかりません。 いろいろググってそれらしいスクリプトを見つけたのですが以下だとまったく動的に反応しません。 (ページも移動しません) 最終的にpost[ffa]に値であるniやameなどを入れたいのですがどこをどういじれば良いでしょうか・・。 <form name="ffa" method="post" action="abc.php"> <script type="text/javascript"> <select name="sel1" onChange="document.forms['ffa'].submit()" > <option value="ni">日本</option> <option value="ame">アメリカ</option> <option value="igi">イギリス</option> <option value="su">スウェーデン</option> </select> </script>

専門家に質問してみよう