- ベストアンサー
プルダウンメニューと打ち出し画像を組み合わせる際の注意点
- javascriptでプルダウンメニューと打ち出し画像を組み合わせると、表示がうまくされないことがあります。
- プルダウンメニューの下に打ち出し画像があるレイアウトでは、画像がプルダウンのサブメニューを隠してしまうことがあります。
- HTMLとCSSの知識があれば、プルダウンのメニューと打ち出し画像を重ねて動かすことは可能です。
- tontonden
- お礼率100% (1/1)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
画像にz-indexが使われているようなので、 グローバルナビのメニュー部分に それより大きな数値を設定すればできると思います。 例： <style type="text/css"> <!-- *{margin:0px;padding:0px;} ul#gnavi{ list-style:none outside; } li#menu1,li#menu2{ float:left; background-color:#ffffff; color:#000000; cursor:pointer; } li#menu1 ul,li#menu2 ul{ list-style:none outside; display:none; position:absolute; z-index:100; /*****プルダウンメニューのz-index値*****/ margin:0;padding:0; background-color:#000000; color:#ffffff; } .clear{ clear:both; } #gazou{ position:absolute; z-index:10; /*****打ち出し画像のz-index値*****/ background-color:#cccccc; } --> </style> <script type="text/javascript"> <!-- function MOver(id){ document.getElementById(id).style.display = 'block'; } function MOut(id){ document.getElementById(id).style.display = 'none'; } // --> </script> </head> <body> <ul id="gnavi"> <li id="menu1" onmouseover="MOver('list1')" onmouseout="MOut('list1')">list1を表示 <ul id="list1"> <li>リスト1-a</li> <li>リスト1-b</li> <li>リスト1-c</li> </ul> </li> <li id="menu2" onmouseover="MOver('list2')" onmouseout="MOut('list2')">list2を表示 <ul id="list2"> <li>リスト2-a</li> <li>リスト2-b</li> <li>リスト2-c</li> </ul> </li> </ul> <br class="clear" /> <div id="gazou"> 画像画像画像<br /> 画像画像画像<br /> <div> </body> </html>
お礼
ご回答いただきありがとうございます。 z-indexを使いましたがやはりメニューが埋もれてしまいました。。 今回は打ち出し画像の部分にflashを使うことにしました。