JQuery Navigation - Aktives / Inaktives Element

[MatthiasM2D]

Hallo zusammen,

aktuell versuche ich mittels Jquery eine Navigation zu erstellen. Dabei stellt sich mir folgendes Problem beim Ablauf.

1. User bekommt beim Mouseover auf Menüpunkt 1 einen SlideIn einer neuen Ebene. In dieser sollen sich entsprechend des Menüpunkst, Submenüpunkte finden. Soweit so gut.

Nun stehe ich aber vor folgendem Problem. Die Submenüs sind aktuell mittels css auf display:none gesetzt und bekommen bei mousenter eine display:block. Nur umgekehrt bekomme ich es nicht ganz hin. Immerhin soll das Submenu erst dann ausgeblendet werden wenn jemand:

1. auf einen anderen Menupünkt geht oder
2. die Navigation komplett verlässt

Anbei der Link (bitte nicht auf die Formatierung achten) es geht sich rein um den einfachen Effekt.



(Habe leider bisher kaum Erfahrung mit Javascript - JQuery)

Gruß
Matthias

 

[saila]

AW: JQuery Navigation - Aktives / Inaktives Element

Naja überleg doch mal. Wenn du auf dein Menüpunkt gehst, hat dieser ein Children oder nicht? Wenn ja soll das Kindelement angezeigt werden (show() oder toggle() oder ...). Geht er dann in das Kindelement muss dieses nach wie vor angezeigt werden. Also trifft der Mousover bei Menüpunkt als auch beim Submenü zu.

Und genau so verhält es sich umgekehrt.

 

[MatthiasM2D]

AW: JQuery Navigation - Aktives / Inaktives Element

Hi Saila,

danke für die prompte Antwort. Leider kann ich Dir nicht direkt folgen. Ich denke die Problematik liegt darin, das ich nicht nachhalte, welche Subnavigation aktiv ist und diese bei Aufruf einer weitern schließe. Oder denke ich da zu kompliziert? :hmpf:

Gruß

 

[saila]

AW: JQuery Navigation - Aktives / Inaktives Element

Die erste Frage die sich stellt ist, willst du die Navigation per Klick oder Mousover handeln?
Danach ist es relativ simple. Da ja eine Navigation per listen-tag aufgebaut ist (ul -> li), musst du nur prüfen, ob bei klick oder mousover das entsprechende Element ein Children hat also

Als Gedankenanstoss:

$('#ul > li').click( function() {
        firstChildUl = $(this).children('ul');
        if(firstChildUl) {
            $(firstChildUl).show();
        }
});

 

[Doitsu]

AW: JQuery Navigation - Aktives / Inaktives Element

Na ja, dann speicher doch die Subnavi, die gerade aktuell ist?
Sprich bei jedem Aufruf von mouseenter speicherst du den titel(class) in 'm2dselectedChild' (sofern die dafuer angelegt wurde). Zusaetzlich prueffst du am Anfang der Funktion, ob die Variable != null ist, wenn diese nicht Leer ist, ist schon eine Navi Aktiv ~> Diese ausblenden

$('#m2dnav-childs-'+m2dselectedChild).removeClass("active").css("display","none");)

Das gleiche machst du dann bei der '$('#m2dnav-childs').mouseleave'-Funktion, anschliesend setzt du 'm2dselectedChild' wieder auf null.

Edit:
@ saila, die Subnavi ist aber kein Kind-Element vom Toplevel, sondern wo anders auf der Seite positioniert.

 

[saila]

AW: JQuery Navigation - Aktives / Inaktives Element

Mom. geht es hier immer noch um active oder noActive, wenn man zuvor auf eine Top-Nav klickt?

 

[Doitsu]

AW: JQuery Navigation - Aktives / Inaktives Element

Wenn ich das richtig verstanden habe geht es darum, dass sich das Untermenue nicht ausblendet, wenn man auf einen anderen Toplevel geht. Allerdings soll das halt per Mouseover passieren, nicht durch einen Klick. Wobei ich den Aufbau der Navi allgemein etwas komisch finde, da ist deine Variante (das man das Secondlevel in den li-Tag vom Toplevel mach) sinnvoller. Allerdings wird es wohl einen Grund haben, dass er/sie es so macht.

 

[MatthiasM2D]

AW: JQuery Navigation - Aktives / Inaktives Element

Na ja, dann speicher doch die Subnavi, die gerade aktuell ist?
Sprich bei jedem Aufruf von mouseenter speicherst du den titel(class) in 'm2dselectedChild' (sofern die dafuer angelegt wurde). Zusaetzlich prueffst du am Anfang der Funktion, ob die Variable != null ist, wenn diese nicht Leer ist, ist schon eine Navi Aktiv ~> Diese ausblenden

$('#m2dnav-childs-'+m2dselectedChild).removeClass("active").css("display","none");)

Das gleiche machst du dann bei der '$('#m2dnav-childs').mouseleave'-Funktion, anschliesend setzt du 'm2dselectedChild' wieder auf null.

Edit:
@ saila, die Subnavi ist aber kein Kind-Element vom Toplevel, sondern wo anders auf der Seite positioniert.

Danke, genau das wars. Perfekt :lol: Hatte nicht daran gedacht direkt bei Aufruf des Mouseenter die alte subnavi auszublenden. Wobei das die einfachste und logischste Variante ist. Kommt davon wenn man stundenlang davor sitzt und den kopf nicht mehr frei hat