1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Mobiles Menu mit individuellen Links

Dieses Thema im Forum "Konfiguration" wurde erstellt von Scorcho, 5. März 2017.

  1. Scorcho

    Scorcho Well-Known Member

    Registriert seit:
    16. April 2014
    Beiträge:
    76
    Zustimmungen:
    0
    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 ...
     
  2. helix

    helix Well-Known Member

    Registriert seit:
    28. Juli 2011
    Beiträge:
    1.808
    Zustimmungen:
    27
    Ideen immer viele. Aber wenn man nicht weiß, wie du das Menü tatsächlich gebaut hast, haben die Ideen eher den Charakter von Mutmaßung.

    Mutmaßung ist: du versuchst, über das Ankerzeichen # deine Submenüs zu triggern. Aber # und # ist irgendwie das Gleiche. Woher soll der Browser dann wissen, welches Submenu? (… und nimmt das letzte – oder so ähnlich …)

    Gruß
    helix
     
  3. Scorcho

    Scorcho Well-Known Member

    Registriert seit:
    16. April 2014
    Beiträge:
    76
    Zustimmungen:
    0
    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 ?
     
  4. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    7.951
    Zustimmungen:
    846
    Workaround ohne Scripts o.ä.: Benutze das jeweils erste Kindelement als Menüpunkt 2 bzw. 3 (und benenne es entspr. um) und füge es dann nochmals als Kindelement ein wie bisher.
     
  5. Scorcho

    Scorcho Well-Known Member

    Registriert seit:
    16. April 2014
    Beiträge:
    76
    Zustimmungen:
    0
    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...
     
  6. helix

    helix Well-Known Member

    Registriert seit:
    28. Juli 2011
    Beiträge:
    1.808
    Zustimmungen:
    27
    Wenn du bitte mal die implizit enthaltenen Fragen beantwortest?
    Erklär doch bitte mal, mit welcher Technik du versucht hast, diesen „Trigger“ im mobilen Menü zu setzen.

    Oder nochmal andersrum und ausführlicher:
    Um einigermaßen nachzuvollziehen, was du da gemacht hast und was das sein / geben soll, habe ich mir deine Seite in zwei Browserfenstern nebeneinander geöffnet, einmal größer, einmal kleiner, so dass das minimierte Menü zum Einsatz kommt.

    Im Moment ist es so, dass die Hauptmenüpunkte in der Navigation zu einer Seite führen, auf der aber nur Beispielinhalt steht. Sieht so aus, als ob die gar keinen Inhalt bekommen sollten. Wenn das so ist, wäre drüber nachzudenken, auch im Desktopmenü so einen blinden Bezeichner (mit der #) einzusetzen.

    Damit hast du nun natürlich – zunächst – das Problem, dass du für die Touchscreen-Geräte kein Mouse-Over zur Verfügung hast und die Navigation per Klick auf das Hauptmenü-Element die Unternavigation öffnen muss. – Es sei denn, du entscheidest dich für eine Lösung, in der in der mobilen Version mit Klick auf das Hamburger-Symbol gleich alle Menüpunkte angezeigt werden, gegliedert, d.h. die Subnavigation eingerückt oder sonst irgendwie als sub kenntlich gemacht.

    Wenn man das so macht, dass sich die Sub-Navigation auf Klick auf den Hauptpunkt öffnen soll, wird das im Allgemeinen mit einem JavaScript oder mit JQuery umgesetzt.
    Mir scheint, das wolltest du aus irgendeinem Grund umgehen?
    Damit wir uns nicht missverstehen: ich bin ein großer Fan von reinen CSS-Lösungen ohne JQuery oder JavaScript. Ich weiß aber nicht, ob es hier so eine Lösung gibt. Oder wenn, ob die nicht rather kompliziert ist …

    Deswegen bitte: Wie hast du denn versucht, das umzusetzen? Mit target-Funktion?

    Und ansonsten für die Lösung über ein JavaScript oder JQuery: Da gibt es wirklich Vieles. Versuch es doch mal mit Suchbegriffen wie „js submenu on click“. Evtl. direkt auf diesen Script-Plattformen wie CodePen etc. suchen.

    Gruß
    helix
     
  7. Scorcho

    Scorcho Well-Known Member

    Registriert seit:
    16. April 2014
    Beiträge:
    76
    Zustimmungen:
    0
    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.
     
  8. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.341
    Zustimmungen:
    417
    Womit hast du denn den Toggle umgesetzt? Poste mal das Script dazu. Ich vermute im Script wird nur .sub-menu angesprochen und somit werden alle getoggelt.
     
  9. Scorcho

    Scorcho Well-Known Member

    Registriert seit:
    16. April 2014
    Beiträge:
    76
    Zustimmungen:
    0
    Es wird momentan der a Tag vom Listenelement (Ebene 1) angesprochen:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    inactive auf ul und

    active
    auf ul > li > ul
     
  10. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    7.951
    Zustimmungen:
    846
    Das toggleClass in der aktuellen Form wirkt auf alle vorhandenen .level-u1 bzw. .level-u2 der gesamten Seite.

    Würde $(this).closest('.level-1').find('.level-u2').toggleClass(.. o.ä. nutzen, damit man nur die Children des jeweils geklickten .level-1 a erwischt. Das .back sollte man da erstmal rausnehmen und getrennt behandeln.
     
    #10 b3317133, 6. März 2017
    Zuletzt bearbeitet: 6. März 2017
  11. Scorcho

    Scorcho Well-Known Member

    Registriert seit:
    16. April 2014
    Beiträge:
    76
    Zustimmungen:
    0
    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
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    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.
     
  12. Scorcho

    Scorcho Well-Known Member

    Registriert seit:
    16. April 2014
    Beiträge:
    76
    Zustimmungen:
    0
    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:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    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.
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden