ドロップダウンメニューの制作で困っています！
- HTMLの定義を変更してドロップダウンメニューを制作したいのですが、どこを変えれば良いでしょうか？
- 参考にしたサイトのソースでは、HTMLの定義を変更するとドロップダウンメニューが機能しなくなってしまいます。
- ドロップダウンメニューを作成するために、HTMLの定義をどのように変更すれば良いのか教えてください。
- ベストアンサー
ドロップダウンメニューの制作で
こんにちわ。 http://javascript.eweb-design.com/0701_pdm.html のサイトを参考に ほとんどソースを変えずドロップダウンメニューを制作しようとしていますが HTMLの定義を <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> にすると、上記のサイトのソースだとできないのです。 この定義にてどうしても制作したいのですが、どこを変えればいいのでしょうか？ 参考にし、以下のようにソースを書きました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // プルダウンメニュー flag = false; function pullDown01() { if(flag) ID01.style.display = "none"; else ID01.style.display = "block"; flag = !flag; } //--> </SCRIPT> <link href="css/test.css" rel="stylesheet" type="text/css"> </HEAD> <BODY bgcolor="#ffffff"> <TABLE border="0" cellspacing="0" cellpadding="0"> <TBODY> <TR> <TD> <DIV style="background-color:#ffcccc; width:160px"> <div class="test"><p><a href="javaScript:pullDown01()">テスト</a></p></div> </DIV> <DIV id="ID01" style="display:none;"><div class="test2"><p><a href="#">テスト</a></p></div></div> </TD> </TR> </TBODY> </TABLE> <BR><BR><BR><BR> <BR><BR> </BODY> </HTML>
- testid
- お礼率77% (41/53)
- JavaScript
- 回答数3
- ありがとう数5
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
ああ～ メニューが２つ以上あるなら、グル―バルのフラグはやめた方がいいですね <style> .hide{ display:none; } </style> <script> function pullDown(num) { var obj=document.getElementById(num); obj.className = obj.className=="hide"?"":"hide"; return false; } </script> <div><a href="#" onclick="return pullDown('ID01');">テスト1</a></div> <div id="ID01" class="hide"><a href="#">テスト1内容</a></div> <div><a href="#" onclick="return pullDown('ID02');">テスト2</a></div> <div id="ID02" class="hide"><a href="#">テスト2内容</a></div> のように処理してみては？
その他の回答 (2)
- yambejp
- ベストアンサー率51% (3827/7415)
元のソースにあった flag = false; が抜けていますが？
お礼
ああ。。。 なるほど。ありがとうございました！ 思い通りに実装できましたが メニューを増やした時ちょっと挙動がおかしいような気がするんです。 ダブルクリックでないと、メニューが開かなかったり。。。 flag = false; function pullDown01() { var ID01=document.getElementById("ID01"); if(flag) ID01.style.display = "none"; else ID01.style.display = "block"; flag = !flag; return false; } function pullDown02() { var ID02=document.getElementById("ID02"); if(flag) ID02.style.display = "none"; else ID02.style.display = "block"; flag = !flag; return false; } ↑こんな感じで。 ただ、今回の質問事態は解決いたしました！ ありがとうございました！
- yambejp
- ベストアンサー率51% (3827/7415)
グローバル変数を使うべきかどうかは疑問ですが、以下のようにすればとりあえず動きます function pullDown01() { var ID01=document.getElementById("ID01"); if(flag) ID01.style.display = "none"; else ID01.style.display = "block"; flag = !flag; return false; } として、 <a href="#" onclick="return pullDown01();">
お礼
早速の回答ありがとうございます。 参考にし以下のようにソースを書きましたが動いてくれません…。 何か間違っているでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // プルダウンメニュー function pullDown01() { var ID01=document.getElementById("ID01"); if(flag) ID01.style.display = "none"; else ID01.style.display = "block"; flag = !flag; return false; } //--> </SCRIPT> <link href="css/test.css" rel="stylesheet" type="text/css"> </HEAD> <BODY bgcolor="#ffffff"> <TABLE border="0" cellspacing="0" cellpadding="0"> <TBODY> <TR> <TD> <DIV style="background-color:#ffcccc; width:160px"> <div class="test"><p><a href="#" onclick="return pullDown01();">テスト</a></p></div> </DIV> <DIV id="ID01" style="display:none;"><div class="test2"><p><a href="#">テスト</a></p></div></div> </TD> </TR> </TBODY> </TABLE> </BODY> </HTML>
関連するQ&A
- プルダウンメニューについて
ジャバスクリプトが全くの初心者です。 プルダウンメニューをつくりたくて http://javascript.eweb-design.com/0701_pdm.html こちらのサイトを参考につくっていますが、 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // プルダウンメニュー flag = false; function pullDown() { if(flag) ID.style.visibility = "hidden"; else ID.style.visibility = "visible"; flag = !flag; } //--> </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"> <!-- // プルダウンメニュー 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; } //--> （ＩＤの部分を変更しています。） こう書いてみましたがダメでした。 とても困っています、どなたか助けてください。よろしくお願いいたします。
- ベストアンサー
- JavaScript
- プルダウンメニューについてです。
プルダウンメニューについてです。 http://javascript.eweb-design.com/0701_pdm.html こちらのサイトを参考につくっています。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // プルダウンメニュー flag = false; function pullDown() { if(flag) ID.style.visibility = "hidden"; else ID.style.visibility = "visible"; flag = !flag; } //--> </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
- カテゴリをクリックして、リンク先一覧を表示させたい
テーブル内のカテゴリをクリックすると、別テーブルにリンク先一覧を表示させるような、リンクページを作りたいのですが、下記のように組むと、 「リンク１」をクリック→別テーブルにちゃんとリンク先一覧が表示される。 次に「リンク２」をクリックすると「リンク１」のリンク先一覧の下に「リンク２」のリンク先一覧も表示されてしまう。 しかも２回クリックしないと表示されません（泣 「リンク２」をクリックしたら「リンク１」で表示させたリンク先一覧と入れ替えで、リンク先を表示させたいのですが、やり方が分かる方いらしたら、ご教授お願いします。 <HEAD> <SCRIPT language="JavaScript"> <!-- // プルダウンメニュー flag = false; function pullDown01() { if(flag) ID01.style.visibility = "hidden"; else ID01.style.visibility = "visible"; flag = !flag; } function pullDown02() { if(flag) ID02.style.visibility = "hidden"; else ID02.style.visibility = "visible"; flag = !flag; } //--> </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
- プルダウンメニュ 展開時にずらす方法
以下の設定をおこなった際に「プルダウン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
- メニューのツリー化でfirefoxｓでjavascriptが動作しません。
メニューのツリー化をしようと思い、以下のサンプルを使用しました。 IEでは問題なく動くのですが、Firefoxでは動作しません。恐らくネットスケープでも動作しないと思います。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>クリックするとツリーメニューを表示する（１つだけ展開し後はたたむ）</title> <script Language="JavaScript"><!-- trList = ["treeMenu1","treeMenu2","treeMenu3"]; // ツリーメニューのリスト function exMenu(tName) { for (i=0; i<trList.length; i++) eval(trList[i]).style.display = "none"; tMenu = eval(tName).style; if (tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; } // --></script> </head> <body bgcolor="white"> <a href="javaScript:exMenu('treeMenu1')">＋</a>■検索サイト１<br> <div id="treeMenu1" style="display:none"> ├<a href="">Yahoo!</a><br> ├<a href="" >Goo</a><br> └<a href="">Lycos</a><br> </div> <a href="javaScript:exMenu('treeMenu2')">＋</a>■検索サイト２<br> <div id="treeMenu2" style="display:none"> ├<a href="">Infoseek</a><br> ├<a href="" >Google</a><br> └<a href="">Kids Goo</a><br> </div> <a href="javaScript:exMenu('treeMenu3')">＋</a>■検索サイト３<br> <div id="treeMenu3" style="display:none"> ├<a href="">Excite</a><br> └<a href="" >MSN</a><br> </div> </body> </html> 1行目の<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> を消去して、<html>から書き始めれば、firefoxでも動くのですが、DOCTYPE宣言をしていても動くようにしたいと思います。 どなたかアドバイスをよろしくお願いいたします。
- 締切済み
- JavaScript
- safariだけ、display:block;の周りの余白を消すことができず困っています
safariだけ、display:block;の周りの余白を消すことができず困っています。 cssでbr{line-height:0;}にしているのですが、safariだけリンクされない余白が間にできてしまいます。ie、firefoxでは大丈夫です。 たくさん調べましたがわかりません。よろしくお願いします。 以下ソースです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- a{display:block;height:100%;width:100%;line-height:200%;text-decoration: none;} a:hover{background-color:#ffcccc} br{line-height:0;} --> </style> </head> <body> <p> <a href="test">ああああああああああああ</a><br> <a href="test">ああああああああああああ</a><br> <a href="test">ああああああああああああ</a><br> </p> </body> </html>
- ベストアンサー
- HTML
- プルダウンとチェックボックスの連動
はじめましてよろしくおねがいします。 やりたいことはプルダウンのメニューの中身を活性したり非活性に したいのですが、どのようにやるのか想像がつきません。 以下にソースを貼り付けました。 チェックボックスにチェックされた場合はメニューの中身の■Yahoo!をリンクさせない様にしたいです。 チェックが外れたときはメニューの中身はすべてリンクで表示します。 現状はすべてリンクしかできていないです。 チェックボックスとの連動の方法、メニューの中の非活性の方法を教えてください。よろしくおねがいします。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // プルダウンメニュー flag = false; function pullDown() { if(flag) ID.style.visibility = "hidden"; else ID.style.visibility = "visible"; flag = !flag; } //--> </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
- ドロップダウンメニューの方法を教えてください
■ドロップダウンメニューでサブメニューが横並びで出るようにしたいと思っています。 HTMLは下記のように記述しています。どのようにJavascriptを記述すると良いのか教えてください。よろしくお願いします。 【html】 <div id="menuber"> <a href="#"><IMG src="test/m1.gif" width="101" height="20" border="0" align="left"></a> <div class="hiddenmenus"> <span id="sub"> <a href="#"><IMG src="test/sub1.gif" width="101" height="20" border="0" align="left"></a> <a href="#"><IMG src="test/sub2.gif" width="101" height="20" border="0" align="left"></a> <a href="#"><IMG src="test/sub3.gif" width="101" height="20" border="0" align="left"></a> <a href="#"><IMG src="test/sub4.gif" width="101" height="20" border="0" align="left"></a> </span> </div> </div> 【CSS】 .hiddenmenus {position:absolute; top: 20px; left: 0px;} #sub1 { visibility: hidden; }
- ベストアンサー
- JavaScript
- ドロップダウンリストの高さを、非表示のときは上に詰
初心者です。本当に初歩な質問で申し訳ありません。 ドロップダウンリストを作り、クリックしたときにサブメニューを表示したいのですが、 表示、非表示は切り替えられても、非表示のときに空欄ができてしまいます。 これを、非表示のときは上に詰めて表示するようにしたいのですが、その方法を 教えてください。 下記がそのソースになります。 <SCRIPT language="JavaScript"> <!-- function pullDown1(ss) { for(d0 = 0 ; d0 < ID.length ; d0 ++) { ID[d0].style.visibility = "hidden"; } ID[ss].style.visibility = "visible"; } //--> </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
- cssで作ったHP。左のメニューを選んだら右に表示したい。
ホームページ作りの初心者です。左にあるメニューを選択したら、右のウィンドウ枠に表示されるようにしたいのですが、志向錯誤しても思うようになりません。 フレーム、という構造にしていれば、targetを使ってできるというのは分かったんですが、cssで作っています。これは別ものですよね？ それも良く分からなくなっています。 私の下手な説明よりも見ていただく方がいいかと思いますので、例を載せさせてもらいます。やりたいことは、テスト１を押したら、test1.htmがcontents2に表示されるようにしたいのです。 ――――― <div id="wrapper"> <div id="header"></div> <div id="inner"> <div id="contents1"> <a href="./test1.htm"> ●テスト</a><br><br> <a href="./test2.htm"> ●テスト２</a><br><br> <a href="./test3.htm"> ●テスト３</a><br> </div> <div id="contents2"> /*ここに表示したい*/ </div> </div> <div id="footer"></div> </div> </div> ―――――――――――― よろしくお願いいたしますm(__)m
- ベストアンサー
- その他（インターネット・Webサービス）
お礼
ありがとうございます。 完全に意図したことができました。 感謝いたします。