FastEthernet
Cadet 4th Year
- Registriert
- Juni 2010
- Beiträge
- 65
Hallo Leute,
ich progge grad an einem Dropdown menu mit Javascript.
Es öffnet sich an der gewünschten Stelle,wird angezeigt und geht auch wieder weg- Aber leider auch, wenn Ich die Maus aufs Untermenu bewege.
Wie kann ich das verhindern?
Mein Code bis jetzt:
Danke für eure Hilfe!
ich progge grad an einem Dropdown menu mit Javascript.
Es öffnet sich an der gewünschten Stelle,wird angezeigt und geht auch wieder weg- Aber leider auch, wenn Ich die Maus aufs Untermenu bewege.
Wie kann ich das verhindern?
Mein Code bis jetzt:
index.php:
main.css:
menu.js:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="main.css" type="text/css" rel="stylesheet" >
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Test</title>
<script type="text/javascript" src="menu.js"> </script>
</head>
<body>
<div id="menu_hr" onmouseout="ShowMenu(false, this);">
<a class="menu" onmouseover="ShowMenu(true, this);" href="#" id="menu0" name="o_menu">Link 1</a>
<a class="menu" onmouseover="ShowMenu(true, this);" href="#" id="menu1" name="o_menu">Link 2</a>
<a class="menu" onmouseover="ShowMenu(true, this);" href="#" id="menu2" name="o_menu">Link 3</a>
<a class="menu" onmouseover="ShowMenu(true, this);" href="#" id="menu3" name="o_menu">Link 4</a>
<a class="menu" onmouseover="ShowMenu(true, this);" href="#" id="menu4" name="o_menu">Link 5</a>
<div id="menu0hide" name="u_menu">1lolololol1</div>
<div id="menu1hide" name="u_menu">2lolololol2</div>
<div id="menu2hide" name="u_menu">3lolololol3</div>
<div id="menu3hide" name="u_menu">4lolololol4</div>
<div id="menu4hide" name="u_menu">5lolololol5</div>
</div>
</body>
</html>
Code:
#menu0hide {
position: absolute;
display: none;
border: 1px solid red;
height: 200px;
width: 200px;
z-index: 199;
background: red;
}
#menu1hide {
position: absolute;
display: none;
border: 1px solid red;
height: 200px;
width: 200px;
z-index: 199;
background: green;
}
#menu2hide {
position: absolute;
display: none;
border: 1px solid red;
height: 200px;
width: 200px;
z-index: 199;
background: blue;
}
#menu3hide {
position: absolute;
display: none;
border: 1px solid red;
height: 200px;
width: 200px;
z-index: 199;
background: white;
}
#menu4hide {
position: absolute;
display: none;
border: 1px solid red;
height: 200px;
width: 200px;
z-index: 199;
background: yellow;
}
Code:
function ShowMenu (status, elem) {
if (status==true){
var posX = elem.offsetLeft;
var heightLink = elem.offsetHeight;
var posY = elem.offsetTop+heightLink;
posY = posY-1
//alert (posX+" "+posY+" "+heightLink);
for (var i=0; i<document.getElementsByName("u_menu").length; i++)
{
document.getElementById("menu"+i+"hide").style.display = "none";
}
document.getElementById(elem.id+"hide").style.left = posX+"px";
document.getElementById(elem.id+"hide").style.top = posY+"px";
document.getElementById(elem.id+"hide").style.display = "block";
//alert (posX+" "+posY);
}
else {
for (var q=0; q<document.getElementsByName("u_menu").length; q++)
{
document.getElementById("menu"+q+"hide").style.display = "none";
}
}
}
mouseleave ist kein HTML-Standard, sondern eine proprietäre Erfindung von Microsoft, deshalb kann man nicht einfach "onmouseleave=..." schreiben. Das (auch sonst sehr gute) jQuery-Framework unterstützt mouseleave aber auch in den anderen Browsern (
