jQuery .hover

[kayyy]

Guten Abend,

ich möchte gerade ein Dropdown Menü umsetzen, welches von der Funktion her aufgebaut ist, wie das von Amazon.
Nun geht auch bei mir, bei einem hover das Dropdown Menü nach rechts auf.

Mittels CSS geht es ja eigentlich nicht, da das Dropdown Menü ja wieder verscheindet, sobald ich vom Hover weg bin.
Nun habe ich mir gedacht, ich mache es, indem ich per jQuery beim hover eine Class zuweise, die das Dropdown Menü auf display:block; schaltet.

    $("ul.categories li").hover(function() {
        $(this).addClass("nav_active");
        }, function() {
        $(this).removeClass("nav_active");
    });

Allerdings habe ich hier das gleiche Problem natürlich, dass wenn ich von dem li der ersten Ebene runter bin, dass Dropdown wieder verschwindet. Wie bekomme ich es hin, dass die Class auch bleibt, wenn ich noch über das Dropdown Menü gehe und eben erst wieder weg geht, wenn ich das Dropdown verlasse ?

 

[Tronjer]

Die obige Funktion tut nichts, was man mit CSS nicht auch bewerkstelligen könnte: Sie added/removed die selben Styles beim Hovern. jQuery ermöglicht es aber, unterschiedliche Aktionen für mouseenter() und mouseleave() festzulegen, und diese müssen sich auch nicht auf den selben Selektor beziehen.

Formuliere deine Anforderungen und setze sie anschließend in Funktionalität um:

Wenn (der Cursor über ul.categories li ist)
dann hänge dem aktuellen Objekt die Klasse nav_active an

Wenn (der Cursor ul.categories verlässt)
dann schau, ob eines der Child-Elemente die Klasse nav_active besitzt und entferne sie

 

[Yastynu]

Ich würde behaupten, dass man ein Drop-Down-Menü sich auch vollständig mit CSS bewerkstelligen lässt.

#nav ul {
    list-style: none;
    display: inline-table;
    position: relative;
}

#nav ul:after {
    content: "";
    display: block;
    clear: both;
}

#nav ul li { float: left; }

#nav ul li a { display: block; }

#nav ul li:hover > ul { display: block; }

#nav ul ul {
    display: none;
    position: absolute;
    top: 100%
}

#nav ul ul li {
    float: none;
    position: relative;
}

Dieses Stylesheet erfüllt die Aufgabe vollständig und ohne zu murren.

 

[kayyy]

Vielen Dank für eure Antworten.
Allerdings will das ganze nicht so wirklich.

Hier ist einmal mein Shop, den ich gerade am aufbauen bin.

http://shopware.hostianer.de/nginx-ssd-hosting/privat/273/privat?c=76

Bei der linken blauen Navigation seht Ihr dann das Hover Dropdown Menü, welches aber verschwindet, sobald man natürlich den Bereich verlässt.

 

[Tronjer]

Ich hatte dir oben doch einen Ansatz genannt. Überlege dir, was die Funktion genau machen soll und setze das anschließend in Code um. Im Gegensatz zu CSS Hover kannst du mit jQuery auch unterschiedliche Elemente adressieren.