- ベストアンサー
jacascriptで作ったドロップダウンメニューが下の画像に隠れる
- ドロップダウンメニューがIE6だと下の画像の下に隠れてしまいます。回避方法はありますでしょうか？
- JavaScriptで作成したドロップダウンメニューが、IE6では画像の下に隠れてしまう問題が発生しています。解決策はありますか？
- ドロップダウンメニューがIE6では画像の下に隠れてしまう現象が起きています。どうすれば解決できますか？
- testid
- お礼率77% (41/53)
- JavaScript
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 No2です。 少し時間があったので、実験してみました。 どうやら、メインのimgからmouseoutした時点で、イベントが発生してしまうみたいですね。 さらには<a>タグ（メニュー1の表示）から移動する度にもイベントが発生して非表示にしているみたいです。（実際は↑どれかひとつで非表示になるのですが…） …で、一応、似たものを書き直して見ましたのでご参考までに。 （IE6で検証。他のブラウザはきちんと確認してはいません。） メニューの構成をクラス名で分けるようにして、「menu」で1つのセットで、「main」が常に表示する部分、「submenu」が表示が切り替わる部分です。 「menu」と「main」、「submenu」は親子になるようにしてください。（孫は不可） 方法としては、非表示にするのにタイムラグを設けて、その間に次の（表示）イベントが発生したら、非表示にするのを取りやめるという考え方です。 また、HTMLの構成を見やすくするためにイベントの設定もスクリプト側で行うようにしていますので、スクリプトが少々長くなっています。 ついでにtableも必ずしも必要なさそうなので、外しています。 <html> <head> <style type="text/css"> .menu { margin: 0; padding: 0; float: left; } .menu img { display: block; height: 42px; border: 0; } .submenu { visibility: hidden; position: absolute; z-index: 3; } .submenu a { display: block; width: 180px; padding: 5px; text-decoration: none; border: 1px solid #ece9d8; background: #b4c1cf; color: #fff; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; text-align: left; } .submenu a:hover { background: #ccc; color: #333; } </style> <script type="text/javascript"> <!-- var menuE = [], currentE = null, timer = null; window.onload = function(){ var e=document.getElementById('jumpmenu').getElementsByTagName('DIV'); for (var i=0,j=0; i<e.length; i++){ if (e[i].className=='menu') { var mainE=getChild(e[i],'main'); var subE=getChild(e[i],'submenu'); if (mainE && subE){ menuE[j++]=e[i]; mainE.onmouseover = function(){ show(this);} mainE.onmouseout = function(){ hide(this);} subE.onmouseover = function(){ cancel();} subE.onmouseout = function(){ hide(this);} };};} } function show(e) { cancel(); var subE = getChild(e.parentNode, 'submenu'); if (currentE && currentE != subE) currentE.style.visibility = 'hidden'; subE.style.visibility = 'visible'; currentE = subE; } function hide(e) { var subE=getChild(e.parentNode,'submenu'); if (currentE == subE) timer = window.setTimeout(hidden,100); } function cancel() { if (timer) {window.clearTimeout(timer); timer=null;} } function hidden(){ if (currentE) { currentE.style.visibility = 'hidden'; currentE = null;} } function getChild(elm, cnam){ var el = elm.firstChild; var elm_c = null; while (el){ if (el.className==cnam) { elm_c=el; break;} el=el.nextSibling; } return elm_c; } // --> </script> </head> <body> <div id="jumpmenu"> <div class="menu"><img src="./A.jpg" width="80"></div> <div class="menu"> <a href="#" class="main"><img src="./B.jpg" width="117"></a> <div class="submenu"> <a href="#">メニュー１</a> <a href="#">メニュー２</a> <a href="#">メニュー３</a> </div></div> <div class="menu"><img src="./C.jpg" width="23"></div> <div class="menu"> <a href="#" class="main"><img src="./D.jpg" width="117"></a> <div class="submenu"> <a href="#">メニュー４</a> <a href="#">メニュー５</a> </div></div> <br style="clear:left;"> </body> </html>
その他の回答 (4)
- fujillin
- ベストアンサー率61% (1594/2576)
No4です No4の回答ははじめの<div id="jumpmenu">タグを閉じ忘れてます。^^;ゞ すみませ～ん。 念のため…
- fujillin
- ベストアンサー率61% (1594/2576)
ＩＥ6.0.28で実験しましたが、再現しません。 『下の画像』がないので、HTMLに以下を付け加えています。 </td></tr></table> <img src="a.jpg" width="800" /> </div> DOCTYPE宣言なし、HTML 4.01 Strict、etc、XHTML 1.0などで実行しても全て下のa.jpgの上に表示されます。 ご質問文にはないCSSが関係していることはありませんか？
お礼
確かに、表示はされるんです。 言い方が悪かったかもしれません。すいません。 ただ、クリックできないんです。 クリックしようとしてドロップダウンメニューにマウスを持っていくと メニューが消えてしまうんです。 IE6だけ・・・。 半ば諦めかけてます・・・。
- sample_
- ベストアンサー率76% (20/26)
cssにz-indexというプロパティがあって、表示が重なった場合にどの順に表示するかという奥行きを設定することができるので、プルダウンメニューを表示しているCSSにz-indexを設定して下の画像より前にくるようにすればよいと思いますよ。
お礼
z-indexプロパティは試しましたが z-indexプロパティで指定しても、firefox、IE7は正常に動作しますが IE6だとやはりダウンメニューが下の画像に隠れてしまいます。
お礼
大変ありがとうございました。 思ったとおりに実装できましたので ご報告いたします。 長い間、間隔があいてしまったことを お詫び申し上げます。