こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

jacascriptで作ったドロップダウンメニューが下の画像に隠れる

ドロップダウンメニューがIE6だと
ドロップしたメニューが下の画像の下に隠れてしまいます。
回避方法はありますでしょうか?
ソースは
☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
<script type="text/javascript"><!--
function visiblemenu(to) {
document.getElementById(to).style.display = "block";
}
function hiddenmenu(to) {
document.getElementById(to).style.display = "none";
}
// --></script>
☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
<div id="jumpmenu">
<table>
<tr>
<td><img src="image/11_b_e03_r1_c1.jpg" width="80" height="42"></td>
<td>
<div onMouseover="visiblemenu('menu01')" onMouseout="hiddenmenu('menu01')">
<a href="#"><img src="image/11_b_e03_r1_c2.jpg" width="117" height="42" id="n11_b_e03_r1_c2"></a><br>
<div id="menu01" class="menubox">
<a href="#" class="link"><p class="menu">メニュー1</p></a>
<a href="#" class="link"><p class="menu">メニュー1</p></a> </div>
</div>
</td>
<td><img src="image/11_b_e03_r1_c3.jpg" width="23" height="42"></td>
<td>
<div onMouseover="visiblemenu('menu02')" onMouseout="hiddenmenu('menu02')">
<a href="#"><img src="image/11_b_e03_r1_c4.jpg" width="117" height="42" id="n11_b_e03_r1_c4"></a><br>
<div id="menu02" class="menubox">
<a href="#" class="link"><p class="menu">メニュー1</p></a>
<a href="#" class="link"><p class="menu">メニュー1</p></a> </div>



☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
CSSは
☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
img {border:0; vartical-align:top;}

#jumpmenu {width:1000;}
#jumpmenu table {width:1000; border-collapse:collapse;}
#jumpmenu table td {padding:0;}

#jumpmenu table td p.menu {
text-decoration :none;
border :1px solid #ece9d8;
padding :5px;
margin :0;
display :block;
font-family :Verdana, Arial, Helvetica, sans-serif;
font-size :14px;
text-align :left;
}

#jumpmenu table td a:link p.menu {color:#fff; background:#b4c1cf;}
#jumpmenu table td a:visited p.menu {color:#fff; background:#b4c1cf;}
#jumpmenu table td a:hover p.menu {color:#333; background:#ccc;}
#jumpmenu table td a:link.link {text-decoration :none;}

#jumpmenu table td .menubox{
width :180px;
position :absolute;
border :1px solid #555;
display :none;
}

☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
です。
よろしくお願いします。

投稿日時 - 2009-03-31 16:16:21

QNo.4841691

すぐに回答ほしいです

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

こんにちは。 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="#">メニュー1</a>
<a href="#">メニュー2</a>
<a href="#">メニュー3</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="#">メニュー4</a>
<a href="#">メニュー5</a>
</div></div>

<br style="clear:left;">

</body>
</html>

投稿日時 - 2009-04-08 21:48:34

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(5)

ANo.5

No4です

No4の回答ははじめの<div id="jumpmenu">タグを閉じ忘れてます。^^;ゞ
すみませ~ん。 念のため…

投稿日時 - 2009-04-08 22:56:34

お礼

大変ありがとうございました。
思ったとおりに実装できましたので
ご報告いたします。

長い間、間隔があいてしまったことを
お詫び申し上げます。

投稿日時 - 2009-07-13 10:49:01

ANo.3

No.1の者です。
私も試してみたところNo.2さんのおっしゃられる
通りきちんと表示されていると思います。
Versionは IE6.029です。

参考までに画像を添付しておきます。

投稿日時 - 2009-04-01 21:16:40

お礼

確かに、表示はされるんです。
言い方が悪かったかもしれません。すいません。

ただ、クリックできないんです。
クリックしようとしてドロップダウンメニューにマウスを持っていくと
メニューが消えてしまうんです。

IE6だけ・・・。
半ば諦めかけてます・・・。

投稿日時 - 2009-04-02 12:22:37

ANo.2

IE6.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が関係していることはありませんか?

投稿日時 - 2009-04-01 13:12:10

お礼

確かに、表示はされるんです。
言い方が悪かったかもしれません。すいません。

ただ、クリックできないんです。
クリックしようとしてドロップダウンメニューにマウスを持っていくと
メニューが消えてしまうんです。

IE6だけ・・・。
半ば諦めかけてます・・・。

投稿日時 - 2009-04-02 12:22:17

ANo.1

cssにz-indexというプロパティがあって、表示が重なった場合にどの順に表示するかという奥行きを設定することができるので、プルダウンメニューを表示しているCSSにz-indexを設定して下の画像より前にくるようにすればよいと思いますよ。

参考URL:http://www.htmq.com/style/z-index.shtml&#8203;

投稿日時 - 2009-03-31 21:26:09

お礼

z-indexプロパティは試しましたが

z-indexプロパティで指定しても、firefox、IE7は正常に動作しますが
IE6だとやはりダウンメニューが下の画像に隠れてしまいます。

投稿日時 - 2009-04-01 08:31:33

あなたにオススメの質問