Untermenüs eingeklappt

  • Affected Version
    WoltLab Suite 3.0

    Hallo,

    ist es möglich bzw. wie ist es möglich, ausgehend vom Haupmenü, Untermenüs eingeklappt darzustellen?

    Als Beispiel habe ich 3 Menüpunkte dem Menüpunkt "Test" untergeordnet:

    Ist-Zustand:

    Soll-Zustand:

    im ersten Bild ohne Auswahl, im zweiten ist "Medienverwaltung" ausgewählt, der ausgewählte Punkt könnte noch farblich hervorgehoben sein.

    danke,

    Chris

    Edited once, last by -chris- (June 5, 2017 at 5:51 PM).

  • -chris-

    Im ACP im jeweiligen Stil unter "Erweiterte Einstellungen" folgendes CSS einfügen:

    Ab der ersten Menüstufe werden alle Untermenüs eingeklappt dargestellt. Bei aktivem Menüpunkt werden die Untermenüpunkte angezeigt. Das funktioniert auch bei weiteren Untermenüpunkten eines Untermenüs ;).

  • Wäre besser wenn das Untermenü aufgeht wenn man mit der Maus drauf ist.

    So muss man erst den Ersten Menüpunkt anklicken und dann wieder auf das Menü

    gehen um die Untermenüpunkte zu sehen.

    Zeiten ändern sich, Zeiten ändern dich, dich und deine Sicht.

    Trau, schau, wem.

    Die einzige Person, der nicht geholfen werden kann, ist diejenige, die anderen die Schuld gibt.

  • Das wäre nur mit Javascript möglich und auch kein Problem. Allerdings wird das von der Bedienung her eine ganz unruhige Sache. Davon würde ich abraten.

    Besser wäre es, mit Javascript hinter dem Linktext des betroffenen Menüpunktes ein zusätzliches Element einzufügen, das als Schaltfläche für die Anzeige des Untermenüs dient. Vom Prinzip her wie in der mobilen Ansicht.

  • Ok, das wäre noch besser.

    Zeiten ändern sich, Zeiten ändern dich, dich und deine Sicht.

    Trau, schau, wem.

    Die einzige Person, der nicht geholfen werden kann, ist diejenige, die anderen die Schuld gibt.

  • Den Javascript-Code im ACP unter Konfiguration > Allgemein > Seite und dort im Feld "Footer-Code" einfügen. Eleganter wäre es natürlich per TemplateListener. Zum Testen sollte es aber erst einmal so genügen.

    Den CSS-Code dem entsprechenden Stil hinzufügen (Anpassung > Stile und dort unter Erweiterte Einstellungen). Dann sollte es funktionieren.

    Edited 3 times, last by WollZi: Variablen vergessen. (June 17, 2017 at 3:00 PM).

  • Perfekt, :thumbup:

    Zeiten ändern sich, Zeiten ändern dich, dich und deine Sicht.

    Trau, schau, wem.

    Die einzige Person, der nicht geholfen werden kann, ist diejenige, die anderen die Schuld gibt.

  • Habe noch etwas experimentellen Code aus Javascript entfernt ;). Falls andere Icons zum Auf- und Zuklappen erforderlich sind, einfach die Klassen in Javascript entsprechend ersetzen.

  • :thumbup:

    Ich habe fa-caret-down und fa-caret-up verwendet ;)

    Zeiten ändern sich, Zeiten ändern dich, dich und deine Sicht.

    Trau, schau, wem.

    Die einzige Person, der nicht geholfen werden kann, ist diejenige, die anderen die Schuld gibt.

  • Spät aber doch bedanke ich mich für die Tipps, ganz besonders bei WollZi !:thumbup:

    Wäre besser wenn das Untermenü aufgeht wenn man mit der Maus drauf ist.

    Das wäre nur mit Javascript möglich und auch kein Problem. Allerdings wird das von der Bedienung her eine ganz unruhige Sache. Davon würde ich abraten.

    Mich interessiert so eine Lösung trotzdem, weil die User dann nicht zwei verschiedene Methoden hätten, ein Submenü zu öffnen. Nach jahrelanger Pause beim Coden sind meine eigenen Versuche kläglich gescheitert, würde mich über Tipps nochmal sehr freuen.

    lg,

    Chris

  • -chris-

    Wenn du die gleiche Methode haben möchtest wie im Hauptmenü, wird das wahrscheinlich so nicht funktionieren.

    Ich beziehe mich auf dein Menü im ersten Beitrag. Angenommen, ein Benutzer möchte zum Menüpunkt "Quiz". Dann muss er mit dem Maus-Cursor erst auf den Hauptmenüpunkt "Test" gehen, damit sich das Untermenü öffnet und weiter zum Menüpunkt "Medienverwaltung" gleiten, da es sich sonst wieder schließt. Ist er am Menüpunkt "Medienverwaltung" angelangt, öffnet sich dessen Untermenü. Gleitet er weiter zum Menüpunkt "Quiz" schließt sich das Untermenü der Medienverwaltung (wird kleiner) und damit evtl. auch das gesamte Untermenü von "Test", weil sich der Maus-Cursor außerhalb des Menüs befindet. Folglich wird der Benutzer nie die Menüpunkte unterhalb eines längeren Untermenüs erreichen. Du kannst es aber selbst ausprobieren (wäre auch ohne JS machbar):

    Und das CSS:

    CSS
    .mainMenu .boxMenuDepth1 .boxMenuHasChildren > ol.close {
        height: 0;
        visibility: hidden;
    }

    Auch ein zeitlich verzögertes Einfahren der Menüs wird keine dauerhafte Freude bringen.

    Weitere Alternativen:

    • Die Untermenüpunkte werden erst wieder zugeklappt, wenn das Hauptmenü verlassen wird (mouseleave-Event wird nur das Untermenü von "Test" angewendet). Das bedeutet aber auch, dass sich bis zum Menüpunkt "Quiz" aller Untermenüs öffnen werden. Na ja, schön ist es wohl eher nicht.
    • Ein seitliches Ausklappen des Untermenüs zum jeweiligen Untermenüpunkt wäre eine weitere Möglichkeit. Persönlich sehe ich darin immer etwas Akrobatik, bis man zum gewollten Menüpunkt gelangt. CSS sollte dafür schon ausreichen. Infos und Beispiele dazu findet man reichlich über die Suchmaschine seines Vertrauens ;).

    Gruß Wollzi

    Edited 3 times, last by WollZi (June 17, 2017 at 8:14 PM).

  • WollZi : habe die zweite Methode in meinem Testforum durchgespielt. Du hast zu 100% recht, das ist mühsam und nur praktikabel, wenn die Untermenüs geöffnet bleiben, was ich ja vermeiden wollte. Ich bin zur ersten Methode von Nachricht #8 zurückgekehrt, die ja wirklich genial ist. Nochmal danke für deine Unterstützung:thumbup:.

    lg,

    Chris

  • Hallo WollZi ,

    Bei deinem Code muss man den Menüpunkt anwählen bzw. anklicken um dann mit dem + das untermenü sehen zu können. Wäre es möglich das + auszuwählen auch ohne den Menüpunt bzw. die Seite dazu aufgerufen zu haben?

    Grüßle Flo

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!