Banner - WP Bistro Sparringspartner für WordPress

Individuelles Menü in der Sidebar zum aufklappen

Verfasst von

MSteidl

in

,

Vor einiger Zeit hatte ich hier im Blog erklärt, wie man für seine WordPress-Seite ganz einfach ein individuelles Menü anlegen kann.

Manchmal möchte man ein individuelles Menü in der Seitenleiste (Sidebar) seines Themes unterbringen, und dann stört es gelegentlich, wenn die Unterseiten direkt sichtbar sind.

Wenn Sie die Unterseiten erst beim anklicken des übergeordneten Menüpunktes sichtbar machen möchten, können Sie das ganz einfach mit dem folgenden kleinen Code erreichen, den Sie einfach in der Custom-CSS-Sektion Ihres Themes eintragen. (Hinweis: Sollte Ihr Theme keine Custom-CSS-Sektion haben, empfehle ich das Plugin PC Custom CSS. ) Dieser Hinweis ist nicht mehr notwendig, da die Custom CSS in WordPress zwischenzeitlich Standard ist.

.sub-menu {display: none;}
.current_page_item .sub-menu, .current_page_parent .sub-menu {display: block;}

Kommentare

42 Kommentare zu „Individuelles Menü in der Sidebar zum aufklappen“

  1. Michael Marheine

    Danke, das kann bestimmt mal gebrauchen, wenn man dann anfängt zu suchen, ist es meist zu spät!

    Schöne Tage noch bis zu einem fulminanten 2014,

    Michael Marheine

    Autor Michael Marheine bloggt auf diversen eigenen Plattformen zu den Themen Social Media und Online-Marketing, SEO sowie E-Mail-, Video-, Affiliate- und Mobile Marketing etc., durchlebte alle Stufen vom Angestellten. Startup, Selbständigen, erfolgreichen Unternehmer bis hin zum Unabhängigen (Unternehmer).

    Antworten
  2. Jonathan Panther

    Hallo!
    Ich habe es bei dem gelben Menü an der Seite über PC Custom CSS versucht, aber bei mir passiert nichts, wenn ich den entsprechenden Code eingebe. Wie kann ich dem Abhilfe verschaffen?

    Antworten
  3. Michaela Steidl

    Hallo Jonathan, hast Du evtl. einen Link zu der Website?

    Antworten
  4. Bibo

    Hallo Michaela,
    vielen Dank für diesen Artikel !!!
    Endlich mal ein Code, den ich auch gebrauchen konnte !!!
    Danke noch einmal !!!

    LG
    Bibo

    Antworten
    1. Michaela Steidl

      Da ist mir doch glatt Dein Kommentar durchgerutscht 🙂

      Aber besser spät als nie: Danke für Dein Feedback. Ich freue mich immer, wenn meine Artikel hilfreich sind 🙂

      Antworten
  5. Helmuth

    Ich hatte so gehofft es würde funktionieren 🙁 – tut es leider nicht und ich suche schon lange nach so einer Lösung

    Antworten
    1. Michaela Steidl

      Hallo Hemuth,

      es tut mir leid, wenn dieser Code nicht das ist, was Du gesucht hast.

      Je nachdem was Du vorhast, vielleicht ist dieses Plugin für Dich hilfreich: http://wordpress.org/plugins/gecka-submenu/

      Herzliche Grüße
      Michaela

      Antworten
      1. Helmuth

        Hallo Michaela,
        bei mir sind die Menüs in der Sidebar und ich möchte dass nur die übergeordneten Menüs zusehen sind und dann auf Klick die jeweiligen Unterseiten sichtbar werden.
        So ist es ja oben beschrieben. Nun hat meine Theme anscheinend keine Custom Section, daher habe ich das von dir empfohlene plugin installiert. Klappt aber nicht und ich hab keinen Plan warum nicht.

        Antworten
  6. Michaela Steidl

    Hallo Helmuth,

    wenn der Code aus diesem Beitrag bei Dir nur nicht funktioniert, weil Du keine Custom CSS – Section in Deinem Theme hast, dann kannst Du auch das Plugin PC Custom CSS installieren, das integriert eine Custom CSS-Section in Deine WordPress-Installation.

    Bekommst Du bei dem Plugin Gecka einen Fehlerhinweis? Wie hast Du das Widget dazu eingerichtet?

    Herzliche Grüße
    Michaela

    Antworten
  7. Helmuth

    Hi Michaela,

    das Gecka habe ich gar nicht installiert. So wie ich das Video verstanden habe, erhalte ich animierte Dropdown Menüs im Titel die dann die Submenüs bei Bedarf öffnen.
    Ich möchte die Sidebar dafür nutzen, da es im Titel etwas eng werden würde und nicht mehr schön aussieht.
    Das plugin PC Custom CSS habe ich drin, den Code habe ich dort genau so eingetragen wie er oben steht, Fehler kam auch keiner, aber Ergebnis halt auch nicht.
    Viele Grüße und schöne Feiertage
    Helmuth

    Antworten
  8. Michaela Steidl

    Hallo Helmuth,

    schau mal, hier kannst Du Dir das Gecka im Einsatz anschauen: http://ur-consulting.com – z.B. auf der Seite „UR Solutions“ oder der Unterseite „Ergonomie“.

    Ich hatte Deine Frage so verstanden, dass Du so etwas suchst?

    Antworten
    1. Helmuth

      Hallo Michaela,

      eben genau nicht. Ich möchte es gerne in der Sidebar und nicht im Titel haben.
      Schöne Ostern
      Helmuth

      Antworten
      1. Michaela Steidl

        Hm … okay. Ich stehe da wohl wirklich auf der Leitung. Das Submenu bei ur-consulting für die Seite UR Solutions oder für Ergonomie ist doch in der Sidebar (links) und nicht im Titel?

        Sorry, wenn ich Dir nicht helfen konnte.

        Antworten
  9. Helmuth

    Hall Michaela,

    das ganze Menü bei ur-consulting ist im Titel, die haben gar keine Sidebar. Kann ich dir mal den Link zu der Seite senden ?

    Antworten
    1. Michaela Steidl

      Jetzt war ich doch wirklich ein wenig verwirrt – Schließlich habe ich die Seite selbst erstellt und ich weiß, dass es da eine Sidebar gibt 🙂

      Die ist lediglich auf der Startseite nicht zu sehen. Aber wenn Du z.B. im Menü „UR Solutions“ auswählst, dann siehst Du in der Sidebar alle Unterseiten zu UR Solutions als separates Menü in der Sidebar.

      Dass die Seiten trotzdem auch in Navigation oben auftauchen liese sich relativ einfach abschalten, war aber im Fall dieser Kundin nicht gewünscht.

      Antworten
  10. Helmuth

    Hallo Michaela,
    danke für die viele Mühe.
    Ich habe es nun nachverfolgen können, aber es funktioniert nicht. Möglicherweise kann das plugin nicht mit WP 3.9. Das plugin scheint älter zu sein, denn die letzte WP Version auf die Bezug genommen wird ist Version 3.1.
    Ich habe auf Vorschlag von WordPress dieses plugin versucht (http://wordpress.org/plugins/nextend-accordion-menu/installation/) und das tut nun 🙂
    Viele Grüße
    Helmuth

    Antworten
    1. Michaela Steidl

      Hallo Helmuth, schön, dass Du nun eine Lösung gefunden hast! 🙂

      Antworten
  11. Silvi

    SUPER ich habe genau diese Funktion gesucht und damit funktioniert es bestens.
    Eine Frage noch…Ich würde gerne z.b. Listenpunkte vor die Navigationsnamen setzen, kann ich das auch in diesem CSS Schnipsel erledigen, wenn ja wie 🙂

    Antworten
  12. Florian Hartig

    Bei mir hat die gezeigte Lösung leider nicht funktioniert. Ich hab etwas rumgebastelt und glaube, das ist recht robust:

    /* Widget-Navigation klappbar machen */
    #MENUID .sub-menu { display: none; }
    #MENUID .current_page_item,
    #MENUID .current_page_item > .sub-menu,
    #MENUID .current_page_ancestor,
    #MENUID .current_page_ancestor > .sub-menu,
    #MENUID .current_page_ancestor > li { display: block; }

    #MENUID ist dabei die ID des äußersten UL des eingebundenen Menüs. Der Name wird in etwa so gebildet: #menu-

    Vielleicht hilft das ja wem 🙂

    Antworten
    1. Michaela Steidl

      Hallo Florian,

      vielen Dank, dass Du Deinen Lösungsansatz hier teilst. Das finde ich wirklich großartig 🙂

      Herzliche Grüße
      Michaela

      Antworten
    2. Ralf Reymann

      Danke an Florian, das ist genau was ich gesucht habe! Der oben auf der Seite genannte Abschnitt hatte bei mir nur tlw. funktioniert, weil mein Menü 3 Ebenen hat, die nacheinander aufklappen sollten. Mit dem Code von Florian funktioniert es nun. Schade das ich das erst nach mehreren Stunden selber ausprobieren gefunden habe 😉

      Antworten
      1. Michaela Steidl

        Das ist toll Ralf! Und auch von mir nochmal ein Danke an Florian, dass er seine Lösung hier geteilt hat. Das ist der Grund, dass ich meine Leser und die Kommentatoren hier so gern mag 🙂

        Antworten
  13. Florian Hartig

    Muss zugeben, dass ich auf der Suche nach einer Lösung zum erstenmal hier vorbeigekommen bin. War auch die einzige Seite mit einem sinnvollen Ansatz, da beteiligt mans ich doch gern 🙂

    Mein Ansatz hat natürlich auch einen Nachteil (den er allerdings vermutlich mit allen reinen CSS-Lösungen teilt): Um in einen Unterpunkt zu kommen, muss man den Oberpunkt erstmal aufrufen. Auf Handys kann das lästig sein. Und man sieht auch nicht, welcher Punkt Unterpunkte hat 🙂

    Antworten
  14. Jmianuel

    Weiss jemand wie ich nach einem Absenden von einem Formular die Thank You Page nur und erst dann Sichtbar machen kann?

    Entweder erscheint sie als Unterpunktmenü oder gar nicht.

    Antworten
    1. Michaela Steidl

      Jmianuel, meinst Du, dass die Thank You-Page ganz aus dem Menü herausbliesen soll? Das kannst Du über „Design“ -> „Menü“ einstellen. Wenn Du darüber ein Menü anlegst und die Thank You-Page nicht einfügst, dann erscheint sie auch nicht im Menü.

      Antworten
  15. Hans

    Super Tipp!
    Lange gesucht – endlich gefunden.
    Danke Michaela!

    Antworten
    1. Michaela Steidl

      Hans, freut mich, wenn ich helfen konnte 🙂

      Antworten
  16. Hans

    Hallo Michaela,

    dein obiges Codebeispiel funktioniert nur bei zwei Ebenen der Navigation. Ich habe daher den Code vonn Florian Hartig (Kommentar vom 17.06.2014) verwendet und in einem Tutorial (Theme: Responsive) beschrieben:
    http://www.web266.de/tutorials/wordpress/handbuch-fuer-redakteure/navigation-menue/benutzerdefinierte-menues/menue-widget-zum-aufklappen/
    Dein Beitrag und Florians Website wurden als Quelle verlinkt.

    Antworten
  17. Michaela Steidl

    Hallo Hans,

    ganz herzlichen Dank für Deine Mühe und den Link.

    Herzliche Grüße
    Michaela

    Antworten
  18. Michael

    Hi Michaela,
    Ist zwar etwas älter, aber dennoch sehr brauchbar. Dein und Florians Code war genau das, wonach ich suchte…
    Gruß
    Michael

    Antworten
    1. Michaela Steidl

      Das freut mich, wenn auch meine alten Beiträge noch hilfreich sein können 🙂

      Herzliche Grüße
      Michaela

      Antworten
  19. Robert Flynn

    Hallo zusammen,

    Ich bin momentan leider noch ein absoluter Neuling was WordPress angeht, darum verzeiht mir die dumme Frage:
    Ich habe das nun versucht mit dem Anpassen der Sidebar. Der Code ganz oben auf der Seite hat leider mit Hilfe des Plugins PC Custom CSS nicht funktioniert.
    Bei dem Code von Florian weiß ich leider nicht genau wie ich die Menü-ID einzugeben habe. Habe es schon mit „#menu_id-2“, „#menu-2“, „#menu_id = 2“ und „#menu-id = 2“ probiert, geht leider alles nicht.

    Kann mir jemand weiterhelfen?

    Gruß
    Robert

    Antworten
  20. Hans

    Hallo Robert,

    guck mal hier:
    http://www.web266.de/tutorials/wordpress/handbuch-fuer-redakteure/navigation-menue/benutzerdefinierte-menues/menue-widget-zum-aufklappen/

    LG Hans

    Antworten
    1. Robert Flynn

      Vielen Dank schon mal für den hilfreichen Link.
      Hat mich leider noch nicht weiter gebracht.
      Ich habe mir den Quelltext meiner Startseite angeschaut und finde „ul id = menu-seiten“. Doch mit „#menu-seiten“ klappt das mit dem klappbaren Menü nicht.
      Was mache ich falsch?

      Antworten
  21. Hans

    Um welches Theme handelt es sich?
    Kannst du mal nen Link posten, damit wir uns das ansehen können?

    LG Hans

    Antworten
    1. Robert Flynn

      Ich muss mich entschuldigen.
      Nachdem ich den Haken gesetzt hatte, dass das Menü das primäre Menü ist funktioniert es nun.
      Schon mal ein riesen großes Dankeschön dafür. Freue mich sehr dass das endlich geht.

      Meine Seite: https://unrealdroid.ddns.net
      Theme ist das Twenty Fifteen
      Was mir allerdings noch auffällt ist, dass wenn ich z.B. auf „Mein PC“ klicke, werden mir die Unterseiten nicht automatisch angezeigt. Man muss erst auf den kleinen Pfeil rechts neben „Mein PC“.
      Ist das so korrekt?

      LG Robert

      Antworten
  22. Hans

    Zitat:
    Was mir allerdings noch auffällt ist, dass wenn ich z.B. auf „Mein PC“ klicke, werden mir die Unterseiten nicht automatisch angezeigt. Man muss erst auf den kleinen Pfeil rechts neben „Mein PC“.
    Ist das so korrekt?

    Das liegt daran, dass du Unterseiten zu „Mein PC“ erstellt hast; ist also normal.

    Antworten
    1. Robert Flynn

      Das hört sich so an als könnte man das auf andere Art und Weise schöner lösen?

      Antworten
      1. Hans

        Du kannst ja deine Seitenstruktur ändern. Dann sind alle Seiten in der ersten Ebene sichtbar.

        Antworten
  23. Robert Flynn

    Achso, naja deswegen mach ich ja Unterseiten.
    Vielen Dank für deine schnelle Hilfe Hans. Hat mir sehr geholfen 🙂

    Antworten
  24. Rebecca

    Herzlichen Dank, hast mir als Anfänger viel Zeit und Mühe erspart! 🙂

    Antworten
  25. Barbara S.

    Hallo an alle,

    ich bin auch noch ein ziemlicher Neuling, daher muss ich nochmal nachhaken. Wir haben ebenfalls mehrere Menüs in der Sidebar, die wir erst nach einem Klick auf den obersten Ordner öffnen möchten. Da bei den obersten Ordnern keine Seiten hinterlegt sind, sondern das individuelle Links sind, bei denen wir die URLs entfernt haben, funktionieren die o.a. Wege irgendwie nicht.
    Was müssen wir tun, damit die unteren Ebenen durch einen Klick auf die Pfeile geöffnet werden???
    Im Bereich der „Jugend“ ist eine Seite hinterlegt, diese sollte aber nur geöffnet werden, wenn man auch auf den Namen klickt. Beim Klick auf den Pfeil soll sich nur das Menü weiter öffnen.

    Hoffe ich habe mich einigermaßen verständlich ausgedrückt.

    Antworten

Antworte auf den Kommentar von Rebecca Antwort abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Weitere Beiträge