Untermenüs eingeklappt

  • Gibt es denn jetzt auch eine Lösung für ein Menü auf der Seitenleiste?

    Interesse besteht - aber steht doch da -

    Zitat von Christopher Walz

    Von mir gibt es bald eine Lösung.

    Demo: https://cwalz.de/

    deshalb wird einfach abgewartet.

    dead sucht allerdings eine Lösung für ein Menü in der Seitenleiste, was Christopher Walz auf seiner Seite zeigt, betrifft das Hauptmenü.

    Für das Hauptmenü hat WollZi hier schon eine einfache Lösung angeboten, die tadellos funktioniert und den Vorteil hat, dass sie kein weiteres Plugin benötigt.

    Der Code von WollZi sollte eigentlich mit einigen Änderungen auch für das Seitenleisten-Menü anpassbar sein.

    Christopher Walz: Wird dein zukünftiges Plugin auch für die Seitenleiste anwendbar sein?

    lg,

    Chris

  • Gunnar  dead

    Ich habe euch mal ein kleines Plugin (ab Core-Version 5.2.x) erstellt, mit dem man Untermenüpunkte innerhalb der Sidebar (links oder rechts) vertikal ein- und ausklappen (switchen) kann. Dazu muss man im ACP für das entsprechende Menü die CSS-Klasse toggleMenuBox eintragen.

    Die Gestaltung für die aktiven Menüpunkte im Standardlayout trifft eher nicht so meinen Geschmack. Gerade für die hinzugekommenen Schaltflächen zum Switchen der Menüs ist das nicht so optimal. Sie liegen zu dicht am Link des Menüpunkts, weil dieser eigentlich über die gesamte Breite der Sidebar geht (und hängt gleichzeitig mit der Farbgebung zusammen). Aber seht selbst. Ihr könnt das Layout natürlich ändern.

    Falls euch die Icons auf den Schaltflächen (oder was auch immer) nicht gefallen, könnt ihr diese mit individuellen CSS-Code für eurem Stil anpassen. Wie ich das gemacht habe, findet ihr in der SCSS-Datei unter style/extendableMenus.scss.

    Na dann, gutes Gelingen.

    Nachtrag:

    Wer möchte, kann den Code auch in der Nicht-Plugin-Variante (als Footer-Code) haben.

  • WollZi Das funktioniert für meine Zwecke zunächst mal super. Vielen Dank!

    Gewöhnlich glaubt der Mensch, wenn er nur Worte hört, es müsse sich dabei doch auch was denken lassen.
    Johann Wolfgang von Goethe

    28.08.1749 - 22.03.1832

    Einmal editiert, zuletzt von dead (17. Januar 2021 um 10:44)

  • Danke WollZi!

    Im Anschluss habe ich noch 2 Fragen:

    1. Ist die Lösung für das Sidebar-Menü mit der für das Hauptmenü aus diesem Thema kompatibel - oder spießt sich da etwas bzw. kann/muss man den js-Code anpassen?

    2. Mich interessiert der Code als Footer-Code, da auch der Code für das Hauptmenü in dieser Form vorliegt. Kann ich deinen js-Code einfach aus deinem Plugin extrahieren? Oder planst du ev. ein kombiniertes Plugin?

    danke,

    lg,

    Chris

  • -chris-

    Zu 1:

    Beide Lösungen (sowohl JS als auch CSS) sind unabhängig voneinander. Dafür sorgen die CSS-Selektoren. Den Code für das Hauptmenü stelle ich demnächst noch einmal in der reinen JS-Variante zur Verfügung, damit das unabhängig von jQuery funktioniert.

    Zu 2:

    Der JS-Code für die Sidebar wird so nicht im Footer funktionieren, da es sich um eine sogenannte "Asynchronous module definition" handelt. Ich kann dir aber gern dazu einen passenden Code bereitstellen.

    Natürlich lassen sich auch beide Varianten zu einem gemeinsamen Plugin zusammenfassen. Kein Problem. Was wäre dir lieber?

  • Bereitstellung über den Footer-Code

    • Der einfachste Weg besteht darin, zunächst ein neuen Ordner mit den Namen ExtendableMenus in meineDomain/js zu erstellen (vorausgesetzt, dass das wcf dort liegt). In diesen Ordner kopiert man per FTP die Datei ExtendableMenus.js aus dem Paket im Anhang.
    • Nun wird der gesamte SCSS-Code aus der Datei extendableMenus.scss (siehe Paket im Anhang) in Individuelles CSS und SCSS des Stiles kopiert.
    • In der Datei footerCode.txt (siehe Paket im Anhang) befindet sich das JavasScript, dass in ACP/Konfiguration/Allgemein/Footer-Code kopiert werden muss.

    Nun sollte alles funktionieren.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!