Cassiopeia Anpassung: Dreieck - mm-toggler

    Hi Leute!


    Ich verwende das "Collapsible Dropdown"-Layout im Cassiopeia-Menütyp. Funktioniert auch.


    Meine Frage zielt auf eine visuelle Anpassung: Standardmäßig werden so kleine schwarze Dreiecke angezeigt, um zu zeigen, ob eine Untermenü geöffnet oder geschlossen ist. Man kann draufklicken, um das Untermenü zu öffnen und zu schließen. Jetzt grüble ich aber ein wenig herum: Ich möchte statt der Dreiecke lieber ein PLUS und ein MINUS habe. Bestimmt kann man die Icons irgerndwo austauschen. Aber ich hab wohl gerade nen Brett vorm Kopf. ;)


    Bei dieser Gelegenheit gleich noch eine zweite Frage: In welcher Datei wird dieses Menü zusammengebaut? Ich würde gern einen Override erstellen, um dieses "Auf/Zu"-Icon _vor_ den Menüpunkttext zu setzen. Derzeit befindet es sich danach. Theoretisch muss ich ja nur den Code des Buttons über den Link (a-Element) schieben.


    Habt ihr dafür Ideen? Ich danke schonmal im Voraus, weil ihr alle so nett seid! vain

    Zitat von Mopps

    Bestimmt kann man die Icons irgerndwo austauschen.

    Das sind ja keine Icons. Die Dreiecke sind reines CSS.

    Und, wenn man draufklickt, rotiert das um 180 Grad:

    Code
    .metismenu.mod-menu .mm-toggler[aria-expanded="true"]::after, .mm-active > .metismenu.mod-menu .mm-toggler::after {

    -webkit-transform: rotateX(-180deg);
    transform: rotateX(-180deg);

}

    So ist das viel ressourcenschonender als Icons zu verwenden.


    Wenn ich das ändern wollte, würde ich, bevor ich anfange dies ganze CSS auszuhebeln eher einen Modul-Override machen und irgend so <span> in den Button reinbasteln, aber dann hast natürlich immer noch den Spaß, CSS zu schreiben, damit das Plus ein Minus wird.

    Code
    <button class="mm-toggler mm-toggler-link" aria-haspopup="true" aria-expanded="false" aria-label="Leistungen">
 <span aria-hidden="true" class="icon-plus"></span>
</button>

    Machbar, aber wozu?

    Interessant. Danke für den Tipp, schau ich mir mal an.

    Zitat von Mopps

    Bei dieser Gelegenheit gleich noch eine zweite Frage: In welcher Datei wird dieses Menü zusammengebaut? Ich würde gern einen Override erstellen, um dieses "Auf/Zu"-Icon _vor_ den Menüpunkttext zu setzen. Derzeit befindet es sich danach. Theoretisch muss ich ja nur den Code des Buttons über den Link (a-Element) schieben.

    Hab ich mir nicht angeschaut, also welche Datei für ein Override zuständig wäre, weil:


    Wir lesen und schreiben ja von links nach rechts (LTR). Andere Sprachen halt von rechts nach links (RTL).
    Wobei ich auch nicht überprüft habe, ob da diese Dreiecke auf der linken Seite vom Menütitel angebracht sind. Vermutlich.


    Jetzt versuche ich fantasiemäßig mir das in unserer Sprache vorzustellen. Schauend - schwebend von links nach rechts, wieder nach links, dass ich dieses Dreieck mit Klick erhasche :)


    War jetzt ev. ein wenig Off-Topic.


    Liebe Grüße

    Christine

    Vergessen gestern: Das nachgereicht: Es ist ein Override für modules/mod_menu notwendig. Welche es nun ist, hängt vom jeweils in den Moduleinstellungen gewählten Layout ab. Auch im Cassiopeia kann man ja ein anderes auswählen.


    Leider ist das etwas unglücklich gelöst und in fast jedem dieser dropdown-Dateien gibt es einen <button> mit Klasse mm-toggler: https://github.com/joomla/joom…/cassiopeia/html/mod_menu

    Abhängig davon, welchen Menütyps der Parent-Eintrag ist.


    Schwierig zu sagen, ob ich mir gleich einen selbst benannten Override schreiben würde, vielleicht doch am CSS schnitzen würde oder was oder wie? ;)