VNC stopt er mee :(
Flyout css transition bij form selectbox
Ik krijg er hoofdpijn van. In alle browsers werkt het goed behalve in IE.
Wat is het probleem.
Ik wil graag een verticaal flyout menu maken puur op CSS. Dit lukt aardig. Echter wanneer ik een selectbox in de "uitvliegende" div zet en ik wil deze selecteren voor een andere optie, dan klapt de flyout weer terug.
Voor een voorbeeld zie: http://dev.totaaldakspecialist.nl/ en probeer een optie te selecteren wanneer je links het flyout menu activeert.
Ik gebruik de volgende css code
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<div id="slideout">
<span class="fa fa-envelope-o fa-2x"></span>
<div id="slideout_inner">
<form>
<select style="z-index:1000">
<option>test</option>
<option>test</option>
<option>test</option>
</select>
</form>
</div>
</div>
<span class="fa fa-envelope-o fa-2x"></span>
<div id="slideout_inner">
<form>
<select style="z-index:1000">
<option>test</option>
<option>test</option>
<option>test</option>
</select>
</form>
</div>
</div>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
#slideout {
position: fixed;
z-index:1000;
top: 200px;
left: 0;
width: 35px;
padding: 12px 0;
text-align: center;
background: #6DAD53;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
color:#FFF;
font-size:10px;
}
#slideout_inner {
position: fixed;
z-index:1000;
top: 200px;
left: -450px;
background: #6DAD53;
width: 400px;
padding: 25px;
height: 500px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
text-align: left;
-webkit-border-radius: 0 0 5px 0;
-moz-border-radius: 0 0 5px 0;
border-radius: 0 0 5px 0;
color:#FFF;
font-size:10px;
}
#slideout_inner textarea {
width: 190px;
height: 1000px;
margin-bottom: 6px;
}
#slideout:hover {
left: 250px;
}
#slideout:hover #slideout_inner {
left: 0;
}
position: fixed;
z-index:1000;
top: 200px;
left: 0;
width: 35px;
padding: 12px 0;
text-align: center;
background: #6DAD53;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
color:#FFF;
font-size:10px;
}
#slideout_inner {
position: fixed;
z-index:1000;
top: 200px;
left: -450px;
background: #6DAD53;
width: 400px;
padding: 25px;
height: 500px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
text-align: left;
-webkit-border-radius: 0 0 5px 0;
-moz-border-radius: 0 0 5px 0;
border-radius: 0 0 5px 0;
color:#FFF;
font-size:10px;
}
#slideout_inner textarea {
width: 190px;
height: 1000px;
margin-bottom: 6px;
}
#slideout:hover {
left: 250px;
}
#slideout:hover #slideout_inner {
left: 0;
}
HOe kan ik dit probleem verhelpen?
Gewijzigd op 15/01/2015 22:22:01 door Ed van Papenrecht
Er zijn nog geen reacties op dit bericht.