Simples responsive Menü mit jQuery: eine select Box

Es gibt etliche mehr oder weniger aufwändige Möglichkeiten für die optimale Darstellung eines Menüs auf dem mobilen Gerät. Hier eine simple Lösung, die eine select Box generiert.

Select Boxen sehen je nach Smartphone gar nicht schlecht aus und lassen sich gut bedienen. Warum also nicht mit wenigen Zeilen jQuery eine solche als Menü auf dem mobilen Gerät verwenden?

Folgender jQuery Code machts möglich:

$(document).ready(function(){  
  var $menu = $('nav').find('ul');
  optionsList = '<option value="" selected>Menu...</option>';
  $menu.find('li').each(function() {
    var $this   = $(this);
    $anchor = $this.children('a');
    depth   = $this.parents('ul').length - 1;
    indent  = '';
    if( depth ) {
      while( depth > 0 ) {
        indent += ' - ';
        depth--;
      }
    }
    optionsList += '<option value="' + $anchor.attr('href') + '">' + indent + ' ' + $anchor.text() + '</option>';
  }).end()
  .after('<select class="mobile-menu visible-phone">' + optionsList + '</select>');
 
  $('.mobile-menu').on('change', function() {
    window.location = $(this).val();
  });
});

Das Menü befindet sich in einen nav Element und folgendes CSS ist minimal erforderlich:

.mobile-menu {
  display:none;
}
 
@media screen and (max-width: 620px) {
  .visible-phone {
    display:block;
  }
  .visible-desktop {
    display:none;
  }
}

In diesem Beispiel hat die ul des Menüs die Klasse „visible-desktop“ und die Umschaltung erfolgt bei einer Größe von weniger als 620 Pixel.

Demo (das Fenster auf eine Größe von weniger als 620 Pixel Breite bringen).