CSS: Megamenü nach Aufruf der neuen Seite ausblenden

[boomroot]

Hallo,

da ich diese Funktion nur schlecht umschreiben kann, möchte ich es einmal mit Screenshots erklären.

Wenn der Navigationspunkt "Taschen & Accessoires" gehovert wird soll, das Megamenü angezeigt werden.

menue_hover.png

Bin ich auf der Unterseite "Taschen & Accessoires" soll das Menü ausgeblendet sein. Obwohl es noch im Hover-Zustand ist.

menue_active.png

Wie setzt man sowas um? Eine Standardlösung scheint es nicht zu geben. Oft läd das Menü erst später nach. Das liegt aber wohl am Pagespeed.

Könnt ihr helfen?

[Andreas]

Da müsstest du wohl erstmal die Erweiterung nennen, welche du im Einsatz hast - am besten mit Link dorthin. Und dann hilft da wohl nur ein Link auf die Seite mit dem Problem.

[boomroot]

Hallo Andreas,

ich nutze die Erweiterung "megamenu". Und ein Problem ist es nicht direkt. Mich interessiert es nur, weil mir nie vorher aufgefallen ist, dass es unterschiedlich gehandhabt wird.

Gruß
Boomroot

[Andreas]

Es wird nicht unterschiedlich gehandhabt. Wenn du hoverst klappt es auf und wenn du nicht hoverst ist es zugeklappt. Auch bei Zalando.

[boomroot]

Das Stimmt nicht. Nachdem die Seite "Taschen & Accessoires" aufgerufen wurde, ist kein Hover aktiv.
Erst wenn ich mit der Maus zu einem anderen Punkt und zurück navigiere, erscheint wieder ein Megamenü.

[Andreas]

Bei mir ist das nicht so.

[dazzle89]

Verstehe es nicht ganz.

Egal ob ich auf der Seite "Taschen & Accessoires" oder auf einer anderen Seite bin, es wird mir IMMER das Menü angezeigt, wenn ich mit der Maus drüber fahre.

Möchtest du, dass "Taschen & Accessoires" das Untermenü beim Hovern NICHT anzeigt, wenn du dich auf der Seite befindest?

Falls ja, musst du dich an den CSS-Klassen bedienen, die Contao generiert. Das wäre zum einen "active" und bei Bedarf auch noch die "trail"-Klasse.

[boomroot]

Ich habe mal einen Screencast erstellt. Es geht darum, dass wenn ein Seitenwechsel stattfindet, man in der Regel die Maus ja nicht bewegt und das auf der Unterseite das Menü nicht direkt angezeigt werden soll.

http://wmdev.de/screencast.mp4

PS: Das ist keine Schleichwerbung für Zalando

[dazzle89]

Ahhh jetzt verstehe ich es aber ist ja normal, dass der Mauszeiger nach Seitenwechsel an seiner aktuellen Position einen Hover triggert, in diesem Fall beim Menü.

Eventuell kannst du das umgehen, indem du per Javascript das hovern verhinderst?

Bei stackoverflow habe ich mal folgendes gefunden:

$("a").mouseover(function(event) {
  event.preventDefault();
  // Run any other needed code here
});

(function(){
  $("a").unbind('mouseover');
}).delay(2000); // delay 2 seconds

Müsstest du dann natürlich so anpassen, dass es sich nur auf deine Navigation bezieht und statt 2 Sekunden nimmst du am besten nur ein paar Millisekunden.

[boomroot]

Darauf bin ich tatsächlich noch nicht gekommen. Ich wusste auch nicht wonach ich googlen soll. Vielen Dank für den Denkanstoß.

[Andreas]

Trotzdem ist das bei mir nicht so. Bei mir ist das Hovermenü sofort aufgeklappt, wenn ich die Maus dort lasse, wo ich die neue Seite aus dem ersten Level aufrufe. Siehe auch hier https://demo.rocksolidthemes.com/contao/tao/home, weil bei Zalando bestimmt nicht das Megamenu benutzt wird.

Normalerweise benutzt man mit JS auch nicht den mouseover Event, sondern den mouseenter und den mouseleave, weil der nur einmal feuert.