verticaal dropdown menu met mouseover
Ik ben bezig met het volgende menu : *link*.
html + js:
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
54
55
56
57
58
59
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
54
55
56
57
58
59
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function() {
$('div.nav-item a').each(function(){
if($(this).hasClass("parent")){
$(this).mouseover(function(){
$(this).next().slideDown(500);
});
}
});
$('div.nav-item div.sub-nav-items').mouseleave(function(){
$(this).slideUp(500);
});
});
</script>
</head>
<body>
<div id="nav">
<div class="nav-item">
<a href="#">pagina1</a>
</div>
<div class="nav-item">
<a href="#" class="parent">pagina2</a>
<div class="sub-nav-items">
<a href="#">sub pagina2.1</a>
<a href="#">sub pagina2.2</a>
<a href="#">sub pagina2.3</a>
<a href="#">sub pagina2.4</a>
</div>
</div>
<div class="nav-item">
<a href="#">pagina3</a>
</div>
<div class="nav-item">
<a href="#">pagina4</a>
</div>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function() {
$('div.nav-item a').each(function(){
if($(this).hasClass("parent")){
$(this).mouseover(function(){
$(this).next().slideDown(500);
});
}
});
$('div.nav-item div.sub-nav-items').mouseleave(function(){
$(this).slideUp(500);
});
});
</script>
</head>
<body>
<div id="nav">
<div class="nav-item">
<a href="#">pagina1</a>
</div>
<div class="nav-item">
<a href="#" class="parent">pagina2</a>
<div class="sub-nav-items">
<a href="#">sub pagina2.1</a>
<a href="#">sub pagina2.2</a>
<a href="#">sub pagina2.3</a>
<a href="#">sub pagina2.4</a>
</div>
</div>
<div class="nav-item">
<a href="#">pagina3</a>
</div>
<div class="nav-item">
<a href="#">pagina4</a>
</div>
</div>
</body>
</html>
Het submenu klapt nu alleen in als de muis in het submenu (<div class="sub-nav-items">)is geweest.
Hoe krijg ik het nu voor elkaar dat het menu inklapt bij zowel het verlaten van de parent div link (<a href="#" class="parent">pagina2</a>
) als het submenu div? (nu klapt het alleen in bij verlaten van het submenu div).
Een conditie is dus dat bij het verlaten van de parent div link, en een opvolgende mouseover op het submenu div, er niks moet gebeuren.
Gewijzigd op 01/01/1970 01:00:00 door NiVin
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
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
$(function() {
$('div.nav-item a').each(function(){
if($(this).hasClass("parent")){
$(this).mouseover(function(){
$(this).next().slideDown(500);
});
$(this).mouseleave(function(){
$(this).next().slideUp(500);
});
}
});
$('div.nav-item div.sub-nav-items').mouseleave(function(){
$(this).slideUp(500);
});
});
$('div.nav-item a').each(function(){
if($(this).hasClass("parent")){
$(this).mouseover(function(){
$(this).next().slideDown(500);
});
$(this).mouseleave(function(){
$(this).next().slideUp(500);
});
}
});
$('div.nav-item div.sub-nav-items').mouseleave(function(){
$(this).slideUp(500);
});
});
Lijkt mij de meest logische oplossing.