Nico R.: hover "deaktivieren" nach Seitenaufruf

Hallo zusammen,

ich schon wieder. Ich versuche gerade meine Seite von jQuery zu befreien.

Unter anderem will ich mein Aufklappmenü rein mit CSS und hover umsetzen. Neben ein paar unschönen Hackeleien beim Aufklappen (das war mit jQuerys slideDown() dann doch wesentlich einfacher) hab ich vor allem das Problem, dass, wenn ich über einem Hauptmenüpunkt bin, somit das Untermenü aufklappt und ich dann auf den Hauptmenüpunkt klicke, beim Aufruf der Unterseite das Untermenü wieder aufklappt, weil ich mit der Maus ja noch an der selben Position auf dem Hauptmenü bin. Das hab ich mit JS verhindert, indem ich eine flag (mouseover/mouseenter) gesetzt habe und das slideDown() in dem Fall nicht ausgelöst hat.

Ich sehe gerade, dass in dem JS-Teil doch relativ "viel" Funktionalität drin steckt. Das kann CSS also auf diese Weise wohl nicht. Aber vielleicht gibts ja 2024 schon eine viel einfachere Lösung?

Gruß Nico

  1. Hallo Nico R.,

    denke daran, dass dein Menü auch per Tastatur bedienbar sein muss. Mit reinem :hover geht das nicht.

    Ein bedienbares, zugängliches Menü ohne Javascript habe ich noch nicht gesehen.

    Rolf

    --
    sumpsi - posui - obstruxi
    1. Hallo Rolf,

      ich glaube die Frage war auch überflüssig. Es ist eigentlich klar, dass es dafür JS braucht. Was die Tastaturbedienung angeht: Mit Klick auf den Hauptmenüpunkt öffnet sich die Unterseite und die Untermenüpunkte werden sichtbar. Man kann es als Komfortfunktion sehen, dass Mausbenutzer das Untermenü quasi schon vorab sehen und sich direkt einen Untermenüpunkt wählen können.

      Gruß Nico

  2. Servus!

    Hallo zusammen,

    ich schon wieder. Ich versuche gerade meine Seite von jQuery zu befreien.

    Sehr gut! Viele Funktionen sind in „normales“ JavaScript übernommen worden, sodass solche Frameworks überflüssig geworden sind.

    Ich sehe gerade, dass in dem JS-Teil doch relativ "viel" Funktionalität drin steckt. Das kann CSS also auf diese Weise wohl nicht. Aber vielleicht gibts ja 2024 schon eine viel einfachere Lösung?

    Schau Dir mal diesen Kurs an:

    • Navigation
      • die Grundstruktur kannst du ja mal überfliegen
      • inklusives Dropdown-Menü
        Jedes li, das ein weiteres ul enthält, erhält mit JS einen Button. Vielleicht kannst du es nutzen / etwas abgucken.

    Herzliche Grüße

    Matthias Scharwies

    --
    Die Signatur findet sich auf der Rückseite des Beitrags.