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
Würde mich auch interessieren
Im ACP im jeweiligen Stil unter "Erweiterte Einstellungen" folgendes CSS einfügen:
@include screen-lg {
.mainMenu .boxMenuDepth1 .boxMenuHasChildren {
&:not(.active) > ol {
height: 0;
text-indent: -9999px;
> li a {
height: 0;
margin: 0;
padding: 0;
}
}
> a::after {
content: "\f107";
display: inline-block;
font-family: 'FontAwesome';
font-size: 14px;
height: 24px;
line-height: 24px;
margin-left: 5px;
width: 10px;
}
}
}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.
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.
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.
<script data-relocate="true">
var $subMenu = $('.mainMenu .boxMenuDepth1 .boxMenuHasChildren');
$subMenu.each(function() {
var $container = $('<div class="toggleContainer" />');
var $button = $('<a class="toggleSubMenu"><span class="icon icon16 fa-plus" /></a>');
var $link = $(this).children('.boxMenuLink');
$container.insertBefore($(this).children('.boxMenuLink'));
$link.appendTo($container);
$container.siblings('ol').addClass('close');
$button.appendTo($container).click(function(e) {
$(this).children('.icon').toggleClass('fa-plus fa-minus');
$(this).parent('.toggleContainer').siblings('ol').toggleClass('close');
});
});
</script>Den CSS-Code dem entsprechenden Stil hinzufügen (Anpassung > Stile und dort unter Erweiterte Einstellungen). Dann sollte es funktionieren.
.toggleContainer {
display: flex;
align-items: center;
justify-content: space-between;
> .boxMenuLink, > .toggleSubMenu {
padding: 7px 20px;
white-space: nowrap;
color: $wcfHeaderMenuDropdownLink;
&:hover, &:focus {
background-color: $wcfHeaderMenuDropdownBackgroundActive;
}
}
> .boxMenuLink {
flex: 1 1 auto;
&:hover + .toggleSubMenu {
background-color: darken($wcfHeaderMenuDropdownBackgroundActive, 10%);
}
}
> .toggleSubMenu {
flex: 0 1 50px;
}
+ ol.close {
height: 0;
visibility: hidden;
}
}Perfekt, 
Habe noch etwas experimentellen Code aus Javascript entfernt . Falls andere Icons zum Auf- und Zuklappen erforderlich sind, einfach die Klassen in Javascript entsprechend ersetzen.
Ich habe fa-caret-down und fa-caret-up verwendet
Spät aber doch bedanke ich mich für die Tipps, ganz besonders bei WollZi !
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
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):
<script data-relocate="true">
var $subMenu = $('.mainMenu .boxMenuDepth1 .boxMenuHasChildren');
$subMenu.each(function() {
var $icon = $('<span class="icon icon16 fa-angle-down" />');
var $link = $(this).children('.boxMenuLink');
$icon.appendTo($link);
var $subMenu = $(this).children('ol')
$subMenu.addClass('close');
$(this).mouseenter(function() {
$subMenu.removeClass('close');
})
.mouseleave(function() {
$subMenu.addClass('close');
});
});
</script>Und das 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:
.Gruß Wollzi
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.
lg,
Chris
Das ist ja mal genial
Hallöchen,
wäre es auch möglich die Untermenü punkte nach rechts untereinnander aufklappen zu lassen?
Gruß Flo
Don’t have an account yet? Register yourself now and be a part of our community!
