Mobiles Menü - Unterpunkte direkt ausklappen bei Klick auf Haupt-Menüpunkt

  • Ich nutze das Layout Top-Responsive und habe Haupt-Menüpunkte mit Untermenüpunkten.

    Beispiel: Leistungen --> Leistung 1 ...

    In der Desktop Variante wird wie im Layout vorgesehen bei Mouseover unter "Leistungen" die Untermenüpunkte direkt angezeigt.

    Den Klick auf den Hauptmenüpunkt "Leistungen" selbst habe ich durch eine interne Verlinkung auf "#" tot geschaltet, da man in der

    Desktop-Variante direkt durch Mouseover die einzelnen Leistungen als Untermenüpunkte sieht und dann entsprechend diese anklickt.

    Ich benötige daher den Hauptmenüpunkt nur als Anzeige / Link Darstellung für die Untermenüpunkte. Ich möchte auch nicht extra

    eine Seite deswegen erstellen müssen.

    Das Problem in der mobilen Variante ist nun aber, dass man im mobilen Menü erst auf den Pfeil rechts daneben klicken muss, um die

    Untermenüpunkte zu sehen. Klickt man auf "Leistungen" passiert nichts bzw. es klappen sich NICHT die Untermenüpunkte aus, weil

    dieser Menüpunkt ja durch "#" tot gestellt ist.

    Wie bekomme ich es durch einen Code z.B. mit JS hin, dass sich die Untermenüpunkte in der mobilen Fassung bei Klick auf den

    Hauptmenüpunkt direkt ausklappen und nicht erst auf den Pfeil? Man müsste quasi den Code des "Pfeils" auf den Untermenüpunkt

    übertragen.

    Hat jemand eine Idee und kann helfen?

  • Hallo,

    der Code des "Pfeils" ist nicht so einfach auf den Hauptmenüpunkt anwendbar.

    Sie könnten aber via eigenes CSS das Click-Event der Hauptmenüpunkte (mit Unzterseiten) deaktivieren.

    Somit würde im mobilen Menü bei Klick auf einen Hauptmenüpunkt einfach nicht passieren und der Besucher muss auf den Pfeil klicken.

    Ohne das eigene CSS verschwindet das mobile Menü ja einfach.

    Bzgl. dem eigenen CSS bitte mal folgende Seite lesen: https://docs.zeta-producer.com/eigenes-css-einfuegen.html

    Folgender Code sollte funktionieren:

    Code
    <style>
    #navigation ul li.haschilds > a {
        pointer-events: none;
          cursor: pointer;
    }
    #navigation ul li.haschilds > a span {
        pointer-events: auto;
    }
    </style>

    PS: Die interne Verlinkung auf "#" könnten Sie dann auch entfernen, da das CSS den Klick ja deaktiviert.

    Freundliche Grüße
    Steffen T. (Zeta Producer-Support)

  • Alternativ machen wir es oft so, dass wir die Haupseite in den Seiteneigenschaften auf die erste Unterseite umleiten.

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!