Mobiles Menu mit individuellen Links

Hallo,

ich verzweifele gerade an einem Mobilen Menu. Hierfür ist in WP ein extra Menü eingerichtet, hier zu sehen:

https://rooosh.com/sandbox/fairsichert

Das Menü hat 4 Punkte, Menüpunkt 2 und 3 sind als Individuelle Links angelegt (#) und haben Submenüs. Nun wird beim durchklicken auf Menüpunkt 2 das Untermenü von Punkt 3 angezeigt. Warum zeigt mir WP hier die falschen Menüunterpunkte an??

Jemand ne Idee ...

Also statt eines Individuellen Links den Menüpunkt doch als Seite nehmen ... nur wie bekommt man es dann hin, dass jeder Menüpunkt, der Kindelemente hat, nicht anklickbar ist ?

Naja, auf diese Weise hatte ich es auch schon (hab es jetzt wieder so eingestellt), so dass das jeweils erste Kindelement "Übersicht Versicherungen" bzw. "Übersicht Service-Center" ist. Ändert aber am eigentlichen Problem nichts, da beim anwählen von Versicherungen immer noch die falschen Untermenüpunkte sichtbar sind. Anscheinend funktioniert das mit dem Individuellen Link und die URL auf leer setzen nur 1x.

Muss wohl doch 'n anderer Workaround her. Vielleicht dem link ne Klasse mitgeben und das Click-Event per Javascript abfangen. Hat jemand ein Script zur Hand...

Also im Endeffekt soll die mobile Navi funktionieren wie hier: https://www.mibrag.de/de-de

Im Grunde sind sämtliche Submenüs nebeneinander und die einzelnen Ebenen wandern per Klick nach links oder rechts. Ich orientiere mich an diesem Beispiel. Das hin und her switchen scheint über die Klassen inactive und active per toggle zu funktionieren. Aktuell habe ich das für die 1. und 2. Ebene so auch eingestellt, nur funktioniert das mit dem Click-Event noch nicht, scheint mir im Beispiel auch keine reine CSS-Lösung zu sein.

Es wird momentan der a Tag vom Listenelement (Ebene 1) angesprochen:

<script>
        $('#m_menu .menu-item-has-children.level-1 a, .back').click(function() {
            $('.level-u1').toggleClass('inactive'),
            $('.level-u2').toggleClass('active');
        });
    </script>

inactive auf ul und

active auf ul > li > ul

Vielen Dank für deine/eure Hilfe. Ich nähere mich dem Ziel. Ich werde das Menü nun mal vervollständigen und versuchen, das Ganze bis zur letzten Ebene anzupassen. Wenn ich statt mit der # mit vollständigen URLs arbeiten möchte, müsste ich glaube mit

.attr('href', '#')

o.ä. arbeiten. Ist dann wohl aber egal.

Und ne nee, die Übersichtsseiten werden noch mit Inhalt befüllt. Das extra Kindelement mit "Übersicht ..." muss daher bleiben.
Ich würde das finale Handling posten, wenn's wen interessiert.

So, nun kann ich im Mobilen Menu von level-u1 bis level-u3 mich durchklicken, auch von level-u2 zurück zu level-u1 funktioniert. Das einzige was imo nicht geht, ist von level-u3 zurück zum richtigen level-u2. Das jeweilige umschalten in den Submenus von 'active' und 'inactive' und umgekehrt ist vorhanden. Beispeil-Klickstrecke wäre Versicherungen/Krankversicherungen/zurück

Hier nochmal der Link zur Seite

Derzeit steht folgendes zur Verfügung:

<script>
        $('.mobile-menu .menu-item-has-children.level-1 a').click(function() {
            $('.level-u1').addClass('inactive'),
            $(this).closest('.level-1').find('.level-u2').toggleClass('active');
        });
        $('.mobile-menu .menu-item-has-children.level-2 a').click(function() {
            $('.level-u2').addClass('inactive'),
            $('.level-u2').removeClass('active'),
            $(this).closest('.level-2').find('.level-u3').toggleClass('active');
        });
        $('.mobile-menu .level-u2 .back a').click(function() {
            $('.level-u1').removeClass('inactive'),
            $('.level-u2').removeClass('active');
        });
        $('.mobile-menu .level-u3 .back a').click(function() {
            $('.level-u2').removeClass('inactive'),
            $('.level-u3').removeClass('active'),
            $('.level-u1').addClass('inactive'),
            $('.level-u2').addClass('active');
        });


    </script>

Vermutlich geht das ganze auch einfacher. Bin leider nicht so der jQuery-Kenner. Von level-u3 zurück zu level-u2 fehlt mir imo der entscheidende Befehl, um das jeweils richtige Eltern Submenu zu erwischen. Meine bisherige Suche für den richtigen Schnipssel Code blieb erfolglos. Ich hoffe, es ist verständlich, wie das Handling letztlich sein soll. Falls nicht, kurz bemerkbar machen.