• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Drop-Down-Menü funktioniert nicht richtig

N

nina20

Neues Mitglied
Hallo ihr Lieben,

ich hoffe Ihr könnt mir weiter helfen.
Ich erstelle gerade ein Drop-Down-Menü. Ist soweit auch alles ok außer, dass wenn ich mit der Maus auf der Hauptnavi bin, die Unternavi angezeigt wird und sobald ich mit der Maus zur Unternavi möchte, sich diese dann verschwindet.
Wie kann ich es am besten lösen? Kann mir da jemand helfen?


Hier der Code:

HTML: 
<!DOCTYPE html><head><link href="style.css" rel="stylesheet" type="text/css"/><title>Dies ist ein Button.</title>




<script type="text/javascript">
  window.onload = myFunction;  function myFunction() {
    var isVisible = false;
var home_div = document.getElementById('home');// var home_hover_div = document.getElementById('home'); var shop_div = document.getElementById('shop');var bilder_div = document.getElementById('bilder');var videos_div = document.getElementById('videos');



// Home

if (home_div.addEventListener) {    home_div.addEventListener('mouseover', function () {onHoverHome()},false);	home_div.addEventListener('mouseout', function () {onHoverHome()},false);//  home_hover_div.addEventListener('mouseover', function () {onHoverHome()},false); //	home_hover_div.addEventListener('mouseout', function () {onHoverHome()},false); } 
else {    home_div.attachEvent ('mouseover', function () {onHoverHome()});	home_div.attachEvent ('mouseout', function () {onHoverHome()});}





function onHoverHome() {if (isVisible) {isVisible = false;
document.getElementById('hover').style.visibility = "hidden";document.getElementById('home_hover').style.visibility = "hidden";

}
else {isVisible = true;
document.getElementById('hover').style.visibility = "visible";
}




}

// Shop



if (shop_div.addEventListener) {    shop_div.addEventListener('mouseover', function () {onHoverShop()},false);	shop_div.addEventListener('mouseout', function () {onHoverShop()},false);	} else {    shop_div.attachEvent ('mouseover', function () {onHoverShop()});	shop_div.attachEvent ('mouseout', function () {onHoverShop()});}

function onHoverShop() {if (isVisible) {isVisible = false;
document.getElementById('hover1').style.visibility = "hidden";
}
else {isVisible = true;
document.getElementById('hover1').style.visibility = "visible";
}
}


// Bilder 


if (bilder_div.addEventListener) {    bilder_div.addEventListener('mouseover', function () {onHoverBilder()},false);	bilder_div.addEventListener('mouseout', function () {onHoverBilder()},false);} else {    bilder_div.attachEvent ('mouseover', function () {onHoverBilder()});	bilder_div.attachEvent ('mouseout', function () {onHoverBilder()});}

function onHoverBilder() {if (isVisible) {isVisible = false;
document.getElementById('hover2').style.visibility = "hidden";
}
else {isVisible = true;
document.getElementById('hover2').style.visibility = "visible";
}
}


// Videos

if (videos_div.addEventListener) {    videos_div.addEventListener('mouseover', function () {onHoverVideos()},false);	videos_div.addEventListener('mouseout', function () {onHoverVideos()},false);} else {    videos_div.attachEvent ('mouseover', function () {onHoverVideos()});	videos_div.attachEvent ('mouseout', function () {onHoverVideos()});
}

function onHoverVideos() {if (isVisible) {isVisible = false;
document.getElementById('hover3').style.visibility = "hidden";
}
else {isVisible = true;
document.getElementById('hover3').style.visibility = "visible";

}
}}</script></head>

<body>
<div class='wrapper'>
	<div class="navi">		<div class="button_left">			<div class="button_center">				<a href="#" id="home">Home</a>				<a href="#" id="shop">Shop</a> 				<a href="#" id="bilder">Bilder</a> 				<a href="#" id="videos">Videos</a> 			</div>				<div class="button_right">				</div>		</div>					</div>
							<div class="navi1">		<div class="button_left">			<div class="button_center">			<a href="#">Impressum</a> <a href="#">Kontakt</a>			</div>				<div class="button_right">				</div>		</div>	</div>		<div id="hover">		<div class="home_hover">		<a href="#" class="hover_style">Home Hover</a><br>		<a href="#" class="hover_style">Home Hover</a><br>		<a href="#" class="hover_style">Home Hover</a><br>		</div>	</div>			<div id="hover1">			<div class="shop_hover">			<a href="#" class="hover_style">Home Hover</a><br>			<a href="#" class="hover_style">Home Hover</a><br>			<a href="#" class="hover_style">Home Hover</a><br>			<a href="#" class="hover_style">Home Hover</a><br>			<a href="#" class="hover_style">Home Hover</a><br>			</div>		</div>				<div id="hover2">			<div class="bilder_hover">			<a href="#" class="hover_style">Home Hover</a><br>			<a href="#" class="hover_style">Home Hover</a><br>			<a href="#" class="hover_style">Home Hover</a><br>			<a href="#" class="hover_style">Home Hover</a><br>			<a href="#" class="hover_style">Home Hover</a><br>			</div>		</div>				<div id="hover3">			<div class="videos_hover">			<a href="#" class="hover_style">Home Hover</a><br>			<a href="#" class="hover_style">Home Hover</a><br>			<a href="#" class="hover_style">Home Hover</a><br>			<a href="#" class="hover_style">Home Hover</a><br>			<a href="#" class="hover_style">Home Hover</a><br>			</div>		</div>			</div>
</body></html>


CSS:

HTML: 
body {background-image:url(bg.jpg);colHallo, ich binor:#000000;font-family:arial;font-size:22px;
}

/* Navigation */
.navi {margin-left:25%;margin-top:110px;font-weight:bold;}
.navi1 {float:left;margin-left:30px;font-size:16px;font-weight:bold;}

/* Navi Background / Grafik */ 

.button_left {background-image:url(1.png);height:70px;background-repeat:no-repeat;float:left;}

.button_center {margin-left:27px;background-image:url(2.png);height:70px;padding-left:30px;text-align:center;line-height:70px;padding-right:18px;word-spacing:1em;text-transform:uppercase;float:left;}

.button_right {background-image:url(3.png);height:70px;background-repeat:no-repeat;float:left;width:60px;margin-left:-4px;}



/* Links */
a:link {text-decoration:none;color:#000000;}
a:visited {text-decoration:none;color:#000000;}
a:hover {color:#585858;}
/* Navigation Hover */
#home  {}
#shop  {}
#bilder {
}

/* Hover */

#hover {visibility:hidden;}#hover1{visibility:hidden;}#hover2 {visibility:hidden;}#hover3 {visibility:hidden;}



.hover_style {font-size:12px;background-color:#ebebeb;padding-left:5px;padding-right:5px;padding-top:5px;padding-bottom:5px;margin-bottom:5px;}

.home_hover {left:536px;top:182px;position:absolute;
}
.shop_hover {left:630px;top:182px;position:absolute;
}
.bilder_hover {left:728px;top:182px;position:absolute;
}
.videos_hover {left:840px;top:182px;position:absolute;
}
 
Wieso machst Du sowas noch mit JavaScript? Mit reinem CSS geht es auch (und ist übersichtlicher).
 
Ist leider meine Aufgabe es per Java Script zu machen. Da ich mich mit Java Script nicht so gut auskenne, ist es irgendwie problematisch für mich und dachte, dass mir hier vielleicht jemand helfen könnte!

Liebste Grüße,
Nina
 
Ich hab das ganze mal ein bisschen reduziert: Ist vielleicht nicht die eleganteste Lösung, aber man kann einfach beim Hovern das Feld des Hauptmenüs über die Unterpunkte ausweiten und ihm einen höheren z-Achsenswert zuweisen.
Ich hab's jetzt eher unschön mit mit statischen CSS-Zuweisungen per ID gemacht, aber es soll ja auch nur das Prinzip widerspiegeln.


HTML:

<!DOCTYPE html>
<head>
<title>Dies ist ein Button.</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<script src="javascript.js" type="text/javascript"></script>
</head>
<body>

<div id="home"><a href="#">Home</a></div>

<div id="unterpunkt"><a href="#">Home Hover</a></div>

</body>
</html>



CSS:

#home {position:absolute; top:25px; left:25px; width:100px; height:25px; border:1px solid #000000; z-index:100}

#unterpunkt {position:absolute; top:50px; left:25px; width:100px; height:25px; border:1px solid #000000; visibility:hidden}




JavaScript:

window.onload = myFunction;

function myFunction(){

var home_div = document.getElementById("home");

home_div.addEventListener("mouseover", function(){hover_home()}, false);
home_div.addEventListener("mouseout", function(){out_home()}, false);

function hover_home(){

document.getElementById("home").style.height = "50px";
document.getElementById("unterpunkt").style.visibility = "visible";

}

function out_home(){

document.getElementById("home").style.height = "25px";
document.getElementById("unterpunkt").style.visibility = "hidden";

}
}

Oder du benutzt nur eine Funktion mit Parametern.

PS: Ich wurd schonmal drauf hingewiesen, den Codeeditor zu benutzen, aber wie geht denn das :?:
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben