ベストアンサー

プルダウンメニューについて

2008/04/17 01:47

ジャバスクリプトが全くの初心者です。プルダウンメニューをつくりたくて http://javascript.eweb-design.com/0701_pdm.html こちらのサイトを参考につくっていますが、 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript">  </SCRIPT> </HEAD> <BODY bgcolor="#ffffff"> <A href="javaScript:pullDown()">メニューを表示する</A><BR> <DIV id="ID" style="position:absolute;visibility:hidden;"> <A href="http://www.yahoo.co.jp/">■Yahoo!</A><BR> <A href="http://bb.yahoo.co.jp/">■Yahoo! BB</A><BR> <A href="http://shopping.yahoo.co.jp/">■Yahoo! Shopping</A><BR> <A href="http://auctions.yahoo.co.jp/">■Yahoo! Auctions</A><BR> </DIV> <BR><BR><BR><BR> </BODY> </HTML> とありますが、ボタンが二箇所ある場合はジャバスクリプトの部分はどのように書けば良いでしょうか？ <SCRIPT language="JavaScript">  （ＩＤの部分を変更しています。）こう書いてみましたがダメでした。とても困っています、どなたか助けてください。よろしくお願いいたします。

mintmintmi
お礼率78% (48/61)

JavaScript
回答数3
ありがとう数5

みんなの回答 （3）
専門家の回答

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

ベストアンサー

auty
ベストアンサー率58% (284/486)

2008/04/17 06:13 回答No.1

「サイトの参考の仕方」を簡単に説明します。 → Sample 2：プルダウンメニューカスタマイズ版をクリックし、 http://javascript.eweb-design.com/sample/s0701_2.html を開きます。このページのソースコードを表示します。メニューの［表示］-［ページのソース］など ------------------------------------------------------------ <HTML> <HEAD> <TITLE></TITLE> <LINK href="http://aeu.jp/cs/style.css" rel="stylesheet" type="text/css"> <SCRIPT language="JavaScript">  </SCRIPT> </HEAD> <BODY bgcolor="#ffffff"> <TABLE border="0" cellspacing="0" cellpadding="0"> <TBODY> <TR> <TD> <DIV style="background-color:#ffcccc; width:160px"> <A href="javaScript:pullDown01()">メニュー１を表示する</a> </DIV> <DIV id="ID01" style="visibility:hidden;background-color:#ffdddd;width:160px"> <A href="http://www.yahoo.co.jp/">■Yahoo!</A><BR> <A href="http://bb.yahoo.co.jp/">■Yahoo! BB</A><BR> <A href="http://shopping.yahoo.co.jp/">■Yahoo! Shopping</A><BR> <A href="http://auctions.yahoo.co.jp/">■Yahoo! Auctions</A><BR> </DIV> </TD> <TD> <DIV style="background-color:#ccffcc; width:160px"> <A href="javaScript:pullDown02()">メニュー２を表示する</a> </DIV> <DIV id="ID02" style="visibility:hidden;background-color:#ddffdd;width:160px"> <A href="http://www.yahoo.co.jp/">■Yahoo!</A><BR> <A href="http://bb.yahoo.co.jp/">■Yahoo! BB</A><BR> <A href="http://shopping.yahoo.co.jp/">■Yahoo! Shopping</A><BR> <A href="http://auctions.yahoo.co.jp/">■Yahoo! Auctions</A><BR> </DIV> </TD> <TD> <DIV style="background-color:#ccccff; width:160px"> <A href="javaScript:pullDown03()">メニュー３を表示する</a> </DIV> <DIV id="ID03" style="visibility:hidden;background-color:#ddddff;width:160px"> <A href="http://www.yahoo.co.jp/">■Yahoo!</A><BR> <A href="http://bb.yahoo.co.jp/">■Yahoo! BB</A><BR> <A href="http://shopping.yahoo.co.jp/">■Yahoo! Shopping</A><BR> <A href="http://auctions.yahoo.co.jp/">■Yahoo! Auctions</A><BR> </DIV> </TD> </TR> </TBODY> </TABLE> <BR><BR><BR><BR> <BR><BR> </BODY> </HTML> ------------------------------------------------------------ が得られます。

質問者

お礼 2008/04/17 12:51

回答していただきありがとうございます！！教えていただいて意味がわかり、ちゃんと表示することができました。本当に感謝です。ありがとうございました。

その他の回答 (2)

chanfi
ベストアンサー率37% (10/27)

2008/04/17 10:50 回答No.3

プルダウンメニューの作り方は他の方がお答えしているので、なぜ質問者様のコードだと上手くいかないかを考えてみましょう。 flag = false;　１ function pullDown() {　２ if(flag) ID1.style.visibility = "hidden"; else ID1.style.visibility = "visible"; flag = !flag;　１３ flag = false;　１ function pullDown() {　２ if(flag) ID2.style.visibility = "hidden"; else ID2.style.visibility = "visible"; flag = !flag;　１ } なぜ正しく動かないか。１．flag 変数を同じものを使っている症状：ID1が表示されているときにID2をクリックしても、ID2が表示されない　など解決策例：flag1、flag2を用意する２．function名が同じで、引数も同じ症状：片方のプルダウンメニューしか動作しない解決策例：pullDown1()、pullDown2()などとし、それぞれを呼ぶ３．pullDown()の}が無い症状：スクリプトエラー解決策例：}をつける一応、この3点を修正すれば正しく動作するはずです。３は質問を作成する際のコピーミスかもしれませんが＾＾；

質問者

お礼 2008/04/17 12:58

回答していただきありがとうございます！そうなんですね、意味を全く理解していなかったため、とても勉強になりました！教えていただきありがとうございました。

leap_day
ベストアンサー率60% (338/561)

2008/04/17 07:08 回答No.2

こんにちは参考サイトとは違いますけど・・・こんな感じ？ <script type="text/javascript"> </script> <A href="javaScript:pullDown('ID1')">メニューを表示する</A><BR> <DIV id="ID1" style="position:absolute;visibility:hidden;"> <A href="http://www.yahoo.co.jp/">■Yahoo!</A><BR> <A href="http://bb.yahoo.co.jp/">■Yahoo! BB</A><BR> <A href="http://shopping.yahoo.co.jp/">■Yahoo! Shopping</A><BR> <A href="http://auctions.yahoo.co.jp/">■Yahoo! Auctions</A><BR> </DIV> <div style="height:100px;"> </div> <A href="javaScript:pullDown('ID2')">メニューを表示する</A><BR> <DIV id="ID2" style="position:absolute;visibility:hidden;"> <A href="http://www.yahoo.co.jp/">■Yahoo!</A><BR> <A href="http://bb.yahoo.co.jp/">■Yahoo! BB</A><BR> <A href="http://shopping.yahoo.co.jp/">■Yahoo! Shopping</A><BR> <A href="http://auctions.yahoo.co.jp/">■Yahoo! Auctions</A><BR> </DIV> <div style="height:100px;"> </div>

質問者

お礼 2008/04/17 12:55

回答していただきありがとうございます！最初の方の方法で表示することができました。わざわざ、新しい方法を教えていただきありがとうございました。

関連するQ&A

