Menü für kleine Bildschirme in ein Dropdown umwandeln

Die Website Five Simple Steps hat ein responsives Design mit einer schicken Funktion. Wenn das Browserfenster schmal ist, wandelt sich das Menü oben rechts von einer normalen Link-Reihe in ein Dropdown-Menü.

Wenn Sie sich auf einem kleinen Bildschirm (hier ein iPhone) befinden und auf das Dropdown klicken, erhalten Sie eine Oberfläche zur Auswahl einer Option, wobei jede Option schön groß und einfach auszuwählen ist.

Das macht die Auswahl eines Ziels einfacher als ein winziger Link. Ja, es sind zwei Taps statt einem, aber das ist diskutabel, da Sie wahrscheinlich ohnehin hineinzoomen müssten, um den richtigen Link zu treffen.

Das HTML

Das HTML für diese beiden Menüs ist unterschiedlich. Soweit ich weiß, können Sie <select> und <option> Elemente nicht so gestalten, dass sie wie <a>s aussehen und sich so verhalten oder umgekehrt. Wir brauchen also beides. Sie könnten beides einfach in das Markup einfügen. Das macht Five Simple Steps auch so.

<nav> 

  <ul> 
    <li><a href="/" class="active">Home</a></li> 
    <li><a href="/collections/all">Books</a></li> 
    <li><a href="/blogs/five-simple-steps-blog">Blog</a></li> 
    <li><a href="/pages/about-us">About Us</a></li> 
    <li><a href="/pages/support">Support</a></li> 
  </ul> 
  
  <select> 
    <option value="" selected="selected">Select</option> 
    
    <option value="/">Home</option> 
    <option value="/collections/all">Books</option> 
    <option value="/blogs/five-simple-steps-blog">Blog</option> 
    <option value="/pages/about-us">About Us</option> 
    <option value="/pages/support">Support</option> 
  </select> 

</nav>

Bleiben wir vorerst dabei.

Das CSS

Standardmäßig verstecken wir das Select-Menü mit display: none;. Das ist tatsächlich gut für die Zugänglichkeit, da es das redundante Menü für Screenreader versteckt.

nav select {
  display: none;
}

Dann verwenden wir Media Queries, um bei einer bestimmten Breite den Wechsel vorzunehmen. Das können Sie selbst bestimmen (hier gibt es einige Standard-Breakpoints).

@media (max-width: 960px) {
  nav ul     { display: none; }
  nav select { display: inline-block; }
}

Aber jetzt müssen Sie zwei Menüs pflegen?

Ja, das ist ein Bedenken. Vielleicht werden Ihre Menüs dynamisch erstellt und Sie können die Ausgabe nicht einfach steuern. Vielleicht erstellen Sie Menüs von Hand, möchten aber sicherstellen, dass Sie Ihre Menüs nicht versehentlich aus dem Takt bringen. Eine Möglichkeit, dem entgegenzuwirken, besteht darin, das Dropdown-Menü dynamisch aus dem Original zu erstellen.

Mit jQuery können wir das mit nur wenigen Codezeilen erledigen.

// Create the dropdown base
$("<select />").appendTo("nav");

// Create default option "Go to..."
$("<option />", {
   "selected": "selected",
   "value"   : "",
   "text"    : "Go to..."
}).appendTo("nav select");

// Populate dropdown with menu items
$("nav a").each(function() {
 var el = $(this);
 $("<option />", {
     "value"   : el.attr("href"),
     "text"    : el.text()
 }).appendTo("nav select");
});

Damit das Dropdown-Menü tatsächlich funktioniert…

$("nav select").change(function() {
  window.location = $(this).find("option:selected").val();
});

Aber sind Dropdown-Menüs nicht irgendwie aufdringlich?

Ein bisschen. Die meisten kleinen Bildschirme sind heutzutage mobil, und die meisten mobilen Geräte sind JavaScript-freundlich, also keine große Sorge. Aber wenn Sie sicherstellen wollen, dass dies mit oder ohne JavaScript funktioniert habe ich einen Artikel darüber.

Demo & Download

Demo ansehen   Dateien herunterladen

Video

Schnelles Video-Beispiel, falls Sie dies von einem Ort aus lesen, an dem Sie die Browsergröße nicht anpassen und damit spielen können, um zu sehen, worüber wir hier reden.

Varianten

• Eine Variante des gleichen Konzepts, bei der es verschachtelte Menüs gibt und aus den Eltern-Kind-Beziehungen Optgroups im Select erstellt werden.
• Untermenüs mit einem Strich von Daryn St. Pierre