- ベストアンサー
ＨＴＭＬについて
ＨＴＭＬについてですが、メニューを押したらその下（か横）に詳細メニューが出てくるサイトがあるのですが・・例：「ウィンドウズアップデート」の上のほうの黒いメニュー どうやったらあのようにできるのですか？ソースを教えていただけませんか？ よろしくお願いします。
- good365
- お礼率67% (60/89)
- レンタルサーバ・ASP
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
このようなメニューはドリームウィーバーとかGoLiveとかいったHTML作成ソフトで作れば簡単にできるそうで、実際にweb上に存在するものの多くがこれらのソフトで作られています。ただこれらのソフトを使っていない人（自分も）にとっては自分で作らなければならないのですが、結構大変です。簡単なサンプルを作りましたので参考にして下さい。 以下の<HTML>以下のソースをコピーしてメモ帳などのエディタに貼り付けて、sample.htmlなどの名前をつけて保存して下さい。メモ帳で保存するときは、テキストファイルで保存しないように注意して下さい。 <HTML> <HEAD><TITLE>メニューサンプル</TITLE> <SCRIPT type="text/javascript"> <!-- function showMenu1(menu1,menu2){ document.getElementById(menu1).style.display = 'none'; document.getElementById(menu2).style.display = 'block'; } function showMenu2(menu){ document.getElementById(menu).style.visibility = 'visible'; } function hideMenu2(menu){ document.getElementById(menu).style.visibility = 'hidden'; } //--> </SCRIPT> <STYLE type="text/css"> <!-- #M1A { display: block;} #M1B { display: none;} #M2A { display: block;} #M2B { display: none;} #M3A { visibility: visible;} #M3B { visibility: hidden;} #M4A { visibility: visible;} #M4B { visibility: hidden;} #M5A { display: block;} #M5B { display: none;} #M6A { display: block;} #M6B { display: none;} #M7A { visibility: visible; float: left;} #M7B { visibility: hidden; float: right;} #M8A { visibility: visible; float: left;} #M8B { visibility: hidden; float: right;} */--> </STYLE> </HEAD> <BODY> <DIV id="top"> <TABLE border="0"> <TR valign="top"> <TD> <DIV id="M1A" onMouseOver="showMenu1('M1A','M1B')"> 検索1 </DIV> <DIV id="M1B" onMouseOver="showMenu1('M1A','M1B')" onMouseOut="showMenu1('M1B','M1A')"> 検索1 <DIV class="submenu"> <A href="http://www.goo.ne.jp/">Goo</A><BR> <A href="http://www.google.co.jp/">Google</A> </DIV> </DIV> サンプル </TD> <TD> <DIV id="M2A" onMouseOver="showMenu1('M2A','M2B')"> 検索2 </DIV> <DIV id="M2B" onMouseOver="showMenu1('M2A','M2B')" onMouseOut="showMenu1('M2B','M2A')"> 検索2 <DIV class="submenu"> <A href="http://www.yahoo.co.jp/">Yahoo</A><BR> <A href="http://www.exite.co.jp/">Excite</A> </DIV> </DIV> サンプル </TD> <TD> <DIV id="M3A" onMouseOver="showMenu2('M3B')" onMouseOut="hideMenu2('M3B')"> 検索1 </DIV> <DIV id="M3B" onMouseOver="showMenu2('M3B')" onMouseOut="hideMenu2('M3B')"> <DIV class="submenu"> <A href="http://www.goo.ne.jp/">Goo</A><BR> <A href="http://www.google.co.jp/">Google</A> </DIV> </DIV> サンプル </TD> <TD> <DIV id="M4A" onMouseOver="showMenu2('M4B')" onMouseOut="hideMenu2('M4B')"> 検索2 </DIV> <DIV id="M4B" onMouseOver="showMenu2('M4B')" onMouseOut="hideMenu2('M4B')"> <DIV class="submenu"> <A href="http://www.yahoo.co.jp/">Yahoo</A><BR> <A href="http://www.exite.co.jp/">Excite</A> </DIV> </DIV> サンプル </TD> </TR> </TABLE> </DIV> <DIV id="left"> <TABLE> <TR> <TD> <DIV id="M5A" onMouseOver="showMenu1('M5A','M5B')"> 検索1 </DIV> <DIV id="M5B" onMouseOver="showMenu1('M5A','M5B')" onMouseOut="showMenu1('M5B','M5A')"> 検索1 <DIV class="submenu"> <A href="http://www.goo.ne.jp/">Goo</A><BR> <A href="http://www.google.co.jp/">Google</A> </DIV> </DIV> </TD> </TR> <TR> <TD> <DIV id="M6A" onMouseOver="showMenu1('M6A','M6B')"> 検索2 </DIV> <DIV id="M6B" onMouseOver="showMenu1('M6A','M6B')" onMouseOut="showMenu1('M6B','M6A')"> 検索2 <DIV class="submenu"> <A href="http://www.yahoo.co.jp/">Yahoo</A><BR> <A href="http://www.exite.co.jp/">Excite</A> </DIV> </DIV> </TD> </TR> <TR> <TD> <DIV id="M7A" onMouseOver="showMenu2('M7B')" onMouseOut="hideMenu2('M7B')"> 検索1 </DIV> <DIV id="M7B" onMouseOver="showMenu2('M7B')" onMouseOut="hideMenu2('M7B')"> <DIV class="submenu"> <A href="http://www.goo.ne.jp/">Goo</A><BR> <A href="http://www.google.co.jp/">Google</A> </DIV> </DIV> </TD> </TR> </TR> <TR> <TD> <DIV id="M8A" onMouseOver="showMenu2('M8B')" onMouseOut="hideMenu2('M8B')"> 検索2 </DIV> <DIV id="M8B" onMouseOver="showMenu2('M8B')" onMouseOut="hideMenu2('M8B')"> <DIV class="submenu"> <A href="http://www.yahoo.co.jp/">Yahoo</A><BR> <A href="http://www.exite.co.jp/">Excite</A> </DIV> </DIV> </TD> </TR> </TR> <TR> <TD> </TD> </TR> </TR> <TR> <TD> </TD> </TR> </TABLE> </DIV> </BODY> </HTML>
その他の回答 (2)
- s071455（@nijineko）
- ベストアンサー率57% (8/14)
あー、それなら・・・「メニュー ポイント 表示」で検索すると http://www.west-mira.jp/javascript/etc/PointMenu.html が出てきました。ソースと説明が載っています。 ちょっと長いですが、解説があるので挑戦してみてください。
お礼
ありがとうございます。参考にしてがんばります！
- s071455（@nijineko）
- ベストアンサー率57% (8/14)
なんとなく思い当たる事があるのですが、例がよくわかりません…。 「ウィンドウズアップデート」・・・？ もしかしてJAVAスクリプトのツリーメニューのことでしょうか？ それだったら http://technique.eweb-design.com/0903_tm.html にソースと説明が載っています。ちょっと見てみて下さい。
補足
早速回答ありがとうございました。 クリックしなくてもマウス（矢印）を上にもっていくだけでメニューが横もしくは下に出てくるというやつなのですが・・わかりにくい説明で申し訳ありません。
お礼
わざわざ作ってくださり、ありがとうございます！ 参考になりました。