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

Vertikales Menü in Sidebar

Dieses Thema im Forum "Plugins und Widgets" wurde erstellt von pezi, 15. Dezember 2016.

  1. pezi

    pezi Well-Known Member

    Registriert seit:
    1. Mai 2016
    Beiträge:
    80
    Zustimmungen:
    0
    Hallo - wie der Titel sagt, möchte ich eins der, per WP erstellten Menüs vertikal in eine Sidebar geben.

    Ok, die geht theoretisch mit Bordmitteln (Widget -> Individuelles Menü), aber es fehlen dann etliche Dinge, wie die Ausklappanimation bei etwaigen Unterpunkten (da diese gleich allesamt dargestellt sind), das Styling usw.
    Ich möchte aber ein Menü einfach nur vertikal darstellen, aber eben mit den Features wie sie all die horizontalen Menüs haben.
    Leider sehe ich bei 99% aller Themes nur diese horizontalen Menüs, die klassische, seitliche, vertikale Buttonspalte scheint nicht mehr modern zu sein.

    Man könnte sich nun das ganze manuell bauen (zb. so, per jQuery menu od. ev. so wie hier), stylen und in eine sidebar.php einbauen - nur wie bekomme ich damit genau das gewünschte, per WP zusammengestellte Menü in diese Struktur?

    Also sowas sollte doch auch ein Plugin besser können - aber scheinbar nicht, ich hab keins gefunden ...
    Habe folgende getestet:
    1. Advanced Menu Widget (v0.4.1) by Ján Bočínec
    2. Advanced Sidebar Menu (v6.1.4) by Mat Lipe
    3. AllWebMenus WordPress Menu Plugin (v1.1.23) by Likno Software
    4. AV Sidebar Menu (v1.0) by Andrea Rosati, Vittorio Iovinella
    5. CodeFlavors Floating Menu (v1.1.5) by CodeFlavors
    6. Easy Sidebar Menu Widget (v1.0) by phpbits
    7. Gecka Submenu (v0.7.3) by Gecka Apps, Gecka
    8. jQuery Mega Menu (v1.3.10) by Lee Chestnutt
    9. Max Mega Menu (v2.3) by Tom Hemsley
    10. Navgoco Vertical Multilevel Slide Menu (v1.1.0) by Neil Gee
    11. Nextend Accordion Menu (v9.3.2) by Nextend
    12. SF Bootstrap Menu (v2.2) by Studiofreya AS
    13. SM Vertical Menu (v1.1.0) by Mahabubur Rahman
    14. Widget Menuizer (v0.5.8) by Cornershop Creative
    15. WP Mega Menu (v1.0.9) by AccessPress Themes
    16. WP-SAMW (v0.1) by Stephan Gärtner
    17. Inner Page Menu
    18. Custom Menu Wizard

    Leider sind einige davon so enorm veraltet, dass ich sie mir nicht am Livesystem einsetzen trauen würde, einige davon funktionieren ohnehin nicht und der Rest tut nicht was ich will. Ich will auch kein bloßes Accordion Menü, sondern eben mit seitlichem ausklappen. Dabei sind keine besonderen Animationen wichtig, es soll nur einfach die Submenüs beim Mausover ausklappen und beim Out wieder schließen. Wenn es den aktiven Punkt speichert wärs toll, aber wenn nicht, auch egal.

    Einzig Nr. 16, grad das einfachste würde tun was nötig ist, aber es ist eben auch nur ein "Accordion", mit slideUp(). Es öffnet nur auf click(function()), aber wenn man dies auf mouseover(function() ändert, dann auch so. Doch viel mehr geht damit auch nicht ...

    Ich kann mangels Englisch und großartigen Coder-Fähigkeiten da nicht viel machen, aber es interssiert mich va. wie man ein, per WP erstelltes Menü mit eigener Struktur verbinden könnte.

    Klar, am liebsten wär mir ein tolles Plugin mit dem man sein Wunschmenü entweder einfach zusammenklickt, oder eben die WP Menüs, etwa per Widget in due Sidebar bringt. Es darf auch was kosten, idF. sogar egal wieviel ...

    Danke für Tipps!
     
  2. helix

    helix Well-Known Member

    Registriert seit:
    28. Juli 2011
    Beiträge:
    1.808
    Zustimmungen:
    27
    Eigentlich, „normal“, macht man das mit schlichtem CSS …
    Und eigentlich sind diese Techniken inzwischen so weit verbreitet, dass es dafür auch deutschsprachige Tutorials geben sollte.
    Problem ist dann eher noch, jeweils die passenden Suchbegriffe zu finden und sich das zusammenzustückeln.

    Gruß
    helix
     
  3. pezi

    pezi Well-Known Member

    Registriert seit:
    1. Mai 2016
    Beiträge:
    80
    Zustimmungen:
    0
    Danke, aber CSS selbst würde ich schon schaffen, va. "schlichte" Varianten.

    Es geht mir A)
    um die Verbindung von eigenem CSS und dem WP Menü.

    Ja, Suchen tu ich immer lange bevor ich frage, aber die beiden besten Tipps hab ich eh verlinkt, und bez. WP Menüs, tja ich weiß nicht wo ich ansetzen soll.
    Aber irgendwie muss es ja gehen, irgendwie wird ja auch das "Standardmenü" mit CSS verbunden. Nur sobald man so ein WP Menü in woanders haben will hakts aus und Effekte, Stile sind weg ...

    oder B) um ein gutes Plugin dafür ...
     
  4. helix

    helix Well-Known Member

    Registriert seit:
    28. Juli 2011
    Beiträge:
    1.808
    Zustimmungen:
    27
    Wer nicht wagt, der nicht gewinnt. => Mach’s einfach.

    ---
    Einschub: ich glaube, dir ist eine Sache noch nicht klargeworden: In den meisten Themes ist eben ein Menü, die Hauptnavigation, wirklich gestalterisch ausgearbeitet.
    Man braucht aber nicht unbedingt eigene Klassen etc. im Menü, um ein x-beliebiges WordPress-Menü chic gestalten zu können. WordPress bringt nämlich eigentlich von Haus aus schon alles mit, was man braucht.
    ---

    Mein Ansatz wäre also: Pack dir dein Menü in deine Sidebar. Du kannst dafür ohne weiteres das Menü-Widget verwenden. (Wie gesagt, ich gehe davon aus, dass im MarkUp schon alles da ist; falls ich mich an dieser Stelle irre, wäre dann doch ein eigenes Menü für die Sidebar anzumelden – das ist aber auch nicht die Welt und haben etliche Copy-&-Paste-Programmierer vor dir schon erfolgreich hinbekommen.)

    Und dann kann es munter losgehen mit dem Stylen.
    1.) Kontrollieren: hängen da noch irgendwo Bulletpunkte, die du nicht haben willst? (Sowohl Widgets werden normalerweise als Listenelemente ausgegeben als auch die einzelnen Menüpunkte.) -> Mit Webentwickler-Werkzeug auslesen, welches Listenelement den Aufzählungspunkt mitbringt und dann ausschalten über list-style: none;
    2.) Unterebene bei Mouse-Over ein- und ansonsten ausblenden => erreichst du, indem du Aufzählungslisten innerhalb eines Listeneintrags ein display: none; gibst, bei Mouse-Over display: block;
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Damit schiebt es jedesmal beim Hovern die nachfolgenden Menüpunkte nach unten. Nicht schön, aber es arbeitet schon mal.

    Dann musst du dir drüber klar werden, wie und mit welchem Effekt deine Untermenüs jeweils eingeblendet werden sollen. Danach suchen – ggf. hier beschreiben und nochmal um Suchhilfe nachfragen – und einbauen.

    Gruß
    helix
     
  5. pezi

    pezi Well-Known Member

    Registriert seit:
    1. Mai 2016
    Beiträge:
    80
    Zustimmungen:
    0
    ist normal eh mein Motto - nur diesmal hab ich eben keinen Plan.

    ich kann 4 Menüs definieren, habe 4 Plätze dafür, je nachdem haben sie Styles ... und alle sind eben vertikal. Keins davon lässt sich in die Sidebar einfügen ohne diese Stile zu verlieren.

    das wär ja mein erster Ansatz gewesen.

    ja, hab ich eh auch probiert. Doch die Stile / Anims sind weg, egal ob das Menü einzigartig, nur für die Sidebar erstellt wurde, oder eins der anderen die eben an den, per Theme vorgegebenen Plätzen sind.

    ? Was soll ich von wo nach wohin kopieren? Hier fehlt mir eben der Ansatz.

    Wenn ich ein, per WP erstelltes Menü habe, erscheint es an der gewählten Stelle im Theme (in meinen Fall eben 4 Möglichkeiten (ober/unter Header/Footer)) und dort schauts super aus. Aber eben nur dort und nicht wo ich sie haben will.

    das ist kein so ein Problem, CSS kann ich seit es das gibt, ist halt ein Spielerei, je nachdem wie aufwändig es sein soll.
    Nur ich weiß eben keinen Anfang, wohin damit. Wie komme ich überhaupt an die Struktur heran, wo ist das Menü (dessen Quellcode) wirklich, wenn per Widget in eine Sidebar gestellt?

    Ich hab leider wenig Zeit für Experimente, daher wär mir für den Fall auch eine gutes Plugin wichtiger.

    Dennoch hab ich mal weiter gesucht und ein paar Dateien gefunden die wahrscheinlich damit zu tun haben. Sind aber im Core, doch ein Anhaltspunkt wie das mit den Menüs geht. Da gibts zB. ...\wp-includes\nav-menu.php u eine ...\wp-includes\nav-menu-template.php. Nur ohne gute PHP Kenntnisse lässt sich das auch nicht verwerten. Nur erahnen, wie die CSS Klassen später übers Theme ins Menü kommen ... oder so
    Denn da gibts noch Klassen und eben die Funktionen des Themes selbst welche die möglichen Menüs registrieren ... usw ...

    Doch da bin ich sicher viel zu tief im Kern, deiner Meinung nach müsste das alles auch viel einfacher gehen. Gut möglich, nur wenn der Einstieg oder besser die Übersicht fehlt, geht nix.

    Danke
     
  6. danielgoehr

    danielgoehr Well-Known Member

    Registriert seit:
    13. Juli 2016
    Beiträge:
    2.674
    Zustimmungen:
    128
    Irgendwie widersprichst du dir selbst. Entweder du kannst mit CSS umgehen (dann sollte das Ganze eigentlich kein Problem für dich darstellen) oder du kannst es nicht (was auch nicht schlimm ist, aber davon hängt halt ab, welche Lösungsvorschläge du hier bekommst).

    Der Ansatz von Helix ist genau der richtige (vorausgesetzt, du kannst zumindest ein bisschen CSS, ansonsten lässt sich das aber auch "zusammengoogeln").

    1.) Menü erstellen
    2.) Das "normale" Menü-Widget von Wordpress einfügen und dort das zuvor erstellte Menü auswählen

    Dann hast du schon mal die grundlegende Menüstruktur in der Sidebar.
    Den Rest kannst du doch dann mit CSS lösen.

    Der Quellcode wird dynamisch generiert. Du kannst dir die Struktur, dazugehörige Klassen, IDs etc. mit den Entwicklertools deines Browsers anschauen. Wo du die findest, hängt vom verwendeten Browser ab. Aber eigentlich bringen alle einigermaßen modernen Browser soetwas mit.
     
  7. pezi

    pezi Well-Known Member

    Registriert seit:
    1. Mai 2016
    Beiträge:
    80
    Zustimmungen:
    0
    So, alles klar:
    mir fehlte der Ansatz, weil ich keine eindeutige ID, bzw. Class für dieses Menü fand.

    Aus irgendeinen Grund gab es bei der UL einfach keine ID. Es gab nur die ul class="menu", was auf alle Menüs zutrifft.
    Da dachte ich, man müssteirgendwie an die Struktur dieses, in die Sidebar versetzten Menüs herankommen um das oder was auch immer, einbauen zu können.

    Nun, nach Cache leeren, Neustart des XAMPP war plötzlich auch im "Sidebar-Menü" eine ID zu sehen: "ul id="menu4" class="menu" .
    So kann man sich nun mit CSS (u. ggf. JS) austoben, jetzt kann ich das Menü eindeutig ansprechen, jetzt brauch ich keinen Code mehr zu suchen.

    ja, weiß ich, das ist mein erster und einfachster Weg dafür. Erst später such ich im tats. Code nach den so gefundenen Sachen.
    Aber wie gesagt, da es (zuerst) keine eindeutige ID gab, stand ich auf der Leitung ... Und verstieg mich in unnötig komplizierte Ansätze.

    Der Irrtum war, das ich eben glaubte, bei Menüs die man in die Sidebar verfrachtet, müsste man anders vorgehen um den Dokumentenbaum anzusprechen.

    Danke erstmal für die Hilfe, nun spiele ich mich mit der Gestaltung, nun kann ich theoretisch auch per jQuery zugreifen, da die ID da ist. Aber wahrscheinlich reicht CSS auch für das. Kann ja mittlerweile auch viel, sicher mehr als bloß weiche hover Transitionen. Mal sehen ...
     
  8. helix

    helix Well-Known Member

    Registriert seit:
    28. Juli 2011
    Beiträge:
    1.808
    Zustimmungen:
    27
    Prima!
    Und „mal auf dem Schlauch stehen“ ist glaubich normal …

    Noch eine Ergänzung: Man kann eigentlich immer Elemente gezielt einzeln ansprechen, auch dann, wenn sie nur die allgemeine Klasse .menu tragen. Wenn keine ID da ist, kann man immer auch über die Verschachtelung ansprechen, nach dem Schema: „nimm die ul mit der Klasse .menu, die in deinem widget #xxx steckt …"

    Gruß
    helix
     
  9. pezi

    pezi Well-Known Member

    Registriert seit:
    1. Mai 2016
    Beiträge:
    80
    Zustimmungen:
    0
    Klar, wenns 3 aktive Menüs mit der Klasse "menu" gibt, müsste man im Dokument höher gehen - nur komischerweise ist jedes Widget in dieser Sidebar gleich: "class="sb-widget home-12".
    Und 2 solcher Menüs müssen in die gleich Sidebar, sollen aber anders aussehen. Daher sah ich keinen Weg über die Verschachtelung.

    Ok, da wäre noch der Weg über first-child od. first(last)-of-type (oder wie das alles heißt) gegangen, aber da war ich schon nicht mehr bei Sinnen und suchte den tats. Quellcode ...
     
  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