Ik ben bezig met het volgende menu : *link*.
html + js:
<!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>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.
