質問編集履歴
4
修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -269,3 +269,47 @@
|
|
|
269
269
|
|
|
270
270
|
|
|
271
271
|
grobalnaviそのものをiframeとして、親要素にposition:relative;を置いて、iframeにposition:absolute;をかけて、z-indexで最前面に出して置いて、要素に高さを持たせてみるのですが、要素の高さ分下のレイヤーにくるバナー等をクリックすることができないので、マウスオーバーしていない状態でそのiframeそのものの高さを無視して下のレイヤーの要素をクリックできる等ができればと模索しております。
|
|
272
|
+
|
|
273
|
+
|
|
274
|
+
|
|
275
|
+
|
|
276
|
+
|
|
277
|
+
### 追記になります
|
|
278
|
+
|
|
279
|
+
|
|
280
|
+
|
|
281
|
+
mts10806 様
|
|
282
|
+
|
|
283
|
+
|
|
284
|
+
|
|
285
|
+
IEのみhover部分にマウスを移動すると、消えてしまいます。
|
|
286
|
+
|
|
287
|
+
|
|
288
|
+
|
|
289
|
+
chromeやFirefoxではそのままマウスを移動してもhoverしている要素が表示されたままになります。
|
|
290
|
+
|
|
291
|
+
|
|
292
|
+
|
|
293
|
+
すみません、globalが正しいのですね。スペル間違いしておりました。
|
|
294
|
+
|
|
295
|
+
|
|
296
|
+
|
|
297
|
+
yambejp 様
|
|
298
|
+
|
|
299
|
+
x_x 様
|
|
300
|
+
|
|
301
|
+
|
|
302
|
+
|
|
303
|
+
楽天モールのヘッダー領域の文字数制限があり、カテゴリー数の問題で
|
|
304
|
+
|
|
305
|
+
制限内に収められないため、どうしてもiframeで文字数制限等のない
|
|
306
|
+
|
|
307
|
+
楽天の用意しておりますサーバーからHTMLで呼び出してくる必要がでてまいります。
|
|
308
|
+
|
|
309
|
+
|
|
310
|
+
|
|
311
|
+
|
|
312
|
+
|
|
313
|
+
またHTML部分の</ul>が消えてしまっており大変申し訳ございません。
|
|
314
|
+
|
|
315
|
+
修正させていただきました。
|
3
修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -40,51 +40,51 @@
|
|
|
40
40
|
|
|
41
41
|
|
|
42
42
|
|
|
43
|
-
|
|
43
|
+
<!--grobalnavi_inner_start-->
|
|
44
|
-
|
|
44
|
+
|
|
45
|
-
|
|
45
|
+
<div id="grobalnavi_inner">
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
-
|
|
49
|
+
<ul class="menu">
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
|
|
53
|
-
|
|
53
|
+
<li class="menu__mega">
|
|
54
|
-
|
|
54
|
+
|
|
55
|
-
|
|
55
|
+
<a href="https://item.rakuten.co.jp/ashu/c/0000001482/" class="init-bottom">商品一覧</a>
|
|
56
|
-
|
|
56
|
+
|
|
57
|
-
|
|
57
|
+
<ul class="menu__second-level">
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
|
|
61
|
-
|
|
61
|
+
<li>
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
|
|
65
|
-
|
|
65
|
+
<div class="mega_inner">
|
|
66
|
-
|
|
66
|
+
|
|
67
|
-
|
|
67
|
+
<iframe src="smple.html" width="100px" height="500px" frameborder="0" scrolling="no"></iframe>
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
68
|
+
|
|
71
|
-
|
|
69
|
+
</div>
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
|
|
75
|
-
|
|
73
|
+
</li>
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
|
|
79
|
-
|
|
77
|
+
</ul>
|
|
80
|
-
|
|
78
|
+
|
|
81
|
-
|
|
79
|
+
</li>
|
|
80
|
+
|
|
82
|
-
|
|
81
|
+
</ul>
|
|
83
|
-
|
|
84
|
-
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
|
|
85
|
-
|
|
85
|
+
</div>
|
|
86
|
-
|
|
86
|
+
|
|
87
|
-
|
|
87
|
+
<!--grobalnavi_inner_end-->
|
|
88
88
|
|
|
89
89
|
|
|
90
90
|
|
2
追記
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
hoverしたiframeを含むドロップダウンメニュー
|
|
1
|
+
hoverしたiframeを含むドロップダウンメニューをIEで実装する方法
|
test
CHANGED
|
@@ -166,6 +166,36 @@
|
|
|
166
166
|
|
|
167
167
|
}
|
|
168
168
|
|
|
169
|
+
|
|
170
|
+
|
|
171
|
+
li.menu__mega ul.menu__second-level {
|
|
172
|
+
|
|
173
|
+
position:absolute;
|
|
174
|
+
|
|
175
|
+
top:40px;
|
|
176
|
+
|
|
177
|
+
left:0;
|
|
178
|
+
|
|
179
|
+
box-sizing:border-box;
|
|
180
|
+
|
|
181
|
+
width:100px;
|
|
182
|
+
|
|
183
|
+
background-color:rgba(255, 255, 255, 0.92);
|
|
184
|
+
|
|
185
|
+
-webkit-transition:all .2s ease;
|
|
186
|
+
|
|
187
|
+
transition:all .2s ease;
|
|
188
|
+
|
|
189
|
+
list-style:none inside;
|
|
190
|
+
|
|
191
|
+
box-shadow:0px 1px 3px 1px rgba(0,0,0,0.4);
|
|
192
|
+
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
|
|
196
|
+
|
|
197
|
+
|
|
198
|
+
|
|
169
199
|
ul.menu__second-level {
|
|
170
200
|
|
|
171
201
|
visibility:hidden;
|
|
@@ -228,4 +258,14 @@
|
|
|
228
258
|
|
|
229
259
|
|
|
230
260
|
|
|
231
|
-
この状態ですと、IEではhoverしているul.menu__second-levelの要素にマウスを移動した際に維持できない
|
|
261
|
+
この状態ですと、IEではhoverしているul.menu__second-levelの要素にマウスを移動した際に維持できない状態です。
|
|
262
|
+
|
|
263
|
+
|
|
264
|
+
|
|
265
|
+
|
|
266
|
+
|
|
267
|
+
### 第２案として
|
|
268
|
+
|
|
269
|
+
|
|
270
|
+
|
|
271
|
+
grobalnaviそのものをiframeとして、親要素にposition:relative;を置いて、iframeにposition:absolute;をかけて、z-indexで最前面に出して置いて、要素に高さを持たせてみるのですが、要素の高さ分下のレイヤーにくるバナー等をクリックすることができないので、マウスオーバーしていない状態でそのiframeそのものの高さを無視して下のレイヤーの要素をクリックできる等ができればと模索しております。
|
1
誤字
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
### hoverしたiframeを含むドロップダウンメニューの維持
|
|
2
2
|
|
|
3
|
-
ここに質問の内容を詳しく書いてください。
|
|
4
|
-
|
|
5
3
|
|
|
6
4
|
|
|
7
5
|
現在ドロップダウンメニューの実装を行なっており
|
|
@@ -28,7 +26,7 @@
|
|
|
28
26
|
|
|
29
27
|
|
|
30
28
|
|
|
31
|
-
|
|
29
|
+
以下が現在のソースです
|
|
32
30
|
|
|
33
31
|
|
|
34
32
|
|