プルダウンメニューについてです。
プルダウンメニューについてです。 http://javascript.eweb-design.com/0701_pdm.html こちらのサイトを参考につくっています。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript">  </SCRIPT> </HEAD> <BODY bgcolor="#ffffff"> <A href="javaScript:pullDown()">メニューを表示する</A><BR> <DIV id="ID" style="position:absolute;visibility:hidden;"> <A href="http://www.yahoo.co.jp/">■Yahoo!</A><BR> <A href="http://bb.yahoo.co.jp/">■Yahoo! BB</A><BR> <A href="http://shopping.yahoo.co.jp/">■Yahoo! Shopping</A><BR> <A href="http://auctions.yahoo.co.jp/">■Yahoo! Auctions</A><BR> </DIV> <BR><BR><BR><BR> </BODY> </HTML> 説明がうまくできないのですが、、”メニューを表示する”をクリックしたときにドロップダウンメニューを開くと同時にページを開きたいと思っています。（”メニューを表示する”のページを作りたい。）どうしたらよいでしょうか?よろしくお願いします。
- ベストアンサー
- JavaScript
プルダウンとチェックボックスの連動
はじめましてよろしくおねがいします。やりたいことはプルダウンのメニューの中身を活性したり非活性にしたいのですが、どのようにやるのか想像がつきません。以下にソースを貼り付けました。チェックボックスにチェックされた場合はメニューの中身の■Yahoo!をリンクさせない様にしたいです。チェックが外れたときはメニューの中身はすべてリンクで表示します。現状はすべてリンクしかできていないです。チェックボックスとの連動の方法、メニューの中の非活性の方法を教えてください。よろしくおねがいします。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript">  </SCRIPT> </HEAD> <BODY bgcolor="#ffffff"> <A href="javaScript:pullDown()">メニューを表示する</A><BR> <DIV id="ID" style="position:absolute;visibility:hidden;"> <A href="http://www.yahoo.co.jp/">■Yahoo!</A><BR> <A href="http://auctions.yahoo.co.jp/">■Yahoo! Auctions</A><BR> </DIV> <BR><BR><BR><BR><BR><BR> <FORM> <INPUT TYPE ="checkbox">ここにチェックを入れるとプルダウンの■Yahoo!のみ非活性にしたい。 </FORM> </BODY> </HTML>
- ベストアンサー
- JavaScript
プルダウンメニュ展開時にずらす方法
以下の設定をおこなった際に「プルダウン1」で表示される「■メニュ1」と「■メニュ2」が「プルダウン2」に重ならないように「プルダウン2」が自動的に下がり、「プルダウン1」を閉じると元の位置に戻るような設定はないでしょうか？宜しくお願いいたします。 function pullDown1() { if(flag) ID1.style.visibility = "hidden"; else ID1.style.visibility = "visible"; flag = !flag; } function pullDown2() { if(flag) ID2.style.visibility = "hidden"; else ID2.style.visibility = "visible"; flag = !flag; } //--> </SCRIPT> </HEAD> <BODY bgcolor="#ffffff"> <A href="javaScript:pullDown1()">プルダウン1</A><BR> <DIV id="ID1" style="position:absolute;visibility:hidden;"> <A href="xxxx">■メニュ1</A><BR> <A href="xxxx">■メニュ2</A><BR>  <A href="javaScript:pullDown2()">プルダウン2</A><BR> <DIV id="ID2" style="position:absolute;visibility:hidden;"> <A href="xxxx">■メニュ3</A><BR> <A href="xxxx">■メニュ4</A><BR>
- ベストアンサー
- JavaScript
カテゴリをクリックして、リンク先一覧を表示させたい
テーブル内のカテゴリをクリックすると、別テーブルにリンク先一覧を表示させるような、リンクページを作りたいのですが、下記のように組むと、「リンク１」をクリック→別テーブルにちゃんとリンク先一覧が表示される。次に「リンク２」をクリックすると「リンク１」のリンク先一覧の下に「リンク２」のリンク先一覧も表示されてしまう。しかも２回クリックしないと表示されません（泣「リンク２」をクリックしたら「リンク１」で表示させたリンク先一覧と入れ替えで、リンク先を表示させたいのですが、やり方が分かる方いらしたら、ご教授お願いします。 <HEAD> <SCRIPT language="JavaScript">  </SCRIPT> </HEAD> <BODY> <TABLE border="1"> <TBODY> <TR> <TD><A href="javaScript:pullDown01()">リンク１</a><BR> <BR> <A href="javaScript:pullDown02()">リンク２</a><BR> </TD> <TD style="width:380px;height:190px"> <DIV id="ID01" style="visibility: hidden;"> <A href="http://www.yahoo.co.jp/">■Yahoo!</A><BR> </DIV> <DIV id="ID02" style="visibility: hidden;"> <A href="http://bb.yahoo.co.jp/">■Yahoo! BB</A><BR> </DIV> </TD> </TR> </TBODY> </TABLE> </BODY>
- ベストアンサー
- JavaScript
プルダウンメニューをmouseoutで閉じる
mouseoutで閉じるようにしたいのですが、可能でしょうか。 <SCRIPT language="JavaScript">  </SCRIPT>
- 締切済み
- JavaScript
マウスオーバーのプルダウンメニューについて
すみません。まったくのしろうとです。教えてください。会社のWebサイトをリニューアルしようとしていますが、メニューを折りたたみにしたいと考えています。ネットでmouseoverというJavaスクリプトでできるということまでは突き止めました。そしてサンプルも見つけたのですが、やりたいことと合致しなくて困っています。 <script language="JavaScript"></script> </head> <body> <IMG src="newimg/AdAge.gif" onmouseover="pdMenu('Menu1')"><br> <div id="Menu1" style="visibility:hidden" onMouseout="pdMenu('Menu1')"> <a href="http://www.openspc2.org/" >わっ！</a><br> <a href="http://www.impress.co.jp/">ぎゃっ！</a><br> <a href="http://game.gr.jp/" >しょえ～！</a><br> </div> </body> このスクリプトでは、newimg/AdAge.gifという画像の上にマウスをかざすと、言葉がプルダウンで出てきます。わたしがやりたいのは、この画像を単なるテキストに変えることです。HTMLエディタ上でイロイロやってみましたが、うまくいきません。この部分をテキストに変える方法を教えていただけないでしょうか？どうかよろしくお願いします。
- ベストアンサー
- JavaScript
JavaScriptがfirefoxで作動しない
IEでは正しく作動するjavascriptがfirefoxではうまく作動しません。なぜなのかどなたか教えてください・・・・！ <script type="text/JavaScript"> flag = false; function pd1() { if(flag) ID1.style.visibility = "hidden"; else ID1.style.visibility = "visible"; flag = !flag; } </script> ここからhtml <div id= "w1"><a href="javascript:pd1()" >テキスト</a></div> <div id="ID1" style="visibility: hidden;"> <p>テキスト</p></div> 以上です。まだまだ超初心者です。よろしくお願いいたします。
- ベストアンサー
- JavaScript
ドロップダウンリストの高さを、非表示のときは上に詰
初心者です。本当に初歩な質問で申し訳ありません。ドロップダウンリストを作り、クリックしたときにサブメニューを表示したいのですが、表示、非表示は切り替えられても、非表示のときに空欄ができてしまいます。これを、非表示のときは上に詰めて表示するようにしたいのですが、その方法を教えてください。下記がそのソースになります。 <SCRIPT language="JavaScript">  </SCRIPT> </HEAD> <BODY> <ol> <li><A href="javaScript:pullDown1(0)">メニューを表示する</A> <DIV id="ID" style="visibility:hidden;"> <ul> <li><A href="">A</A></li> <li><A href="">B</A></li> <li><A href="">C</A></li> <li><A href="">D</A></li> </ul> </DIV> </li> <li><A href="javaScript:pullDown1(1)">メニューを表示する</A> <DIV id="ID" style="visibility:hidden;"> <ul> <li><A href="">a</A></li> <li><A href="">b</A></li> <li><A href="">c</A></li> <li><A href="">d</A></li> </ul> </DIV> </li> </ol> </BODY> 以上、よろしくお願いいたします。
- ベストアンサー
- JavaScript
onMouseOver，Outを使用したドロップダウン型メニューを作りたい
★ヘッダ内 function mymenu(titles){ if((document.getElementById) && (!document.all)) { titles=document.getElementById(titles).style; if (titles.visibility=='hidden') titles.visibility="visible"; else titles.visibility='hidden'; } else{ titles=document.all[titles].style; if (titles.visibility=='hidden') titles.visibility="visible"; else titles.visibility='hidden'; } } ★本文 <base target="_blank"> （…中略…） <td class="top_menu" align="center" nowrap bgcolor="#000099" width="60" height="23"> <a style="text-decoration:none" href="JavaScript:mymenu('drop1')" target="_self">仮名</a><br> <div id="drop1" style="position: absolute; width: 120px; height: 60px; background-color: #000099; visibility:hidden"> <a href="#" target="_blank">あ</a><br> <a href="#" target="_blank">い</a><br> <a href="#" target="_blank">う</a><br> </div> </td> 上が現在のソースで、テーブルでレイアウトしています。これをonMouseOver，Outを使用したドロップダウン型メニューにできないでしょうか？宜しくお願いいたします。 <イメージ>http://www.adobe.co.jp/　…フラッシュは不要です。
- ベストアンサー
- JavaScript
マウスオーバーの合体
マウスオーバーのプルダウンメニューとマウスオーバー画像変更スクリプトを組み合わせることは可能なのでしょうか？イメージとしては所期画面に画像Ａがあり、マウスを載せると画像Ａが画像Ｂになり、更に画像Ｂの下にプルダウンメニューが表示されるイメージです。尚、現在は以下の組み合わせがうまくいかない為（不可能？）個々にスクリプトを記載しておきます。 ↓↓↓↓↓↓マウスオーバーのプルダウンメニュー↓↓↓↓↓↓ <html> <head> <script language="JavaScript"></script> </head> <body> <img src="main.png" onMouseover="pdMenu('Menu')"><br> <div id="Menu" style="visibility:hidden" onMouseout="pdMenu('Menu')"> <a href="http://www.yahoo.co.jp/" ><img src="sub01.png" border="0"></a><br> <a href="http://www.google.co.jp/"><img src="sub02.png" border="0"></a><br> </div> </body> </html> ↑↑↑↑↑↑マウスオーバーのプルダウンメニュー↑↑↑↑↑↑ ↓↓↓↓↓↓マウスオーバー画像変更スクリプト↓↓↓↓↓↓ <img border="0" src="main.png" onmouseover="this.src='main2.png'" onmouseout="this.src='main.png'"> ↑↑↑↑↑↑マウスオーバー画像変更スクリプト↑↑↑↑↑↑
- 締切済み
- JavaScript

プルダウンメニューについて