ドロップダウンリストの高さを上に詰めて非表示にする方法
- ドロップダウンリストの非表示時に空欄ができる問題を解決する方法を教えてください。
- ドロップダウンリストを作成し、非表示時に上に詰めて表示する方法を教えてください。
- ドロップダウンリストをクリックしたときにサブメニューを表示する際、非表示時に空欄が生じる問題を解決したいです。
- ベストアンサー
ドロップダウンリストの高さを、非表示のときは上に詰
初心者です。本当に初歩な質問で申し訳ありません。 ドロップダウンリストを作り、クリックしたときにサブメニューを表示したいのですが、 表示、非表示は切り替えられても、非表示のときに空欄ができてしまいます。 これを、非表示のときは上に詰めて表示するようにしたいのですが、その方法を 教えてください。 下記がそのソースになります。 <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> 以上、よろしくお願いいたします。
- tatapatank
- お礼率48% (91/187)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 ID[d0].style.visibility = "hidden";をID[d0].style.display = "none"; ID[d0].style.visibility = "visible";をID[d0].style.display = "inline"; style="visibility:hidden;"をstyle="display:none;"に変更してみてください。
関連するQ&A
- ドロップダウンメニュー
ドロップダウンメニュについてお伺いします。下記、サンプルがWebにあったのですが メニュー1、メニュー2、メニュー3をマウスオーバーした時に選択肢が表示されます。 しかしながら横に最大3個未満の場合、余分なスペースができてしまいます。 この余分なスペースを出さないで存在する選択肢の分だけ表示表示させるようなことは できるのでしょうか。 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #header-wrapper { height: 60px; } #header { height: 60px; } #site-title { padding: 10px 0 0 0; } h5 { margin-top: 20px; } #main { clear: left; margin: 20px auto; padding: 5px 20px; width: 900px; } h3 { font-size: 20px; } #sample ul { list-style:none; } #menu li { position: relative; float: left; margin: 0; padding: 5px; width: 200px; height: 20px; border: solid 1px #ccc; font-weight: bold; } #menu li:hover { color: #fff; background: #333; } #menu li ul { display: none; position: absolute; top: 30px; left: -1px; padding: 5px; width: 600px; background: #eee; border: solid 1px #ccc; } #menu li ul li { float:left; margin: 0; padding: 0; width: 200px; border: none; } #menu li ul li a { display: inline-block; width: 200px; height: 20px; } #menu li ul li a:hover { background: #999; color: #fff; } </style> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.7");</script> <script type="text/javascript"> $(function() { $("#menu li").hover(function() { $(this).children('ul').show(); //$('#menu li ul').css('width', '200px'); }, function() { $(this).children('ul').hide(); }); }); </script> </head> <body class="archive date col-2-right fixed loggedin browser-chrome"> <div id="page"> <div id="main"> <div id="sample"> <ul id="menu"> <li id="menu1">メニュー1 <ul> <li><a href="#">サブメニュー1-1</a></li> </ul> </li> <li id="menu2">メニュー2 <ul> <li><a href="#">サブメニュー2-1</a></li> <li><a href="#">サブメニュー2-2</a></li> </ul> </li> <li id="menu3">メニュー3 <ul> <li><a href="#">サブメニュー3-1</a></li> <li><a href="#">サブメニュー3-2</a></li> <li><a href="#">サブメニュー3-3</a></li> <li><a href="#">サブメニュー3-4</a></li> </ul> </li> </ul> </div> </div><!--main--> </div><!--page--> </body> </html>
- 締切済み
- CSS
- プルダウンメニュ 展開時にずらす方法
以下の設定をおこなった際に「プルダウン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"> <!-- // プルダウンメニュー 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
- プルダウンメニューについて
ジャバスクリプトが全くの初心者です。 プルダウンメニューをつくりたくて 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
- javascriptとCSSを使ってのドロップダウンメニュー作成
CSSとJavaScriptを使って ドロップダウンメニューを作ろうと思っているのですが JavaScriptがうまく作動していないためか FireFoxでは表示されるのですが IE6では動きません。 ご教授お願い致します。 ■index.html <head> <script src="javascript/menu.js" type="text/javascript"></script> </head> <div id="nav"> <ul> <li id="category"><a href="～">category</a> <ul> <li><a href="～">Overview</a></li> <li><a href="～">Overview</a></li> </ul> <ul> <li id="category"><a href="～">category</a> <ul> <li><a href="～">Overview</a></li> <li><a href="～">Overview</a></li> </ul> </div> ■menu.js function menuHover() {var menuItems = d.getElementById("nav").getElementsByTagName("li"); for (var i = 0, miL = menuItems.length; i < miL; i++) { menuItems[i].onmouseover = function() { this.className = "mnhover"; } menuItems[i].onmouseout = function() { this.className = ""; } window.onload = menuHover();
- 締切済み
- JavaScript
- CSSのみでのドロップダウンメニューについて
下のサイトを参考にドロップダウンメニューを作成したのですが、 ドロップダウンで出てくるサブメニューにマウスを移動した際、一番上のメニューのhoverの効果が消えてしまい困っています。 どうすれば、サブメニューにマウスを移動しても一番上のメニューのhoverの効果を残せるようにできるのでしょうか？ 【参考にしたサイト】 http://weboook.blog22.fc2.com/blog-entry-359.html （このサイトでは綺麗に動いています。。） 【私のコード】 <!DOCTYPE html> <html> <head> <style type="text/css"> /** １階層目 **/ #menu { list-style-type: none; } #menu > li { position: relative; float: left; text-align: center; } #menu > li > a { display:inline-block; margin-left:20px; line-height: 1; } #menu > li > a:hover { background:lightpink; } /** ２階層目 **/ #menu > li > ul { position: absolute; top: 100%; left: 0; list-style-type: none; } #menu > li > ul > li { position: relative; overflow: hidden; height: 0; width: 200px; text-align:left; } #menu > li:hover > ul > li { overflow: visible; height:2em; } </style> </head> <body> <div> <ul id="menu"> <li><a href="#">menu 1</a></li> <li><a href="#">menu 2</a> <ul> <li><a href="#">sub menu 1</a></li> <li><a href="#">sub menu 2</a></li> </ul> </li> </ul> </div> </body> </html> 宜しくお願い致します。
- 締切済み
- CSS
- プルダウンメニューについてです。
プルダウンメニューについてです。 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
- ドロップダウンメニューについて
apycomでhttp://apycom.com/menus/1-yellow-green.htmlの ドロップダウンメニューをダウンロードして設定しているのですが、サブメニューのリンク文字の変更方法が分からなくて困っています。 サブメニューの背景を変更したのでリンクの文字をもっとハッキリ見える色に変更したいです。 マウスが乗った時の文字の色も変更できません。 昨日から色々やってるのですがどうしても解決できないのでお聞きしました。 よろしくお願いします。 /** ********************************************* * Prototype of styles for horizontal CSS-menu * @data 30.06.2009 ********************************************* * (X)HTML-scheme: * <div id="menu"> * <ul class="menu"> * <li><a href="#" class="parent"><span>level 1</span></a> * <ul> * <li><a href="#" class="parent"><span>level 2</span></a> * <ul><li><a href="#"><span>level 3</span></a></li></ul> * </li> * </ul> * </li> * <li class="last"><a href="#"><span>level 1</span></a></li> * </ul> * </div> ********************************************* */ /* menu::base */ div#menu { height:41px; background : transparent url(main-bg.png) repeat-x scroll 0% 0%; } div#menu ul { margin: 0; padding: 0; list-style: none; float: left; } div#menu ul.menu { padding-left: 30px; } div#menu li { position: relative; z-index: 9; margin: 0; padding: 0 5px 0 0; display: block; float: left; } div#menu li:hover >ul { left: -2px; } div#menu a { position: relative; z-index: 10; height: 41px; display: block; float: left; line-height: 41px; text-decoration: none; font: normal 12px Trebuchet MS; } div#menu a:hover, div#menu a:hover span { color: #fff; } div#menu li.current a {} div#menu span { display: block; cursor: pointer; background-repeat: no-repeat; background-position: 95% 0; } div#menu ul ul a.parent span { background-position:95% 8px; background-image : url(item-pointer.gif); } div#menu ul ul a:hover.parent span { background-image : url(item-pointer-mover.gif); } /* menu::level1 */ div#menu a { padding: 0 10px 0 10px; line-height: 30px; color : rgb(56, 56, 56); } div#menu span { margin-top: 5px; }/**@replace#1*/ div#menu li { background : transparent url(main-delimiter.png) no-repeat scroll 98% 4px; } div#menu li.last { background: none; } /* menu::level2 */ div#menu ul ul li { background: none; } div#menu ul ul { position: absolute; top: 38px; left: -999em; width: 163px; padding: 5px 0 0 0; background : rgb(179, 221, 81) none repeat scroll 0% 0%; margin-top:1px; } div#menu ul ul a { padding: 0 0 0 15px; height: auto; float: none; display: block; line-height: 24px; color : rgb(56, 56, 56); } div#menu ul ul span { margin-top: 0; padding-right: 15px; _padding-right: 20px; color : rgb(56, 56, 56); } div#menu ul ul a:hover span { color: #fff; } div#menu ul ul li.last { background: none; } div#menu ul ul li { width: 100%; } /* menu::level3 */ div#menu ul ul ul { padding: 0; margin: -38px 0 0 163px !important; margin-left:172px; color: #FFFFFF; } /* colors */ div#menu ul ul ul { background: rgb(41,41,41); } div#menu ul ul ul ul { background: rgb(38,38,38); } div#menu ul ul ul ul { background: rgb(35,35,35); } /* lava lamp */ div#menu li.back { background : transparent url(lava.png) no-repeat scroll right -44px !important; background-image : url(lava.gif); width: 13px; height: 44px; z-index: 8; position: absolute; margin: -1px 0 0 -5px; } div#menu li.back .left { background : transparent url(lava.png) no-repeat scroll left top !important; background-image : url(lava.gif); height: 44px; margin-right: 8px; } 【html】 <div id="menu"> <ul class="menu"> <li><a href="#"><span>Home</span></a> <li><a href="#" class="parent"><span>商品紹介</span></a> <ul> <li><a href="#"><span>コンクリート</span></a> <li><a href="#"><span>木材</span></a> <li><a href="#"><span>アクセサリー</span></a> <li><a href="#"><span>砂</span></a> <li><a href="#"><span>フード</span></a>
- 締切済み
- ホームページ作成ソフト
- CSS IEバグ リストの後の隙間を消したい
よろしくお願いします。 以下のメニューで、"sub_menu02" の下に隙間が出てしまいます。 IEのバグのようなのですが、回避方法ご教授願います。 *実際は、の部分はJAVASCRIPTによるプルダウンになってます。 --------------------------------------------------------------- <style> * { margin : 0; padding : 0; } body { margin : 0; padding : 0; background: #fafafa; } #slidemenu_sample { overflow:hidden; } #menu_1 { padding: 0; margin: 0 0 0 0; background-color: #e7f6ff; } div#contentsArea div#sNaviArea{ width: 175px; float: left; } div#contentsArea div#sNaviArea dd{ width: 163px; background: #ffffff; } div#contentsArea div#sNaviArea dd ul{ width: 163px; list-style: none; } div#contentsArea div#sNaviArea dd ul li{ width: 163px; border-top: 1px solid #dddddd; margin: 0; padding: 0; display: block; } div#contentsArea div#sNaviArea dd ul li.choice{ background: #e7f6ff; } div#contentsArea div#sNaviArea dd ul li a{ display: block; padding: 5px 0 5px 17px; } div#contentsArea div#sNaviArea dd ul.sNaviSmall li.choice{ background: #e7f6ff; } div#contentsArea div#sNaviArea dd ul.sNaviSmall li{ width: 153px; margin: 0 0 0 10px; display: block; background: #ffffff; } </style> <body> <div> <div id="contentsArea"> <div> <div id="sNaviArea"> <dl> <dd> <ul> <li><a href="">menu01</a></li ><li class="choice"><a href="">menu02</a><ul class="sNaviSmall"><li><a href="">sub_menu01</a></li><li id="slidemenu_sample"><a href="" onmouseout="menu_1.hidePopup('menu_1')" onmouseover="menu_1.showPopup('menu_1')">sub_menu02</a><ul id="menu_1" style="display:none" onmouseout="menu_1.hidePopup('menu_1')" onmouseover="menu_1.showPopup('menu_1')"><li><a href="">aaaaa</a></li><li><a href="">bbbbb</a></li><li><a href="">cccccc</a></li></ul></li ><li><a href="">sub_menu03</a></li></ul> </ul> </dd> </dl> </div> </div> </div> </div>
- 締切済み
- HTML
- onMouseOverの適応範囲
困ってしまい質問させていただきます。 <div> <a href="t1.html" onMouseOver="javascript:document.all('id1').style.visibility='visible';" onMouseOut="javascript:document.all('id1').style.visibility='hidden';">show</a> </div> <div id="id1" onMouseOver="javascript:document.all('id1').style.visibility='visible';" onMouseOut="javascript:document.all('id1').style.visibility='hidden';"> <a href="image.gif" onMouseOver="javascript:document.writeln(document.all('id1').style.visibility)">イメージ</a> </div> 以上のhtmlでは、「イメージ」にマウスを持っていくと、hiddenと表示されてしまいます。 一度も<div id="id1"></div>から離れていないため、visibleと表示されると思っているのですが、<div></div>の中であっても、onmouseOutが実行されてしまうのでしょうか？ ブラウザはIEを利用しています。 どうか宜しくお願いします。
- ベストアンサー
- JavaScript
お礼
おお！かばらしい!! 思っていた通りのことができました!! ありがとうございます。 これからもよろしくお願いします。