nav_default mit selectmenü Weiche durch media queries

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