Ik heb een menu gemaakt met submenu's die verschijnen bij onmouseover en verdwijnen bij onmouseout. (zie mijn code)
Het lijkt mij nogal vervelend dat een submenu meteen uitklapt als je er toevallig met je cursor over gaat, zonder dat het eigenlijk de bedoeling was om het te openen.
Hoe kan ik ervoor zorgen dat de submenu's pas uitklappen als je bijvoorbeeld minimum 1 seconde op de menuknop blijft.
[JS]
function ShowSubMenu(SubMenu)
{
for (i=1;i<=3;i++){
document.getElementById("SubMenu" + i).style.display="none";
}
document.getElementById(""+SubMenu+"").style.display="block";
}
function HideSubMenu()
{
for (i=1;i<=3;i++){
document.getElementById("SubMenu" + i).style.display="none";
}
}
[/JS]
Het lijkt mij nogal vervelend dat een submenu meteen uitklapt als je er toevallig met je cursor over gaat, zonder dat het eigenlijk de bedoeling was om het te openen.
Hoe kan ik ervoor zorgen dat de submenu's pas uitklappen als je bijvoorbeeld minimum 1 seconde op de menuknop blijft.
[JS]
function ShowSubMenu(SubMenu)
{
for (i=1;i<=3;i++){
document.getElementById("SubMenu" + i).style.display="none";
}
document.getElementById(""+SubMenu+"").style.display="block";
}
function HideSubMenu()
{
for (i=1;i<=3;i++){
document.getElementById("SubMenu" + i).style.display="none";
}
}
[/JS]
HTML:
<html>
<head>
<title>Menu</title>
<style>
.MenuBalk { width: 100%;
height: 40px;
background: #BBB;
z-index: 106;
}
.Menu1 { Width: 954px;
height: 40px;
margin-left: auto;
margin-right: auto;
background: none;
}
.MenuKnop1 { width: 100px;
height: 33px;
float: left;
padding-top: 7px;
border-left: 1px solid #DDD;
border-right: 1px solid #AAA;
background: transparent;
color: #FFF;
font-size: 13pt;
text-align: center;
cursor: pointer;
}
.SubMenu { Width: 934px;
min-height: 200px;
padding-left: 20px;
padding-right: 20px;
background: #ECEBEA;
float: left;
position: absolute;
display: none;
margin-top: 33px;
color: #000;
text-align: left;
z-index: 105;
}
.SubMdiv { width:300px;
height: 120px;
margin: 20px 30px 20px 0;
float: left;
line-height:150%;
background: none;
}
.SubMdiv li { padding-left: 10px;
font-size: 10pt;
}
.SubMdiv ul { list-style-type: none;
padding:0;
margin:0;
}
</style>
</head>
<body>
<div class="MenuBalk">
<div class="Menu1">
<div class="MenuKnop1" onMouseover="ShowSubMenu('SubMenu1');" onMouseout="HideSubMenu();">
<div class="SubMenu" id="SubMenu1" style="margin-left: 0px;" >
<div class="SubMdiv">
<ul>
<li><a href="Link1.php">Link1</a></li>
<li><a href="Link2.php">Link2</a></li>
<li><a href="Link3.php">Link3</a></li>
<li><a href="Link4.php">Link4</a></li>
<li><a href="Link5.php">Link5</a></li>
</ul>
</div>
</div>
<span>Knop1</span>
</div>
<div class="MenuKnop1" onMouseover="ShowSubMenu('SubMenu2');" onMouseout="HideSubMenu();">
<div class="SubMenu" id="SubMenu2" style="margin-left: -102px;">
<div class="SubMdiv">
<ul>
<li><a href="Link6.php">Link6</a></li>
<li><a href="Link7.php">Link7</a></li>
<li><a href="Link8.php">Link8</a></li>
<li><a href="Link9.php">Link9</a></li>
<li><a href="Link10.php">Link10</a></li>
</ul>
</div>
</div>
<span>Knop2</span>
</div>
<div class="MenuKnop1" onMouseover="ShowSubMenu('SubMenu3');" onMouseout="HideSubMenu();">
<div class="SubMenu" id="SubMenu3" style="margin-left: -204px;">
<div class="SubMdiv">
<ul>
<li><a href="Link11.php">Link11</a></li>
<li><a href="Link12.php">Link12</a></li>
<li><a href="Link13.php">Link13</a></li>
<li><a href="Link14.php">Link14</a></li>
<li><a href="Link15.php">Link15</a></li>
</ul>
</div>
</div>
<span>Knop3</span>
</div>
</div>
</div>
</body>
</html>