EventHandling: Anfänger Probleme OnMouseOver / OnMouseOut

NetBull

NetBull

Erfahrenes Mitglied
Hi,

hau grad ein kleines Menü für das Ein- und Ausblenden ovn Submenüs bei einem DropDown Menü.

Das Einblenden klappt hervorragend, ausblenden auch. Aber ich komm natürlich bei folgendem Beispiel nicht an die SubMenü Einträge. Wie löst man so was sauber in JavaScript?

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>

<style type="text/css">
<!--
#pageMainMenu 
{
	height: 33px;
	padding-left: 115px;
	background-image: url(cssDesignRoom/img/clsPageMainMenue.jpg);
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
}
#pageMainMenu .clsLeftMenu {
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #000;
}
#pageMainMenu a {
	color: #CFC;
	text-decoration: none;
	font-weight: bold;
	line-height: 33px;
	height: 33px;
	display: block;
	float: left;
	border-top-width: 0px;
	border-right-width: 1px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: none;
	border-right-color: #000;
	padding-top: 0px;
	padding-right: 8px;
	padding-bottom: 0px;
	padding-left: 8px;
}
#pageMainMenu a:hover 
{
	color: #FF0;
	text-decoration: none;
	font-weight: bold;
	background-image: url(cssDesignRoom/img/clsPageMenuBar_Hover.jpg);
	line-height: 33px;
	height: 33px;
}
.clsPageSubMenu {
	margin: 5px;
	padding: 5px;
	border: 1px solid #CCC;
	display: inline;
	height: auto;
	position: absolute;
	z-index: 100;
	left: 139px;
	top: 50px;
}
.clsPageSubMenu a {
	display: block;
}

-->
</style>

<script type="text/javascript" language="javascript">

	function onLoad()
	{
		placeSubMenues();
	}
	
	function placeSubMenues()
	{
		var menuNode = document.getElementById('pageMainMenu').childNodes;
		var iEnd = menuNode.length;
		
		for(var i=0; i<iEnd; i++)
		{
			if( menuNode.item(i).className == "clsMainLeftMenuLink"  ||  menuNode.item(i).className == "clsMainMenuLink" )
			{
				var topPos = menuNode.item(i).offsetTop + document.getElementById("HomeMenu").offsetHeight -10;
				var leftPos = menuNode.item(i).offsetLeft;
				var itemIdent = menuNode.item(i).id;
				itemIdent += "Sub";
				document.getElementById(itemIdent).style.top = topPos+"px";
				document.getElementById(itemIdent).style.left = leftPos+"px";
				document.getElementById(itemIdent).style.visibility = "hidden";
			}
		}
	}
	
	function onMouseOverMainMenuLink(ElementId)
	{
		document.getElementById(ElementId+"Sub").style.visibility = "visible";
	}
	
	function onMouseOutMainMenuLink(ElementId)
	{
		document.getElementById(ElementId+"Sub").style.visibility = "hidden";
	}
	
</script>
</head>

<body onload="onLoad();">

<div id='pageMainMenu'>
	<a class='clsMainLeftMenuLink' id="HomeMenu" href="#1" onmouseover="onMouseOverMainMenuLink('HomeMenu');" 
    	onmouseout="onMouseOutMainMenuLink('HomeMenu');">DropDown1</a>        
    <a class = 'clsMainMenuLink' id = "sndMenu" href="#2" onmouseover="onMouseOverMainMenuLink('sndMenu');" 
    	onmouseout="onMouseOutMainMenuLink('sndMenu');">NormalLink1</a>
    <a class = 'clsMainMenuLink' id = "trdMenu" href="#3" onmouseover="onMouseOverMainMenuLink('trdMenu');" 
    	onmouseout="onMouseOutMainMenuLink('trdMenu');">DropDown2</a>
    <a class = 'clsMainMenuLink' id = "frtMenu" href="#4" onmouseover="onMouseOverMainMenuLink(''frtMenu);" 
    	onmouseout="onMouseOutMainMenuLink('frtMenu');">NormalLink2</a>
</div>
<div class='clsPageSubMenu' id='HomeMenuSub'><a href="#s1">ErsterLink</a><a href="#s2">ZweiterLink</a><a href="#s3">DritterLink</a><a href="#s4">VierterLink</a></div>
<div class='clsPageSubMenu' id='sndMenuSub'><a href="#s1">xErsterLink</a><a href="#s2">ZweiterLink</a><a href="#s3">DritterLink</a><a href="#s4">VierterLink</a></div>
<div class='clsPageSubMenu' id='trdMenuSub'><a href="#s1">yErsterLink</a><a href="#s2">ZweiterLink</a><a href="#s3">DritterLink</a><a href="#s4">VierterLink</a></div>
<div class='clsPageSubMenu' id='frtMenuSub'><a href="#s1">zErsterLink</a><a href="#s2">ZweiterLink</a><a href="#s3">DritterLink</a><a href="#s4">VierterLink</a></div>

</body>
</html>
 
Moin,

was ist an dem Markup nicht schön?
Das Beispiel aus Deinem Link ist auch mit JavaScript, wie es scheint.

LG deAndro
 
Im Code steht:
Code: 
.menu li.fly > a
Weist was das > a zu bedeuten hat?

edit:
Selber rausgefunden:
Bezieht sich auf Childs die direkt in diesem Tag stehen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück