✔ Submenü erscheinen lassen bei MouseOver

C

corona

Erfahrenes Mitglied
Hallo,
Bitte helft mir. Ich habe ein Problem.
Ich will ein Submenü erscheinen lassen, wenn man mit der Maus auf dem Hauptnavigationspunkt klickt.

Was ich bis jetzt gemacht habe...

Version 1 (wo das Menü beim Klicken erscheint, ich will aber beim drauffahren mit der Maus schon das Menü haben)

<html>
<head>
<title>Menue</title>
<style type="text/css">
.weg a{display:none}
.da a{display:normal}
</style>
<script language=JavaScript>
function roll(num)
{
if(document.all[num].className=="weg")document.all[num].className="da";
else document.all[num].className="weg";
}
</script>
</head>
<body>
<span class="weg" id="m1" onClick="roll('m1');" >
<b>Überschrift 1</b><br>
<a href="1.htm" >Eintrag 1.1<br></a>
<a href="2.htm" >Eintrag 1.2<br></a>
<a href="3.htm" >Eintrag 1.3<br></a>
<a href="4.htm" >Eintrag 1.4<br></a>
</span>
<span class="weg" id="m2" onClick="roll('m2');" >
<b>Überschrift 2</b><br>
<a href="5.htm" >Eintrag 2.1</a><br>
<a href="6.htm" >Eintrag 2.2</a><br>
</span>
</body>
</html>


Version 2 (hier erscheint zwar das Menü beim drüberfahren mit der Maus, allerdings kann ich so auch nicht die Subnabigationspunkte klicken, weil diese sofort weggehen)

<html>
<head>
<title>Menue 2</title>
<style type="text/css">
.weg a{display:none}
.da a{display:normal}
</style>
<script language=JavaScript>
function roll(num)
{
if(document.all[num].className=="weg")document.all[num].className="da";
else document.all[num].className="weg";
}
</script>
</head>
<body>
<span class="weg" id="m1" onMouseover="roll('m1');" >
<b>Überschrift 1</b><br>
<a href="1.htm" >Eintrag 1.1<br></a>
<a href="2.htm" >Eintrag 1.2<br></a>
<a href="3.htm" >Eintrag 1.3<br></a>
<a href="4.htm" >Eintrag 1.4<br></a>
</span>
<span class="weg" id="m2" onMouseover="roll('m2');" >
<b>Überschrift 2</b><br>
<a href="5.htm" >Eintrag 2.1</a><br>
<a href="6.htm" >Eintrag 2.2</a><br>
</span>
</body>
</html>


Vielleicht mal den Code einfach mal als html speichern, um mein Problem besser zu verstehen.

Ich danke um jede Hilfe. Bin echt total verzweifelt.
Thanx :)
 
Das Problem ist, dass die Funktion jedes mal, wenn sich die Maus über eins der Tags im <span> bewegt wieder aufgrufen wird. Da sie gleichzeitig verstecken und sichtbar machen kann wird die Funktion das jedes mal auch tun, daher flackert das ganze bei jeder Mausbewegung über den <span>.
Man trennt einfach Verstecken und sichtbar Machen voneinander und das Problem ist gelöst. Das sieht dann so aus:
HTML: 
<html><head><title>Menue 2</title>
 
 <style type="text/css">
 	.weg a{display:none}
 	.da a{display:normal}
 </style>
 
 <script language="JavaScript">//<!--
 	function roll(num) { document.getElementById(num).className="da"; }
 	function unroll(num) { document.getElementById(num).className="weg"; }
 //--></script>
 
 </head><body>
 
 <span class="weg" id="m1" onMouseover="roll('m1');" onMouseout="unroll('m1')" >
 	<b>Überschrift 1</b><br>
 	<a href="1.htm">Eintrag 1.1<br></a>
 	<a href="2.htm">Eintrag 1.2<br></a>
 	<a href="3.htm">Eintrag 1.3<br></a>
 	<a href="4.htm">Eintrag 1.4<br></a>
 </span>
 
 <span class="weg" id="m2" onMouseover="roll('m2');" onMouseout="unroll('m2')">
 	<b>Überschrift 2</b><br>
 	<a href="5.htm" >Eintrag 2.1<br></a>
 	<a href="6.htm" >Eintrag 2.2<br></a>
 </span>
 
 </body></html>
Und jetzt funktioniert's sogar in Mozilla, so einfach ist das.
 
Zuletzt bearbeitet:
Hallo.
Vielen Dank erstmal an die Antwort. Hat alles geklappt.

Wie ich das Submenü allerdings erscheinen wollte, war ein anderes. Ich dachte dass wenn ich den Code dazu habe es auch anders umsetzen könnte.

Sitze nun seit 5 Stunden hier und dem ist leider nicht so. Ich will nämlich das ganze mit Ebenen mache. Fahre ich mit der Maus über dem Hautnavigationspunkt, sollte eine andere Ebene erscheinen, die dann die Submenüs hat.

Schaut euch mal bitte folgenden Code an, ob ihr mir da weiter helfen könnt. Oder vielleicht habt ihr eine ganz andere Angehensweise die funktioniert.


<html>
<head>
<title>Willkommen</title>
<style type="text/css">
.weg a{display:none}
.da a{display:normal}
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function roll(num) { document.getElementById(num).className="da"; }
function unroll(num) { document.getElementById(num).className="weg"; }
//-->
</script>
</head>
<body>
<div id="Layer15" style="position:absolute; left:0px; top:282px; width:800px; height:37px; z-index:9; background-color: #9A0000; layer-background-color: #9A0000; border: 1px none #000000; visibility: visible;">
<table width="75%" height="37" border="0">
<tr>
<td width="38"></td>
<td width="92" bgcolor="#FFC387"><a href="home.html" class="red">Start</a></td>
<td width="108"> <span class="weg" id="m1" onMouseover="roll('m2');" onMouseout="unroll('m2')" >
Hauptpunkt<br></span>
</td>
<td width="344"><a href="kontakt.html">Kontakt</a></td></tr>
</table>
</div>
</form>
<div class="weg" id="m2" onMouseover="roll('m2');" onMouseout="unroll('m2')" style="position:absolute; left:138px; top:229px; width:112px; height:51px; z-index:12; border: 1px none #000000; visibility: visible;">
<table width="100%" border="0" bgcolor="#9A0000">
<tr>
<td height="22"><a href="unterpunkt2.html">Unterpunkt 2</a></td>
</tr>
<tr>
<td><a href="unterpunkt1.html">Unterpunkt 1</a></td>
</tr>
</table>
</div>
</body>
</html>


Bitte helft mir. Warum erscheint der rote Hintergrund bei der oberen Zelle die ganze Zeit?
Wie kann ich das machen, dass wenn ich erst auf dem Hauptnavigationspunkt drüberfahre, dann das Submenü erscheint? So wie ich das jetzt habe ersceint es auch, wenn ich z.B. von der Seite drauf fahre.

BITTE HELFT MIR. Ich bin kurz vorm durchdrehen. Kann doch nicht unmöglich sein, oder?
Falls es einen anderen Ansatz gibt, dann auch kein Problem.

Danke für jede Hilfe.
Corona
 
Anderer Ansatz(nur ein wenig der Menuaufbau modifiziert):
Code: 
<html>
<head>
<title>Menue 2</title>
<style type="text/css">
<!--
.weg a{display:none}
.da a{display:normal}
-->
</style>
<script type="text/javascript">
<!--
function roll(num)
{
document.getElementById(num).className=
    (document.getElementById(num).className=='weg')
        ?'da'
        :'weg';
}
//-->
</script>
</head>
<body>
 <b onMouseover="roll('m1');">Überschrift 1</b><br>
 <span class="weg" id="m1">
  <a href="1.htm" >Eintrag 1.1<br></a>
  <a href="2.htm" >Eintrag 1.2<br></a>
  <a href="3.htm" >Eintrag 1.3<br></a>
  <a href="4.htm" >Eintrag 1.4<br></a>
 </span>
<span onMouseover="roll('m2');" ><b>Überschrift 2</b><br></span>
<span class="weg" id="m2">
<a href="5.htm" >Eintrag 2.1</a><br>
<a href="6.htm" >Eintrag 2.2</a><br>
</span>
</body>
</html>

