↓
 

Individuelles Menü in der Sidebar zum aufklappen

WP Bistro Gepostet am in der Kategorie Menüs, Tutorials | 42 Replies

Zuletzt aktualisiert am 24. August 2019 um 11:13 Uhr

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;}

Teile diesen Beitrag mit Deinem Netzwerk

Einladung zum Weiterstöbern

  1. Reihenfolge von Seiten im Navigationsmenü ändern – Ein individuelles Menü erstellen
  2. Social Media-Profile mit Icon im Menü verlinken
  3. Platzhalter für Seiten in die Navigation einfügen
  4. Polylang für mehrsprachige Websites – Teil 2

Über Michaela

Michaela Steidl ist Gründerin des WP Bistros. Seite 2011 unterstützt Sie Selbstständige und Unternehmer dabei, Ihre WordPress-Websites selbst zu pflegen und zu administrieren.

Kommentare

Individuelles Menü in der Sidebar zum aufklappen — 42 Kommentare

  1. 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. 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 ↓

    • 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 ↓

      • 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. 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. 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. 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 ↓

      • 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. 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 ↓

    • 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 ↓

  11. 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. 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 ↓

    • 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 ↓

      • 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. 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. 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 ↓

    • 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 ↓

  19. 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 ↓

    • 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 ↓

    • 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. 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 ↓

  25. 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 ↓

Schreibe einen Kommentar

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

HTML tags allowed in your comment: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

↑