Vertikale Navigation mit "mouseover"

[sf147]

Hallo,

folgendes Menü möchte ich umsetzen:

Menüpunkt 1
Menüpunkt 2
Menüpunkt 3
Menüpunkt 4

Wenn die Maus über einen Menüpunkt fährt soll ein Untermenü aufgehen ähnlich diesem:

Menüpunkt 1
Menüpunkt 2
    Untermenüpunkt 1
    Untermenüpunkt 2
    Untermenüpunkt 3
Menüpunkt 3
Menüpunkt 4

Unter den Untermenüpunkten wird es weitere Unteruntermenüpunkte geben, die ähnlich funktionieren sollen, aber das nur am Rande.
Verläßt die Maus nun den Bereich von Menüpunkt 2 oder der Untermenüpunkte 1...3 dann sollen die Untermenüpunkte verschwinden und sich ggfs. Untermenüpunkte der anderen Menüpunkte öffnen oder aber, falls z.B. die Maus nach links bewegt wird, nur noch die Menüpunkte zu sehen sein.
War das verständlich?

Der Ansatz meines Helferleins sah so aus:

	<script type="text/javascript">  
		function oeffneMP(mpid) {document.getElementById(mpid).style.display = "block";}  
		function schliesseMP(mpid) {document.getElementById(mpid).style.display = "none";}  
	</script>  

<div id="navcontainer" >
     <ul><li><a href="index.html" rel="self" id="current">Menuepunkt 1</a></li>
         <li><a onmouseover="oeffneMP ('untermenue');" onmouseout="schliesseMP ('untermenue');">Menuepunkt 2</a>
             <ul id="untermenue" style="display:none ;" >
                 <li><a href="verz1/index.html" rel="self">Untermenue 1</a></li>
                 <li><a href="verz2/index.html" rel="self">Untermenue 2</a></li>
                             ....... etc.

Das Problem ist nun, dass das Untermenü beim Mausziehen auf den Untermenüpunkt 2 zuklappt.

Ich habe nun wirklich extrem viel per Suchmaschine gesucht, gefunden und probiert, aber bisher half nix wirklich weiter.
Hat hier jemand einen Lösungsansatz?

herzlichen Dank
Carsten

[Matthias Apsel]

Om nah hoo pez nyeetz, sf147!

Wenn die Maus über einen Menüpunkt fährt soll ein Untermenü aufgehen ähnlich diesem:

Verläßt die Maus nun den Bereich von Menüpunkt 2 oder der Untermenüpunkte 1...3 dann sollen die Untermenüpunkte verschwinden und sich ggfs. Untermenüpunkte der anderen Menüpunkte öffnen oder aber, falls z.B. die Maus nach links bewegt wird, nur noch die Menüpunkte zu sehen sein.
War das verständlich?

naja ;-)

<a onmouseover="oeffneMP ('untermenue');" onmouseout="schliesseMP ('untermenue');">Menuepunkt 2</a>

Das Problem ist nun, dass das Untermenü beim Mausziehen auf den Untermenüpunkt 2 zuklappt.

Soll ja wohl auch so sein. mausover - öffne, mausraus - schließe.

Ich würde eine Lösung ohne JavaScript favorisieren.

HTML

<ul id="nav">
  <li>Menüpunkt 1
    <ul>
      <li>1.1</li>
      ...
    </ul>
  </li>
  ...
im CSS kannst du dann mit

#nav > li die Menüpunkte der 1. Ebene ansprechen und beispielsweise mit #nav > li li alle untergeordneten.

Mit dem Selektor #nav > li ul kannst du alle Listen tieferer Ebenen ausblenden.

Und mit #nav >li:hover ul sie bei Bedarf wieder einblenden.

Diese Lösung funktioniert nicht in IE < 7, da diese die Pseudoklasse :hover nur auf Link-Elemente anwenden können.

Verwende zum Ausblenden nicht display:none damit du Screenreaderuser nicht benachteiligst. Schau dich im Selfhtml-wiki um.

Matthias

[Gunnar Bittersmann]

@@sf147:

nuqneH

Menüpunkt 1
Menüpunkt 2
    Untermenüpunkt 1
    Untermenüpunkt 2
    Untermenüpunkt 3
Menüpunkt 3
Menüpunkt 4

Unter den Untermenüpunkten wird es weitere Unteruntermenüpunkte geben, die ähnlich funktionieren sollen, aber das nur am Rande.
Verläßt die Maus nun den Bereich von Menüpunkt 2 oder der Untermenüpunkte 1...3 dann sollen die Untermenüpunkte verschwinden und sich ggfs. Untermenüpunkte der anderen Menüpunkte öffnen

Ziemliches Gezappel: Dann sieht es so aus:

Menüpunkt 1
    Untermenüpunkt 1
    Untermenüpunkt 2
    Untermenüpunkt 3
    Untermenüpunkt 4
    Untermenüpunkt 5
    Untermenüpunkt 6
Menüpunkt 2
Menüpunkt 3
Menüpunkt 4

Die unteren Menüpunkte (3 und 4) springen in der Höhe wild umher. Ich bin mir nicht sicher, ob man solch ein Menü wirklich möchte. Vielleicht doch auf Clicks (und Focus! – nicht alle Nutzer haben eine Maus) reagieren, nicht auf Hover.

Ähm ja, unbedingt! Wie sollen sonst Nutzer ohne Maus (es sind mittlerweile schon viele und werden täglich mehr) sonst zu den Unterpunkten kommen?

Merke: Hover ist gut für Schnickschnack, aber unbrauchbar für Essentielles.

Qapla'