Die "Ebenen" sind jeweils die <span>(kannst auch <div>'s nehmen...wo die sich befinden, sollte egal sein können)
 
Hallo,

danke für das Script. Hat mehr oder weniger geklappt. Das Submenü geht nämlich nur weg, wenn ich beim Hauptpunkt wieder drüber fahre. es sollte aber schon weg gehen, wenn ich mit der Maus über keinen Subpunkt bin. Weiß jemand was?

Was mich auch immer noch stört:
Erscheint bei Euch auch immer bei der ausgeblendeten Ebene trotzdem die ganze Zeit der rote Hintergrund?

So etwas versteh ich echt nicht.

Wäre echt dankbar auch hierfür etwas Hilfe zu bekommen.
Vielen Dank.
Corona
 
sorry, aber das mit mouseout funktioniert nicht.

weiß jemand wie ich das andere problem beheben kann? Man sieht ja immer etwas Hintergrundfarbe von der Ebene, die ja erst beim Mouseover erscheinen soll.

Das ist doch komisch, oder? Sieht das bei euch auch so aus oder liegt das an meinem Browser?

Hier noch mal der Code von oben:
<html>
<head>
<title>Willkommen</title>
<style type="text/css">
.weg a{display:none}
.da a{display:normal}
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function roll(num) { document.getElementById(num).className="da"; }
function unroll(num) { document.getElementById(num).className="weg"; }
//-->
</script>
</head>
<body>
<div id="Layer15" style="position:absolute; left:0px; top:282px; width:800px; height:37px; z-index:9; background-color: #9A0000; layer-background-color: #9A0000; border: 1px none #000000; visibility: visible;">
<table width="75%" height="37" border="0">
<tr>
<td width="38"></td>
<td width="92" bgcolor="#FFC387"><a href="home.html" class="red">Start</a></td>
<td width="108"> <span class="weg" id="m1" onMouseover="roll('m2');" onMouseout="unroll('m2')" >
Hauptpunkt<br></span>
</td>
<td width="344"><a href="kontakt.html">Kontakt</a></td></tr>
</table>
</div>
</form>
<div class="weg" id="m2" onMouseover="roll('m2');" onMouseout="unroll('m2')" style="position:absolute; left:138px; top:229px; width:112px; height:51px; z-index:12; border: 1px none #000000; visibility: visible;">
<table width="100%" border="0" bgcolor="#9A0000">
<tr>
<td height="22"><a href="unterpunkt2.html">Unterpunkt 2</a></td>
</tr>
<tr>
<td><a href="unterpunkt1.html">Unterpunkt 1</a></td>
</tr>
</table>
</div>
</body>
</html>


danke für jede Hilfe.
Corona
 
Bei mir haben die gar keine Hitnergrundfarbe, aber egal.
Wie wäre es, wenn du beim ausblenden auch gleichzeitig die Hintergrundfrabe mit document.getElementById.style.background-color auf weiß oder was auch immer du hast setzt und dann beim Einblenden mit dem gleichen Befel wieder auf rot?
Du solltest auch ein und ausblenen wieder trennen sonst gibt es fehler im Mozilla.
 
Zuletzt bearbeitet:
gute idee, das mit der hintergrundfarbe.
aber wieso geht es damit nicht:

function roll(num) { document.getElementById(num).className="da" && document.getElementById.style.background-color="FFFFFF"; }

function unroll(num) { document.getElementById(num).className="weg" && document.getElementById.style.background-color="9A0000"; }

Zwei Eigenschaften verknüpft man doch mit && in JS, oder?

Danke nochmal.
 
Das ist ein wenig Komplizierter. Bedingungen verknüpft man mit &&, da hast du schon recht.. Sowas wie "wenn a gleich b und b ungleich c" würde man mit && verknüpfen. Du gibt aber zwei Anweisungen. Tausche einfach das && durch einen Strichpunkt ( ; ) aus. Dann musst du noch sagen von welchem Element du die Hintergrundfarbe ändern willst. Das tust du indem du wie bei der Anweisung "...className" noch (num) hinter "...ById" schreibst.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück