jQuery slideDown menu op de voorgrond
ik heb een jQuery slideDown menu. Deze werkt perfect alleen klapt de slider op de achtergrond (achter mijn andere div's) uit inplaats van de voorgrond.
Is hier een script voor?
Thanks
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
51
52
53
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
51
52
53
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#winkelmand").slideToggle("slow");
$(this).toggleClass("active");
});
});
</script>
<style type="text/css">
a:focus {
outline: none;
}
#winkelmand {
background: #754c24;
position: inherit;
z-index: 888;
text-align: center;
margin:0 auto;
height: 200px;
display: none;
}
.slide {
margin: 0;
padding: 0;
border-top: solid 4px #422410;
}
.btn-slide {
text-align: center;
width: 144px;
height: 31px;
padding: 10px 10px 0 0;
margin: 0 auto;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #000;
text-decoration: none;
}
.active {
background-position: right 12px;
}
</style>
<div id="winkelmand">
hoi
</div>
<p class="slide"><a href="#" class="btn-slide">open menu</a></p>
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#winkelmand").slideToggle("slow");
$(this).toggleClass("active");
});
});
</script>
<style type="text/css">
a:focus {
outline: none;
}
#winkelmand {
background: #754c24;
position: inherit;
z-index: 888;
text-align: center;
margin:0 auto;
height: 200px;
display: none;
}
.slide {
margin: 0;
padding: 0;
border-top: solid 4px #422410;
}
.btn-slide {
text-align: center;
width: 144px;
height: 31px;
padding: 10px 10px 0 0;
margin: 0 auto;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #000;
text-decoration: none;
}
.active {
background-position: right 12px;
}
</style>
<div id="winkelmand">
hoi
</div>
<p class="slide"><a href="#" class="btn-slide">open menu</a></p>
http://imageshack.us/f/507/situatie.jpg/
z-index had ik al gedefinieerd alleen kwam ik net dit tegen
'Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed)'
mijn position stond op inherit dus deed ie het niet :)