javascriptでポップアップメニューを実装する方法

2023/08/14 16:01

このQ&Aのポイント

画面上のメニュー表示項目にマウスカーソルを合わせると、その位置にサブメニューを表示させたいです。
サブメニューはカーソルが別のメニュー表示項目に移動した場合には、別のメニュー表示項目上でサブメニューを出すようにし、メニュー表示項目以外にカーソルが移動した場合には、メニューを非表示にすることができません。
サブメニューの表示位置はマウスカーソルの位置にすることができません。

ベストアンサー

javascriptでポップアップメニュー

2011/06/26 23:12

はじめまして。題記の件でつまっています。画面上のメニュー表示項目にマウスカーソルを合わせると、その位置にサブメニューを表示させたいです。サブメニュー表示時に実現したいことは以下の3点です。 1.サブメニューのHTMLは画面上に記述しておき、カーソルがメニュー表示項目にある場合のみvisibleにする 2.サブメニューはカーソルが別のメニュー表示項目に移動した場合には、別のメニュー表示項目上でサブメニューを出すようにし、メニュー表示項目以外にカーソルが移動した場合には、メニューを非表示にする 3.サブメニューの表示位置はマウスカーソルの位置にする＜イメージ＞ /* メニュー部分*/ <ul> <li>メニュー表示項目1</li> ※1 <li>メニュー表示項目2</li> … </ul> /*サブメニュー部分*/ <div id="menu" class="hidden"> <div>サブメニュー1</div> <div>サブメニュー2</div> </div> ※1にカーソルをあてると、下のhidden項目をカーソル位置に表示するカーソル移動にあわせてメニューを追従させたり、メニュー領域以外の場合に非表示とすることができません。（つまりほとんどうまくいってないのですが・・・）どうかご教示いただけないでしょうか。よろしくお願いします。ちなみに以下のサイト様を参考にさせていただいてますが、こちらはカーソル位置に表示ではなく固定位置にサブメニュー表示でした。 http://miyakekobo.fc2web.com/temp/total_pd104.html

otoyome
お礼率100% (3/3)

JavaScript
回答数1
ありがとう数2

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

fujillin
ベストアンサー率61% (1594/2576)

2011/06/27 09:44 回答No.1

多段メニューなら先人がいろいろ作成しているので、それを利用するか、参考にすればよいと思います。（↓）ご質問に合致するものだけでなく、いろいろなタイプが紹介されてはいますが… http://phpjavascriptroom.com/?t=ajax&p=jquery_plugin_navigationmenu http://coliss.com/articles/build-websites/operation/javascript/1229.html http://www.1stwebdesigner.com/css/300-jquery-css-mootools-and-js-navigation-menus/ よくわかりませんが、このあたりがイメージに近いのかも http://onehackoranother.com/projects/jquery/droppy/

質問者

お礼 2011/09/28 23:01

お礼が遅くなってしまってすみません…。ご回答ありがとうございました。

関連するQ&A

