Konvertierung eines Listen-Menüs zu einem Dropdown-Menü, z.B. für kleine Bildschirme.
schon des öfteren benötigte ich ein Menü-Template in Contao, dass von einem Listen-Menü zu Select-Menü umschaltet, wenn der Benutzerbrowser recht klein ist/wird.
Was oft bei "repsponsiven" Seiten ein mittel der Wahl sein kann. Das ganze arbeitet mit media-queries und dient als beispiel-case
benötigtes CSS (Beispiel)
HTML-Code:
nav select {
display:none;
}
// Hier kann das ganze nach viewportgröße o.ä. gesteuert werden.
@media (max-width: 320px) {
nav ul {display: none;}
} nav select {
width:80%;
display:inline-block;
}
damit das select-Menü dann auch zur Navigation taugt, benötigt man noch ein javascript-schnipsel.
HTML-Code:
<script>
$("nav select").change(function() {
window.location = $(this).find("option:selected").val();
});
</script>
Das Template muss in contao natürlich noch im Navigations-Modul in der Templateauswahl ausgewählt werden.
Das Menü schaltet nun von Liste (ul) auf Select um, wenn der Browser-Viewport kleiner als 321px beträgt.
gruss
ways
Lesezeichen