ドロップダウンメニューのプログラムを教えて・・・
- プログラムの本やインターネットで検索しても動作するドロップダウンメニューのプログラムが見つからない。
- JavaScriptを使用して自分用のHPにドロップダウンメニューを追加したい。
- イメージ通りに縦と横にメニューが表示されるドロップダウンメニューのプログラムを教えてほしい。
- ベストアンサー
ドロップダウンメニューのプログラムを教えて・・・
今非常に困っています・・・。 プログラムのどの本を見てもドロップダウンメニューのプログラムが無いし、インターネットで検索してソースコードを貼ってみても、全然動きのあるドロップダウンメニューにならずに、単なる縦列横列のリンクになってしまい、ドロップダウンメニューを作れません。 今現在JavaScriptでドロップダウンメニューの着いた自分用のＨＰを作りたいと強く思っているのですが、下のようなプログラムの中にドロップダウンメニューを入れるためには、どのように入力したら良いのかご教授願えないでしょうか？。 非常に身勝手な質問とは承知しているのですが、画像のイメージは添付ファイルの通りで、縦と横にそれぞれメニューが出てくるようにしたいです・・・。 ご回答をお待ちしております。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <title></title> <script language="JavaScript"> </script> <body> <form name=""> </form> </body>
- dwuoa
- お礼率42% (21/49)
- その他(ソフトウェア)
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
とりあえず、下記みたいなのでしょうかね。参考にどうぞ。 これだとメニューの数だけfunctionが必要で、スマートなscriptではありません。もう少し頭のいい方ならもっとすっきり書けるはずですね。 <script language="javascript"> function over1(){ document.all('L1').style.backgroundColor="yellow"; document.all('L4').style.visibility="visible"; } function off1(){ document.all('L1').style.backgroundColor="#a0a000"; document.all('L4').style.visibility="hidden"; } function over2(){ document.all('L2').style.backgroundColor="yellow"; document.all('L5').style.visibility="visible"; } function off2(){ document.all('L2').style.backgroundColor="#a0a000"; document.all('L5').style.visibility="hidden"; } function over3(){ document.all('L3').style.backgroundColor="yellow"; document.all('L6').style.visibility="visible"; } function off3(){ document.all('L3').style.backgroundColor="#a0a000"; document.all('L6').style.visibility="hidden"; } function over4(){ document.all('L4').style.backgroundColor="yellow"; document.all('L4').style.visibility="visible"; } function off4(){ document.all('L4').style.backgroundColor="#a0a000"; document.all('L4').style.visibility="hidden"; } </script> <body> <div id="L1" style="position:relative;background-color:#a0a000; width:150;height:30" onMouseOver="over1()" onMouseOut="off1()"> MENU-1 </div> <div id="L2" style="position:relative;background-color:#a0a000; width:150;height:30" onMouseOver="over2()" onMouseOut="off2()"> MENU-2 </div> <div id="L3" style="position:relative;background-color:#a0a000; width:150;height:30" onMouseOver="over3()" onMouseOut="off3()"> MENU-3 </div> <!--以下はサブメニュー--> <div id="L4" style="position:absolute;top:15;left:160;background-color:#a0a000; width:150;height:30;visibility:hidden;" onMouseOver="over4()" onMouseOut="off4()"> subMENU-1 </div>
関連するQ&A
- ドロップダウンメニューの制作で
こんにちわ。 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>
- ベストアンサー
- JavaScript
- JavaScriptでプルダウン(ドロップダウン)メニューを作りたい！
JavaScriptでプルダウン(ドロップダウン)メニューを作りたいのですが、 http://www.openspc2.org/reibun/JS_TipsAndTricks/menu/002/index.html このサイトを参考に作ってみたのですが、 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> これを頭に入れるとうまく行きません。 これはどうしても必要なので、どうにかこれ入りで作りたいです。 どうしたら良いでしょうか？ 理想はこんな感じです http://jsajax.com/DropDownMenuArticle286.aspx あと、JavaScriptは外部ファイルで作りたいです。 上記のサイト以外に参考サイトなどありましたら、とてもありがたいです! よろしくお願いいたします!!
- ベストアンサー
- その他([技術者向] コンピューター)
- ドロップダウンメニューによるアイフレームへのリンク
現在Webサイトを作っています。 ですがドロップダウンメニューからリンクをし、リンク先をアイフレームにするのがうまくいきません。 問題のページのHTML、及びJavaScriptは以下の通りです。 <html> <head> <script type="text/javascript"> <!-- function Mylink(form,sel){ mlink=sel.options[sel.selectedIndex].value; if(mlink!="-"){parent.albumf.location.href=mlink;} } //--> </script> </head> <body> <center> <IFRAME name="albumf" frameborder=0 src="●●.html" scrolling=no allowtransparency=true></IFRAME> <BR> <BR> <FORM method="post"> <select onChange="Mylink(this.form,this)"> <OPTION selected value="-"> ＊ メニュー ＊</OPTION> <OPTION value="-">------------------------</OPTION> <OPTION value="●●.html">項目１</OPTION> <OPTION value="▲▲.html">項目２</OPTION> <OPTION value="-">------------------------</OPTION> </select> </FORM> </center> </body> </html> JavaScriptに関する様々なページを調べましたが、どうしても自力で解決できませんでした。 どなたか改善方法を教えて下さい。 よろしくお願いします。
- ベストアンサー
- JavaScript
- ドロップダウンメニューとsubmitボタンを無効化したい
http://www3.ocn.ne.jp/~kmitoh/dougu/kanzan/kanzan.html 例えば、この換算プログラムはラジオボタンで何もcheckedになってませんよね。 最初にラジオボタンでなく、ドロップダウンメニューから何か選択すると IEがスクリプトエラーとなってしまいます。 このデバックに挑戦中です。 まず、これら２つのテキストボックスと２つのドロップダウンメニューを 使えないように（disabledに）する関数を設け、HTML側を <body onload="function()">として呼びだしてみたのですが、 他のラジオボタンを押したとき、disabledが解除されなくなってしまいます。 また、何もラジオボタンが選択されていない状態で「計算」を押下しても エラーになることにも気づきました。 「計算」ボタンもdisabledにしたいのですがその方法がわからず （submitボタンにidを振るとサポート外だとエラーになってしまう）、 ドロップダウンメニューだけを殺せても意味がないことに気づきました。 ならばと、 ページを呼び出した時、デフォルトで「長さ」にチェックを入れ、 最初から長さに対応したドロップダウンメニューをセットさせればよいかと、 HTML側を <INPUT TYPE="radio" NAME="rgroup" onClick="nagasa(this.form)" checked> とし、最初に <body onload="nagasa()">や <body onload="nagasa(ts)">など試してみたのですが、 前者は、bbがnullまたはオブジェクトでない と、 後者は、tsは宣言されていない などとなります。 最もスマートな解決方法を目指したいのですが、どうしたらよいでしょうか。 他にもっといい考え方/技術はきっとあると思いますが。。。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- タブレットのドロップダウンメニューについて
会社のWebの管理をしていますが、５年前に作ったサイトはJavaScriptを使ってドロップダウンにしました。 しかしタブレットではドロップダウンメニューが開かずページの遷移ができません。 メニューを修正してタブレットやスマホでもリンク先のページに遷移させるのにはどうしたら良いか教えて下さい。 商品のところはドロップダウンで20個程表示されます。 Webについてはほぼ素人でHTMLとCSSは独学で勉強し、JavaScriptは本やサイトのサンプルデータを使わせていただいていて、内容についてはあまり理解していません。 タブレットやスマホではそもそもドロップダウンメニューが使えないようなのですが。 サイトで検索しましたが、今一参考にできそうなサイトにたどりつけませんでした。 アドバイスよろしくお願いします。
- 締切済み
- JavaScript
- ドロップダウンメニューについて
javascriptのドロップダウンメニューの作成について質問させてください。 現在、あるサイトでグローバルナビゲーションにドロップダウンメニューを実装しようとしているのですが、壁にあたってしまいました。 ↓参考サイト http://jsajax.com/EditRunDemo.aspx こういったドロップダウンメニューなのですが、これを例にあげさせてもらうと、例えばこのメニューのDownloadというページをクリックしてDownloadページに自分がいる時はDownloadのドロップダウンメニューを"出さない"ということがやりたいのです。 自分なりに色々とやってはみたものの、javascriptの経験が浅いので正直なところよくわからないのが現状です。 どなたかこのような事例のサンプルを紹介しているサイトをお知りの方、もしくは解決法をご教授いただければ幸いです。 そこまで至らなくてもどのような手法を取ればできそうかということだけでも良いのでご意見をください。 よろしくお願いします。
- ベストアンサー
- JavaScript
- ドロップダウンメニューについて
JavascriptやJquoryを使わずにcssのみで、動きのあるドロップダウンメニューを作ることができました。 しかし、スマートフォンなどのタッチデバイスで動作確認をすると、メニューからサイドメニューが出っぱなしの状態になってしまい、引っ込んでくれません。 メニューの部分をクリックして開閉できるようにすればいいのでしょうか。やり方を教えて下さい。また、Javascriptを無効にしてる方でも問題なく使えるようにしたいです。
- 締切済み
- CSS
- script language？ type？
javascript の知識が無いのですが、 ------------------------------------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja-JP"> <head> ～～～ <meta http-equiv="content-script-type" content="text/javascript"> </head> <body> <script language="JavaScript"> ～～～ </script> </body> ------------------------------------------ あるプログラムで、 language="JavaScript" のスクリプト言語を <script type="text/JavaScript"> と属性を書き換えても問題ないようですが、 各ブラウザ的に問題ないでしょうか？ また、SSL使用下で同scriptを利用する場合、 SSLの表示が中途半端になるようのですが、 相互関係のヒントか対処法を教えて下さい。
- ベストアンサー
- JavaScript
- HTML ドロップダウンメニュー 教えてください！
ナビゲーションのドロップダウンメニューを作りたく、 ↓↓このサイトを流用し、こんな感じで、↓↓ http://ezorisu-web.com/web-design/archives/356 試行錯誤しています。 現在作っているサイトが、flashに重なって半透明の透過PNGのナビゲーションがあり、IE6でも半透明に見えるよう、ジャバスクリプトを使用しています。 ここで、ジャバスクリプトを使用しているのが原因かわかりませんが、ジャバスクリプトを使用したドロップダウンメニューをつくろうとするとPNGが半透明じゃなくなってしまいます。 そのため、現在、上のサイトを参考にCSSだけでのドロップダウンメニューを作っているのですが、上のサイトどおり作ると、IE6が、ドロップだうんしません。 何かいい方法はないでしょうか？？ ※↓ジャバスクリプトは↓ここからダウンロードしました。 http://monodez.com/create/pngfix.html
- ベストアンサー
- インターネットビジネス
- ドロップダウンメニュー
http://www.microsoft.com/japan/ ↑のページの右上の方にある、マウスカーソルを持っていくとドロップダウンメニューが表示される方法を知りたいのですが、どなたか教えてもらえませんか？ JavaScriptで実現できるのかどうかも分かっていないので、もしかするとこのカテゴリへの投稿も間違っているかもしれませんが・・・。 宜しくお願いします。
- ベストアンサー
- JavaScript
お礼
回答ありがとうございました。 参考になったのですが、最後のサブメニューの箇所しかドロップダウンメニューが動作しなかったようなので、自分で頭を抱えて改良していました。 ある程度全体に動作するようになってきたので、どうにか頑張ってみます！。 プログラムで回答して下さりすごく有難く思っています！。ありがとうございました！。