ポップアップメニューの制御について
こんにちは。現在、ポップアップメニューの制御がうまくいかず困っております。 [やりたいこと] ・リンクの上にマウスを置くとポップアップメニューが開く・ポップアップメニューからマウスが外れるとポップアップメニューを閉じる・対応したいブラウザはIE6,IE7,FireFox2.0 他のサイトを参考にした結果、onmouseoverのイベントでメニュー表示まではできたのですが、メニューからマウスを外した時にメニューを閉じる処理がうまくいっておりません。onmouseoutを使うとできそうなのですが、メニューからではなく、リンクからマウスを外した時にメニューが消えてしまい困っています。解決のヒントになることでも結構ですので、アドバイスを頂けたらと思います。現在はclearTimeSetやclearTimeoutで制御できないかを調べている最中です。よろしくお願いいたします。 [HTMLのソース(一部抜粋)] <div id="testmenu1" style="position: absolute;visibility: hidden;(省略)"> <ul style="(省略)"> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> </ul> </div> <div id="testmenu2" style="position: absolute;visibility: hidden;(省略)"> <ul style="(省略)"> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> </ul> </div> <table> <tr><td> <a href="" onclick="return false;" onmouseover="testShowPopupMenu('testmenu1'); return false;" onmouseout="testHidePopupMenu('testmenu1'); return false;">メニュー1</a> </td></tr> <tr><td> <a href="" onclick="return false;" onmouseover="testShowPopupMenu('testmenu2'); return false;" onmouseout="testHidePopupMenu('testmenu2'); return false;">メニュー2</a> </td></tr> </table> [JavaScriptのソース(一部抜粋)] var mX = 0; var mY = 0; var pX = 5; // マウスから右に5ピクセルずらす var pY = 5; // マウスから下に5ピクセルずらす document.onmousemove = testGetMousePoint; // マウス位置取得 function testGetMousePoint() { 　mX = event.clientX + document.body.scrollLeft; 　mY = event.clientY + document.body.scrollTop; } // ポップアップメニューの表示 function testShowPopupMenu(id) { 　pop = document.getElementById(id).style; 　pop.visibility = "visible"; 　pop.left = mX + pX + "px"; 　pop.top = mY + pY + "px"; } // ポップアップの非表示 function testHidePopupMenu(id) { 　document.getElementById(id).style.visibility = "hidden"; }
- ベストアンサー
- JavaScript
プルダウンのメニュー表示について
JavaScriptでプルダウンメニューを表示する処理を作っているのですが、どうしても求める結果が得られずに困っています。 ○メニュー1 ―――――――――――――――――― ○メニュー2 ―――――――――――――――――― 上記の画面イメージの「メニュー1」をクリックした際に、JavaScriptで下記のようにメニューを表示させたいのです。 ○メニュー1 　●メニュー1-1　　●メニュー1-2 　●メニュー1-3　　●メニュー1-4 ―――――――――――――――――― ○メニュー2 ―――――――――――――――――― ところが、「○メニュー1」のすぐ下にborderが表示されてしまったり、●印のメニューの横幅が正確に伸びません。こういうときはやはり、ulやdlなどを使わないで大人しくtableを使うべきでしょうか？何か良い方法がありましたら、ぜひともアドバイスを頂けないでしょうか？以下がコードの一部です。 [html] <div class="tree"> 　　<a href="javascript:" id="test_01" onclick="getID(this);">○メニュー1</a> 　　<div class="tree_sub"> 　　　　<ul> 　　　　　　<li class="left">●メニュー1-1</li> 　　　　　　<li>●メニュー1-2</li> 　　　　</ul> 　　　　<ul> 　　　　　　<li class="left">●メニュー1-3</li> 　　　　　　<li>●メニュー1-4</li> 　　　　</ul> 　　</div> </div> <div class="tree"> 　　<a href="#">○メニュー2</a> </div> [css] div.tree { 　　border-bottom:1px solid #000000; 　　width:365px; } div.tree_sub ul li { 　　float:left; } div.tree_sub ul li.left { 　　width:50%; }
- ベストアンサー
- その他（プログラミング・開発）
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
JavaScriptで折りたたみメニュー
現在、JavaScriptを利用して折りたたみメニューを作成しました。 2つの項目の下にそれぞれ下層メニューがあり、各項目をクリックするごとに下層メニューが開いたり閉じたりできる状態なのですが、このどちらかの項目をクリックしたとき、その項目の下層メニューは表示されるが、もう一方の項目の下層メニューは閉じる。というようにするにはどうすればよいでしょうか？（両方の下層メニューが同時に開いている状態が無いように。）よろしくお願いいたします。【XHTML】 <ul> <li><a href="javascript:exMenu('treeMenu1')">項目1</a> <ul id="treeMenu1" style="display:none"> <li><a href="#">項目1-1</a></li> <li><a href="#">項目1-2</a></li> <li><a href="#">項目1-3</a></li> </ul> </li> <li><a href="javascript:exMenu('treeMenu2')">項目2</a> <ul id="treeMenu2" style="display:none"> <li><a href="#">項目2-1</a></li> <li><a href="#">項目2-2</a></li> <li><a href="#">項目2-3</a></li> </ul> </li> </ul> 【JavaScript】 function exMenu(tName) { tMenu = document.getElementById(tName).style; if (tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; }
- ベストアンサー
- JavaScript
menuのHTMLタグとCSSが上手くいかない
画像(1)が現状です。イメージは(2)です。何故HTMLタグを別々にするかというとスマホにしたらsubメニューをボトムに配置したいのです。メニューとsubメニューの背景がくっつかないのです。 (1)を(2)にするにはどうすれば良いでしょうか？以下がHTMLタグとCSSになります。アドバイスをお願いします。 HTMLタグ <div class="div1"><ul><li>メニュー1</li><li>メニュー2</li><li>メニュー3</li><li>メニュー4</li></ul></div> <div class="div2"><ul><li>sab1</li><li>sub2</li></ul></div> CSSスタイル ul li { list-style: none; } .div1 { background: #ccc; float: left; } .div2 { width: 240px; background: #999; float: right; } li { float: left; padding: 5px 15px; }
- 締切済み
- HTML
ポップアップメニュー
<div id="body"> <div id="navi"></div> </div> の状態で、<div id="navi"></div> にFireworksで作成したポップアップメニュー(Fireworks html)を配置すると、サブメニューが変な位置に表示されます。通常の<body></body>内であれば問題なく表示されるのですが、<div>内では正しく表示されないものなのでしょうか？どなたかご教授ねがいます。
- 締切済み
- HTML
CSSとJavaScriptを使ってドロップダウンメニュー
こんにちわ。ＩＥ６、ＩＥ７上で動くＨＴＭＬを作成しています。スタイルシートとJavaScriptを使ってドロップダウンメニューを実現しようと思ってます。ＩＥ６では問題ありませんがＩＥ７で次の現象がッ発生します。ブラウザ内で表示されている文字を反転させて、親メニュー上をマウスオーバーしていくと、マウスがメニューから離れたあとも、サブメニューの残像が残ります。以下にサンプルソースを記載いたします。親メニューはてすと、てすと2。 ”てすと”メニューには、サブ１、サブ２、 ”てすと2”メニューには、サブ３、サブ４のサブメニューを構成させています。ＩＥ７でもマウスアウトさせた際、サブメニューの残像が残らないようにするには、どのような修正を加えるべきでしょうか？原因と対策方法、ご教授ください。 test.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"> <head> <link rel=stylesheet type=text/css href=default.css> <title>TEST Homepage</title> </head> <body> <div id='menu'> <ul> <li><a target='_top' href='a.html'>てすと</a> <ul><li><a target='_top' href='b.html'>サブ１</a> <li><a target='_top' href='c.html'>サブ２</a></li> </li> </ul> </li> <li><a target='_top' href='a.html'>てすと2</a> <ul><li><a target='_top' href='b.html'>サブ３</a> <li><a target='_top' href='c.html'>サブ４</a></li> </li> </ul> </li> </ul> </div> <script type='text/javascript'> sfHover = function() { var sfEls = document.getElementById("menu").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); </script> <br> <br> <br> <hr> ＩＥ７の場合、ここをマウスカーソル反転させててすと１→てすと２メニューをhoverさせると！てすと１のサブメニューの残像が残る。ＩＥ６は問題なし。 ------------------------------------------ CSSスタイルシート ------------------------------------------ #menu { width: 750px; margin: 0 auto; padding-top: 11px; white-space: nowrap; } #menu ul { padding: 0; margin: 0; margin-left:auto; margin-right:auto; list-style: none; } #menu li { float: left; background: #87CEFA; margin-right: 3px; border-top: 4px solid #00aaaa; } #menu li:hover, #menu li.sfhover { background: #BFFF00; } #menu li ul { position: absolute; width: auto; left: -999em; border:2px solid white; border-top:none; } #menu li:hover ul, #menu li.sfhover ul { left: auto; } #menu li ul li { float: none; margin-right: 0px; border-top:2px solid white;; text-align:left; } #menu a { display: block; width: auto; padding: 20px 5px 5px 5px; color: #000000; } #menu a:hover { color: #000000; } #menu li ul li a { padding: 5px 5px 5px 5px; } ------------------------------------------ 以上、宜しくお願いいたします。
- 締切済み
- JavaScript
複数トリガーで動作するアコーディオンメニュー
お世話になります。シングルページでページ内リンクでコンテンツ移動するタイプのページ作成を現在やっているのですが、急に標題の内容の要望が急ぎ対応として来まして、困っております。具体的に言うと、通常アコーディオンメニューは、隠してある部分の見出しなんかをトリガーにして、開閉して内容を表示・非表示させると思いますが、今回要望としてあるのは、グローバルナビもそのトリガーにしたいということです。グローバルナビをクリックすると、該当箇所に移動しつつ、普段見出しだけで内容が隠してあるものも展開されるということができればと思っております。参考までにコードを記載しておきます。 js部分 //accordion $('#sub01 h4').click(function() { $(this).toggleClass("open").next("div").slideToggle(); }).next().hide(); // drop down $("#nav li.drop").hover(function() { $(this).children('ul').show(); }, function() { $(this).children('ul').hide(); }); }); <div id="nav"> <ul class="clear"> <li><a href="#menu1">メニュー１</a></li> <li class="drop"><a href="#menu2">メニュー２<span>▼</span></a>  <ul> <li><a href="#sub01">サブ1</a></li> <li><a href="#sub02">サブ2</a></li> </ul>  </li> <li><a href="#menu3">メニュー3</a></li> <li><a href="#menu4">メニュー4</a></li> </ul> </div> ------省略-------------- <div id="sub01" class="subcontent"> <h4><span>項目名</small></span></h4> <div class="sub01Inner clear"> 内容内容内容</div> </div>
- 締切済み
- JavaScript
CSSでポップアップメニューを作成したがIEだけメニューが表示されません。
下記のようなCSSでポップアップメニューを作成したのですが IEだけポップアップメニューが表示されませんでした。 IEでもポップアップメニューが表示されるようにするにはどのようにすればよいのでしょうか？（JavaScriptは未使用で作成） <html> <head> <style type="text/css"> #menu { position: relative; width: 102px; height: 22px; } #menu li { list-style-type: none; float: left; } #menu li a { color: gray; width: 100px; height:20px; text-decoration: none; text-align: center; border: 1px solid gray; display: block; } #menu li a:hover { background-color:#FFFFCC; } #menu ul li ul { display: none; } #menu ul li:hover ul { display:block; position:absolute; top: 22px; left: 0; } </style> </head> <body> <div id="menu"> <ul> <li> <a href="#">home</a> <ul> <li><a href="#">first</a></li> <li><a href="#">second</a></li> <li><a href="#">third</a></li> </ul> </li> </ul> </div> </body> </html>
- ベストアンサー
- HTML
jqueryを使ってポップアップを作ろうとしています。
jqueryを使ってポップアップを作ろうとしています。アイコンにマウスオーバーでポップアップ表示、ポップアップの×をクリックしてポップアップ削除という動きまではできています。しかしマウスオーバーのアイコンはul　liの中にあるのに、ポップアップはulの外に置かれているため、thisが使えず、アイコンにマウスオーバーすると全てのポップアップが表示されてしまいます。これをマスウオーバーしたアイコンのポップアップのみ表示できるようにしたいです。下記にソースになります。表示させたいのはアイコン02にカーソルを合わせた場合のみになります。よろしくお願いいたします。 JS ---------------------------------------------------------------- $(function(){ $(".popup").hide(); $(".box ul li.icon02").mouseover(function(){ $(".popup").fadeIn("fast").css({ top:10+"px", left:-95+"px"}); }); $(".popup img.closed").click(function(){ $(".popup").fadeOut("fast"); }); }); html ---------------------------------------------------------------- <div class="box"> <div class="boxIn"> <ul> <li class="ico01"><a href="#"><img src="アイコン１url" /></a></li> <li class="ico02"><a href="#"><img src="アイコン２url" /></a></li> <li class="ico03"><a href="#"><img src="アイコン３url" /></a></li> </ul>  <div class="popup"> <p>●●<img src="クローズボタンurl" alt="close" width="12" height="12" class="closed" /> </p> <div class="popInner"> <p>ポップアップの中身</p>  </div>  </div>   </div>  </div> 以下 <div class="box"> ～～同じ構成要素の繰り返し。
- ベストアンサー
- JavaScript