Denis Potschien 24. Juni 2014

SmartMenus für jQuery erstellt responsive und barrierefreie Menüs im Handumdrehen

In Zeiten responsiver Websites ist die Gestaltung von Menüs eine besondere Herausforderung. Gerade bei umfangreichen und verschachtelten Menüs muss gewährleistet sein, dass sie auf Mobilgeräten übersichtlich und platzsparend dargestellt werden können. SmartMenus ist ein jQuery-Plugin für die Erstellung von responsiven und barrierefreien Menüs auf der Basis einer oder mehrerer Listen.

smartmenus

So bauen Sie Menüs mit SmartMenus für jQuery

Die HTML-Auszeichnung von Navigationsmenüs erfolgt in der Regel über die Listenelemente „<ul>“ und „<li>“. SmartMenus setzt diese Vorgehensweise konsequenterweise entsprechend voraus. Dabei ist es zudem möglich, verschachtelte Listen einzusetzen, um Untermenüs zu erzeugen.

Neben jQuery müssen das Plug-in sowie eine Stylesheet-Datei eingebunden sein, damit SmartMenus funktioniert. Optional kann auch noch das Standard-Theme (ebenfalls eine Stylesheet-Datei) aktiviert werden. Damit erhält das Menü direkt ein entsprechendes Aussehen. Alternativ lässt sich das Aussehen individuell über eigene Stylesheets definieren.

<ul id="menue" class="sm sm-blue">
  <li><a href="#">Startseite</a></li>
  <li><a href="#">Leistungen</a>
  <li><a href="#">Kontakt</a></li>
</ul>

Damit SmartMenus aus einer Liste ein entsprechendes Menü generieren kann, muss der Liste die Klasse „sm“ zugewiesen werden. Will man das Standard-Theme verwenden, setzt man zusätzlich die Klasse „sm-blue“. Und schon wird aus der Liste ein responsives horizontales Menü. Das Plug-in stellt vier Themes zur Verfügung. Diese können natürlich als Grundlage für ein eigene Optik verwendet werden.

Wer vertikale Menüs den horizontalen vorzieht, wird ebenfalls von SmartMenus bedient. Über die zusätzlichen Klassen „sm-vertical“ sowie optional „sm-blue-vertical“ (für das mitgelieferte Theme) wird das Menü vertikal dargestellt.

smartmenus_beispiel

Damit auch alles läuft, starten wir noch das Plug-in und wenden es auf die Menüliste an:

$(function() {
  $("#menu").smartmenus();
});

Da der Aufbau des Menüs aus einfachen Listen besteht, ist es auch für Screenreader lesbar.

SmartMenus individuell anpassen

Neben der eigenen Gestaltung des Menüs per Stylesheets gibt es zahlreiche Konfigurationsoptionen, um die Funktion des Menüs zu beeinflussen. So besteht etwa die Möglichkeit, über die verschiedenen jQuery-Methoden zu steuern, wie die Untermenüs eingeblendet werden sollen. Dazu wird der Option „showFunction“ eine entsprechende Methode zugewiesen:

$(function() {
  $("#menu").smartmenus({
    showFunction: function($liste, complete) {
      $liste.animate({
        height: "toggle"
      }, complete);
    }
  });
});

Im Beispiel nutzen wir die „animate()“-Methode von jQuery, um Untermenüs per Animation einzublenden. Alternativ ist es möglich, die „fadeIn()“-Methode von jQuery zu verwenden. Hier steht einem die große Vielzahl der jQuery-Möglichkeiten zur Verfügung.

Mit der Option „markCurrentItem“ wird festgelegt, ob im Menü die aktuell aufgerufene Seite hervorgehoben werden soll.

$(function() {
  $("#menu").smartmenus({
    markCurrentItem: 1
  });
});

In diesem Beispiel ist die Option aktiviert. Das Plug-in fügt dem jeweiligen Link die Klasse „current“ hinzu. Somit ist es dann per Stylesheets möglich, das Aussehen des aktuell aufgerufenen Menüpunktes zu gestalten. Neben den genannten bietet SmartMenus etliche weitere Parameter, an denen geschraubt werden kann. Experimentieren Sie ruhig ein wenig.

SmartMenus: Lizenz und Browsersupport

SmartMenus steht unter der MIT-Lizenz und kann somit privat und kommerziell kostenlos eingesetzt werden. In der Zukunft soll es Premium-Tarife, die einen Support beinhalten, geben. Dank der ausführlichen Dokumentation kommt man aber auch ohne Premium-Support gut mit dem jQuery-Plugin zurecht.

SmartMenus unterstützt alle gängigen Browser. Man höre und staune, sogar der Internet Explorer ab Version 6 macht eifrig mit.

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

2 Kommentare

  1. Super Tipp. Danke. :)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.