hoverしたiframeを含むドロップダウンメニューの維持
現在ドロップダウンメニューの実装を行なっており
ショッピングモールのため、ドロップダウンの内部のみiframe化をしたいと考えております。
マウスオーバーでhoverした中身をiframeで作成した内容にした場合
IEでドロップダウンの内容にカーソルを移動させるとドロップダウンが消えてしまいます。
この問題に対して可能であればHTMLとCSSで解決を行いたいとおもっております。
また仮にjavascriptを使用する場合の実装方法(できればjavascriptはiframeのファイルに記述を行いたい)
などもご教授いただければと思います。
以下が現在のソースです
<!--grobalnavi_start--> <div id="grobalnavi"> <!--grobalnavi_inner_start--> <div id="grobalnavi_inner"> <ul class="menu"> <li class="menu__mega"> <a href="https://item.rakuten.co.jp/ashu/c/0000001482/" class="init-bottom">商品一覧</a> <ul class="menu__second-level"> <li> <div class="mega_inner"> <iframe src="smple.html" width="100px" height="500px" frameborder="0" scrolling="no"></iframe> </div> </li> </ul> </li> </ul> </div> <!--grobalnavi_inner_end--> </div> <!--grobalnavi_end-->
CSS
html { font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; } * { margin:0px; padding:0px; } a { outline:none; text-decoration:none; color:#000; } #grobalnavi { width:100PX; } #grobalnavi_inner { width:100px; margin:0px auto; } .menu > li a { display:block; color:#000; } li.menu__mega ul.menu__second-level { position:absolute; top:40px; left:0; box-sizing:border-box; width:100px; background-color:rgba(255, 255, 255, 0.92); -webkit-transition:all .2s ease; transition:all .2s ease; list-style:none inside; box-shadow:0px 1px 3px 1px rgba(0,0,0,0.4); } ul.menu__second-level { visibility:hidden; z-index:1; } li.menu__mega:hover ul.menu__second-level { top:35px; visibility:visible; opacity:1; }
iframe
<p> aaaaaaaaaaaa </p>
現状
この状態ですと、IEではhoverしているul.menu__second-levelの要素にマウスを移動した際に維持できない状態です。
第2案として
grobalnaviそのものをiframeとして、親要素にposition:relative;を置いて、iframeにposition:absolute;をかけて、z-indexで最前面に出して置いて、要素に高さを持たせてみるのですが、要素の高さ分下のレイヤーにくるバナー等をクリックすることができないので、マウスオーバーしていない状態でそのiframeそのものの高さを無視して下のレイヤーの要素をクリックできる等ができればと模索しております。
追記になります
mts10806 様
IEのみhover部分にマウスを移動すると、消えてしまいます。
chromeやFirefoxではそのままマウスを移動してもhoverしている要素が表示されたままになります。
すみません、globalが正しいのですね。スペル間違いしておりました。
yambejp 様
x_x 様
楽天モールのヘッダー領域の文字数制限があり、カテゴリー数の問題で
制限内に収められないため、どうしてもiframeで文字数制限等のない
楽天の用意しておりますサーバーからHTMLで呼び出してくる必要がでてまいります。
またHTML部分の</ul>が消えてしまっており大変申し訳ございません。
修正させていただきました。
回答1件
あなたの回答
tips
プレビュー