ドロップダウンメニューを短縮する方法
- ドロップダウンメニューを作成する際、大量のメニューを追加するのは煩雑です。簡潔にコードを書く方法を紹介します。
- 他のプログラム表記を使用してドロップダウンメニューを作成することも可能です。メモ帳にコードを貼り付けて、より短くできる方法もあります。
- この質問に対する回答はプログラムを使用して提示します。
- ベストアンサー
ドロップダウンメニューを短縮したい
今ドロップダウンメニューを作っていて、メニューを大量に作りたい時に、下に添付してあるプログラムでは膨大になりすぎて入力がしんどいです。 ドロップダウンメニューには他にも様々なプログラム表記があると思います。ですので、メモ張にプログラムを貼ったら下と似たようなプログラムができ、なおかつこんな長ったらしいプログラムじゃなくても、こうすれば短くできる、などの知恵を持っていらっしゃる方がいらっしゃったら、是非ともご教授願えないでしょうか？。 できればプログラムで回答してもらえるとありがたいです。よろしくお願い致します。 <script language="javaScript"> function overL0(){ document.all("L0").style.backgroundColor="yellow"; document.all("S1").style.visibility="hidden";document.all("si1").style.visibility="hidden";document.all("si2").style.visibility="hidden"; } function offL0(){ document.all("L0").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="hidden";document.all("si1").style.visibility="hidden";document.all("si2").style.visibility="hidden"; } function overL1(){ document.all("L1").style.backgroundColor="yellow"; document.all("S1").style.visibility="visible"; } function offL1(){ document.all("L1").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="visible"; } function overS1(){ document.all("S1").style.backgroundColor="yellow"; document.all("S1").style.visibility="visible";document.all("si1").style.visibility="visible";document.all("si2").style.visibility="visible"; } function offS1(){ document.all("S1").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="visible";document.all("si1").style.visibility="visible";document.all("si2").style.visibility="visible"; } function oversi1(){ document.all("si1").style.backgroundColor="yellow"; document.all("si1").style.visibility="visible"; } function offsi1(){ document.all("S1").style.backgroundColor="#afeeee"; document.all("si1").style.visibility="visible"; } function oversi2(){ document.all("si2").style.backgroundColor="yellow"; document.all("si2").style.visibility="visible"; } function offsi2(){ document.all("si2").style.backgroundColor="#afeeee"; document.all("si2").style.visibility="visible"; } </script> <body> <div id="L0" style="position:relative;background-color:#afeeee; width:1500;height:30" onMouseOver="overL0()" onMouseOut="offL0()"> </div> <div id="L1" style="position:relative;background-color:#afeeee; width:150;height:30" onMouseOver="overL1()" onMouseOut="offL1()"> name1 </div> <div id="S1" style="position:absolute;top:45;left:160;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="overS1()" onMouseOut="offS1()"> name2 </div> <div id="si1" style="position:absolute;top:45;left:310;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="oversi1()" onMouseOut="offsi1()"> <a href="http://www.google.co.jp/" target="blank" target="c">A</a><br> </div> <div id="si2" style="position:absolute;top:75;left:310;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="oversi2()" onMouseOut="offsi2()"> <a href="http://www.google.co.jp/" target="blank" target="c">B</a><br> </div> </body>
- dwuoa
- お礼率42% (21/49)
- その他(ソフトウェア)
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
http://okwave.jp/qa/q7093084.html マルチするな。 それと何故このカテゴリ? JavaScriptのカテゴリで質問しない理由は? 一つおかしな行動をする奴はほかにもおかしな行動をする法則。
関連するQ&A
- このプログラムを改善してくれませんか？。
今ドロップダウンメニューを作っていて、メニューを大量に作りたい時に、下に添付してあるプログラムでは膨大になりすぎて入力がしんどいです。 ドロップダウンメニューには他にも様々なプログラム表記があると思います。ですので、メモ張にプログラムを貼ったら下と似たようなプログラムができ、なおかつこんな長ったらしいプログラムじゃなくても、こうすれば短くできる、などの知恵を持っていらっしゃる方がいらっしゃったら、是非ともご教授願えないでしょうか？。 できればプログラムで回答してもらえるとありがたいです。よろしくお願い致します。 <script language="javaScript"> function overL0(){ document.all("L0").style.backgroundColor="yellow"; document.all("S1").style.visibility="hidden";document.all("si1").style.visibility="hidden";document.all("si2").style.visibility="hidden"; } function offL0(){ document.all("L0").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="hidden";document.all("si1").style.visibility="hidden";document.all("si2").style.visibility="hidden"; } function overL1(){ document.all("L1").style.backgroundColor="yellow"; document.all("S1").style.visibility="visible"; } function offL1(){ document.all("L1").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="visible"; } function overS1(){ document.all("S1").style.backgroundColor="yellow"; document.all("S1").style.visibility="visible";document.all("si1").style.visibility="visible";document.all("si2").style.visibility="visible"; } function offS1(){ document.all("S1").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="visible";document.all("si1").style.visibility="visible";document.all("si2").style.visibility="visible"; } function oversi1(){ document.all("si1").style.backgroundColor="yellow"; document.all("si1").style.visibility="visible"; } function offsi1(){ document.all("S1").style.backgroundColor="#afeeee"; document.all("si1").style.visibility="visible"; } function oversi2(){ document.all("si2").style.backgroundColor="yellow"; document.all("si2").style.visibility="visible"; } function offsi2(){ document.all("si2").style.backgroundColor="#afeeee"; document.all("si2").style.visibility="visible"; } </script> <body> <div id="L0" style="position:relative;background-color:#afeeee; width:1500;height:30" onMouseOver="overL0()" onMouseOut="offL0()"> </div> <div id="L1" style="position:relative;background-color:#afeeee; width:150;height:30" onMouseOver="overL1()" onMouseOut="offL1()"> name1 </div> <div id="S1" style="position:absolute;top:45;left:160;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="overS1()" onMouseOut="offS1()"> name2 </div> <div id="si1" style="position:absolute;top:45;left:310;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="oversi1()" onMouseOut="offsi1()"> <a href="http://www.google.co.jp/" target="blank" target="c">A</a><br> </div> <div id="si2" style="position:absolute;top:75;left:310;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="oversi2()" onMouseOut="offsi2()"> <a href="http://www.google.co.jp/" target="blank" target="c">B</a><br> </div> </body>
- ベストアンサー
- その他(ソフトウェア)
- 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
- 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
- マウスオンで説明文をページの真ん中に表示させたい！
よろしくお願いします。 http://www4.ocn.ne.jp/~tomotan/tagpractice.html （↑）このサイトで <HTML> <HEAD> <SCRIPT><!-- function show(object) { if (document.layers && document.layers[object] != null) document.layers[object].visibility = 'visible'; else if (document.all) document.all[object].style.visibility = 'visible'; } function hide(object) { if (document.layers && document.layers[object] != null) document.layers[object].visibility = 'hidden'; else if (document.all) document.all[object].style.visibility = 'hidden'; } //--></SCRIPT> <STYLE><!-- .myStyle { position: absolute; visibility:hidden; top:150; left:300; } //--></STYLE> </HEAD> <BODY> <A HREF="#" onMouseover="show('myLayer1')" onMouseout="hide('myLayer1')">ここにマウス</A> <DIV ID="myLayer1" CLASS="myStyle"> Hello!! </DIV> </BODY> </HTML> を表示させると、「Hello!」の文字が「テキスト」の右側に表示されます。 そうじゃなくて、「Hello!」の右側にリンクを箇条書きに書き込んでいきたいんです。 で、リンクにマウスを乗せると左側にリンク先の説明が表示される・・・というふうにしたいんです。 お願いしますｍ（＿＿）ｍ
- ベストアンサー
- JavaScript
- ブログでonClickを2つ以上並べると動かない
ブログ上のhtmlタグについて質問です。"onClick"のタグを1つ張ると動くのですが、2つ以上並べると動かなくなります。ブログはseesaaブログを使っています。 ↓動く <span onClick="document.all.item('moji2').style.visibility='visible'" onClick="document.all.item('moji2').style.visibility='hidden'"> クリックする文字 </span> <div ID="moji2" onClick="document.all.item('moji2').style.visibility='hidden'" style="visibility:hidden;"> この文字をクリックすると消えます </div> ↓動かない <span onClick="document.all.item('moji2').style.visibility='visible'" onClick="document.all.item('moji2').style.visibility='hidden'"> クリックする文字 </span> <div ID="moji2" onClick="document.all.item('moji2').style.visibility='hidden'" style="visibility:hidden;"> この文字をクリックすると消えます </div> <span onClick="document.all.item('moji2').style.visibility='visible'" onClick="document.all.item('moji2').style.visibility='hidden'"> クリックする文字 </span> <div ID="moji2" onClick="document.all.item('moji2').style.visibility='hidden'" style="visibility:hidden;"> この文字をクリックすると消えます </div> よろしくお願いします。
- ベストアンサー
- ブログ
- JavaScriptでドロップダウンメニュー
を自力で実装したいのですがうまくいきません。 気になっているのは ddObj.onmouseoverと ddObj.onmouseout の上記２つのイベントハンドラ内の 変数iが親スコープでi==0であるはずなのに イベントハンドラ内だとなぜか i == 1となっているのです。 JavaScriptの練習のために書いています。 Jqueryなどは使いなくないのです。 どなたかJSにお詳しい方ご教授ください。 <title>JavaScript テスト</title> <script type="text/javascript"> <!-- try{ //ファイルがすべて読み込まれたら実行される処理 var onloadMethod = function onloadMethod(){ //初期状態ではドロップダウンメニューは表示されていない。 var defaultMenu = document.getElementsByTagName("dl"); for (var i = 0; i < defaultMenu .length; i++){ defaultMenu[i].style.position ="relative"; } var drop = document.getElementsByTagName("dt"); var ddObj = document.getElementsByTagName("dd"); for( var i = 0; i < drop.length; i++){ alert(i); //まずカテゴリー・メニューの簡易的なデザインを決める。 drop[i].style. width = "200px"; drop[i].style. height = "50px"; drop[i].style.backgroundColor = "#FF99FF"; //次に書くカテゴリー・メニューのマウスオーバーイベントハンドラを指定する。 alert(i); drop[i].onmouseover = function(){ alert(i); //まずはここではメニューリストを表示させるだけの処理を書く //各メニューリストはddタグ要素の中のliタグなのでまずdd要素の表示 ddObj.item(i).style.position = "absolute"; ddObj.item(i).style.top = "50px"; ddObj.item(i).style.visibility = ""; ddObj.item(i).style.backgroundColor="red"; }; drop[i].onmouseout = function(){ //alert(i); //カーソルのマウスオーバーが外れたらddタグ要素を非表示にする。 ddObj.item(i).style.visibility = "hidden"; ddObj.item(i).style.backgroundColor="blue"; //alert("00"); }; alert(i); } /* var list = document.getElementsByTagName("li"); for(var i = 0; i < list.length ; i++){ document.getElementsByTagName("li").item(i).onmouseover = function(){ drop.onmouseover(); }; document.getElementsByTagName("li").item(i).onmouseout = function(){ drop.onmouseout(); }; } */ }; //すべての要素の読み込み完了後の実行 window.addEventListener("load" ,onloadMethod,false); }catch(e){ document.write(e); } --> </script> </head> <body> <p>対象のドロップダウンメニュー(※dl要素が一つのカテゴリー・メニュー)</p> <dl class="dropdown" title="two"> <dt id="ddheader-two">メニューのカテゴリー名</dt> <dd id="ddcontent-two"> <ul> <li style="width:240px;height:30px;background-color:gray;"><a href="http://yahoo.co.jp">カテゴリ内メニュー01</a></li> <li style="width:240px;height:30px;background-color:gray;"><a href="http://yahoo.co.jp">カテゴリ内メニュー02</a></li> <li style="width:240px;height:30px;background-color:gray;"><a href="http://yahoo.co.jp">カテゴリ内メニュー03</a></li> <li style="width:240px;height:30px;background-color:gray;"><a href="http://yahoo.co.jp">カテゴリ内メニュー04</a></li> <li style="width:240px;height:30px;background-color:gray;"><a href="http://yahoo.co.jp">カテゴリ内メニュー05</a></li> </ul> </dd> </dl> <p>文字列</p> </body> </html>
- 締切済み
- JavaScript
- ロールオーバーで画像拡大、z-index
下記の様にjavascriptとcssで、 サムネイル画像をロールオーバーしたら拡大画像が表示されるように設定しました。 しかしz-indexが効かずに拡大画像がほかのサムネイル画像の下に表示されてしまいます。 z-indexの対処方法などいろいろ調べ試してみたのですが、 うまくいきませんでした。 どのようにすればうまく表示できるか教えていただけないでしょうか。 よろしくお願いします。 <html> <head> <title>テスト</title> <script type="text/javascript"> <!-- function setStyle(thum,vType) { document.getElementById(thum).style.visibility = vType; } //--> </script> </head> <body> <p style="margin-top:50px;"> <div style="position:relative; float:left;"> <div id="thum1" onMouseover="setStyle('thum2','visible'),setStyle('thum1','hidden')" onMouseout="setStyle('thum2','hidden'),setStyle('thum1','visible')" style="border:0px; z-index:2;"> <img src="thum1.png" width="100" height="100"> </div> <div id="thum2" style="position:absolute; z-index:10; top:-100px; left:-50px; visibility:hidden;" onMouseover="setStyle('thum2','visible'),setStyle('thum1','hidden')" onMouseout="setStyle('thum2','hidden'),setStyle('thum1','visible')"> <img src="thum2.png"" style="border:1px solid #dedede;" width="200" height="200"> <div style="background-color:#dedede; padding:5px; width:192px; line-height:99%;"> <b><center>テスト1</center></b> </div> </div> </div> <div style="position:relative; float:left;"> <div id="thum3" onMouseover="setStyle('thum4','visible'),setStyle('thum3','hidden')" onMouseout="setStyle('thum4','hidden'),setStyle('thum3','visible')" style="border:0px; z-index:2;"> <img src="thum3.png" width="100" height="100"> </div> <div id="thum4" style="position:absolute; z-index:10; top:-100px; left:-50px; visibility:hidden;" onMouseover="setStyle('thum4','visible'),setStyle('thum3','hidden')" onMouseout="setStyle('thum4','hidden'),setStyle('thum3','visible')"> <img src="thum4.png"" style="border:1px solid #dedede;" width="200" height="200"> <div style="background-color:#dedede; padding:5px; width:192px; line-height:99%;"> <b><center>テスト2</center></b> </div> </div> </div> <div style="position:relative; float:left;"> <div id="thum5" onMouseover="setStyle('thum6','visible'),setStyle('thum5','hidden')" onMouseout="setStyle('thum6','hidden'),setStyle('thum5','visible')" style="border:0px; z-index:6;"> <img src="thum5.png" width="100" height="100"> </div> <div id="thum6" style="position:absolute; z-index:10; top:-100px; left:-50px; visibility:hidden;" onMouseover="setStyle('thum6','visible'),setStyle('thum5','hidden')" onMouseout="setStyle('thum6','hidden'),setStyle('thum5','visible')"> <img src="thum6.png"" style="border:1px solid #dedede;" width="200" height="200"> <div style="background-color:#dedede; padding:5px; width:192px; line-height:99%;"> <b><center>テスト3</center></b> </div> </div> </div> </p> </body> </html>
- ベストアンサー
- HTML
- JavaScripｔについての質問です。
javascript初心者です。方法が分かりませんので、教えていただける方、お願いいたします。ホームページを作っております。とあるページの下の部分をクリックすると、新しいウィンドウが開きます。 <a href="#" onClick="window.open('f/f.html?1','newWin','width=850,height=650')">テキスト</a> 新しいページは次のようになっています。 ↓ここからJavaScript↓ flag = false; function pd1() { if(flag) document.getElementById('ID1').style.visibility = "hidden"; else document.getElementById('ID1').style.visibility = "visible"; flag = !flag; } function fx(){ var num = location.search.substr(1,1); var the_id = "ID" + num.toString(); document.getElementById(the_id).style.visibility = "visible"; } ここからhtml↓ <div id= "w1" onMouseover="document.s1img.src='img/s1rr.gif'" onMouseout="document.s1img.src='img/s1w.gif'"> <a href="javascript:pd1()">テキスト</a></div> <div id="ID1" style="visibility: hidden;" onMouseover="document.s1img.src='img/s1rr.gif'" onMouseout="document.s1img.src='img/s1w.gif'"> <p>テキスト<br /> </div> <div id="s1"><img src="img/s1w.gif" width="29" height="39" name="s1img"/></div> 以上です。上記に関して説明を付け加えますと、新しいウィンドウ（新しいページ）上では、function fx とpd1が作動し、div ID1がプルダウンメニューのように開くようになっています。 それに付け加えたいのですが、冒頭であげた部分をクリックするとID1がプルダウンのように開くだけでなく、div s1の name="s1img"であげた部分を別の画像が表示されるようにするにはどのようなjavascriptを追加すればいいでしょうか？ どなたか教えていただければ有り難いです・・・・・。
- ベストアンサー
- JavaScript
- javascript について追加の質問
質問NO6591909＝3/14 10：59の追加の質問です。 素晴らしい回答で非常に感謝いたしますが、追加でもう一つお願いします。あと一息といったところです。最後の部分なのですが、 function pd1() { if(flag) document.getElementById('ID1').style.visibility = "hidden"; else document.getElementById('ID1').style.visibility = "visible"; var img = document.getElementById('s1').getElementsByTagName("img"); img[0].src = "別の画像のURL" flag = !flag; } function fx(){ var num = location.search.substr(1,1); var the_id = "ID" + num.toString(); var the_id2 = "s" + num.toString(); document.getElementById(the_id).style.visibility = "visible"; var img = document.getElementById(the_id2).getElementsByTagName("img"); img[0].src = "別の画像のURL" } この3行上の"別の画像のURL"とありますが、上記ですと決まった一枚の画像しか表示できないということになりますよね？ IDは9つありまして、9つ別々の画像をそれぞれ選択できるようにしたいのですが、その点を考慮するとどのような文になりますでしょうか？（function fx()を9つ別々に書くんでしょうか？・・・・・・）よろしくお願いいたします。 因みにここからhtml↓（さっきも書きましたが、また書いておきます。） <div id= "w1" onMouseover="document.s1img.src='img/s1rr.gif'" onMouseout="document.s1img.src='img/s1w.gif'"> <a href="javascript:pd1()">テキスト</a></div> <div id="ID1" style="visibility: hidden;" onMouseover="document.s1img.src='img/s1rr.gif'" onMouseout="document.s1img.src='img/s1w.gif'"> <p>テキスト<br /> </div> <div id="s1"><img src="img/s1w.gif" width="29" height="39" name="s1img"/></div>
- ベストアンサー
- JavaScript
- ６/１０にお尋ねしましたマウスを重ねると横に画像がですスクリプトについて再度
わかりやすく教えていただいたのですが、画像のＵＲＬを入力する個所がわからなくなってごちゃごちゃになってしまったのです。もうしわけありません、今一度ＵＲＬをどこに入れたらよいのか教えていただければ幸いです。 お手数おかけいたします。 '********** ココから ********** <script language="javascript"> <!-- function changeVis(obj, visible) { document.all(obj).style.visibility=(visible?"visible":"hidden") } //--> </script> <A HREF="#" onMouseMove="changeVis('image', true)" onMouseOut="changeVis('image', false)">アイコン（hogehoge）</A> <IMG SRC="hogehoge.gif" STYLE='visibility:hidden' id='image'></DIV> '********** ココまで **********
- ベストアンサー
- HTML
