jQuery

Responsive Menu: jQuery-Plugin minimiert Navigationsmenüs für mobile Clients

24. Mai 2012
von

Responsive Design ist in aller Munde. Design, das sich an unterschiedliche Auflösungen anpassen kann, macht eine eigenständige mobile Website in vielen Fällen überflüssig. Einige Problembereiche des reponsiven Designs sind allerdings bislang  ungeklärt, respektive bedürfen besonderer Behandlung. Neben der noch fehlenden Möglichkeit, Bilder in unterschiedlichen Auflösungen bereitzustellen, können auch Navigationen zu Problemen führen, da sie oft sehr viel Platz einnehmen. Das jQuery-Plugin „Responsive Menu“ sorgt für Abhilfe.

Auf einer Desktop-Website lässt sich in der Regel genug Raum für die Benutzerführung einer Website finden. Oft werden auch mehrere Menüs bereitgestellt, um die einzelnen Bereiche einer Website besser strukturieren zu können. In der Mobilansicht stellt sich dann oft die Frage: Wohin mit der Navigation?

Bei einer linear aufgebauten Mobil-Website rutscht die Navigation meist ans untere Ende der Seite. Bei vielen Navigationspunkten kann es dann schon mal passieren, dass die Navigation nicht komplett ins Display passt. Das jQuery-Plugin „Responsive Menu“ wandelt eine Listennavigation für die Mobilansicht in eine Dropdown-Auswahlbox um. Dabei ist die Verwendung recht einfach und schnell erledigt.

„Responsive Menu“ einbinden

Zunächst müssen jQuery und das Plugin im Kopf der Website eingebunden werden:

1
2
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="jquery.mobilemenu.js"></script>

Anschließend wird per jQuery das Plugin aufgerufen – ebenfalls im Kopf des HTML-Dokumentes. Hier werden einfach die IDs der Menüs, die umgewandelt werden sollen, angegeben:

1
2
3
4
5
6
7
<script type="text/javascript">
 
  $(document).ready(function() {
  $("#nav_haupt, #nav_sonstiges').mobileMenu();
});
 
</script>

Das Plugin lässt sich auf alle Menüs, die als Liste (UL- oder OL-Liste) angelegt sind, anwenden. Auch verschachtelte Listen können in entsprechend strukturierte Auswahlboxen umgewandelt werden.

„Responsive Menu“ anpassen

Die umgewandelten Menüs werden mit verschiedenen Einstellungen angepasst. Über die Option „switchWidth” kann die Breite des Browserfensters angegeben werden, ab der die Navigation in eine Auswahlbox umgewandelt werden soll.


v. l. n. r.: normales Listenmenü, Dropdown-Menü ohne Verschachtelung und mit Verschachtelung

Die Option „combine“ vereint alle Menüs in eine einzige Auswahlbox und „nested“ sorgt dafür, dass verschachtelte Menüs ihre verschachtelte Struktur auch in der Auswahlbox behalten. Bei verschachtelten Menüpunkten kann der jeweils übergeordnete Punkt nicht angeklickt werden (im Beispiel „Leistungen“). Es wird daher ein zusätzlicher Eintrag für den entsprechenden Punkt gemacht (im Beispiel „Übersicht“). Wie dieser Eintrag benannt wird, kann über „groupPageText“ angegeben werden.

Mit der Option „topOptionText“ kann die Beschriftung der Box, die standardmäßig „Select a page“ heißt, angepasst werden. Auch die Position der Auswahlbox im DOM kann geändert werden. Per „prependTo“ kann ein CSS-Selektor angegeben werden, dessen Kindelement die Auswahlbox werden soll.

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
 
  $(document).ready(function(){
  $("#nav_haupt, #nav_sonstiges').mobileMenu({
    switchWidth: 480,
    combine: true,
    groupPageText: "Übersicht",
    nested: true,
    topOptionText: "Bitte auswählen",
    prependTo: "body"
  });
});

Fazit: Mit wenigen Einstellungen ist dank des jQuery-Plugins „Responsive Menu“ die komplette Navigation einer Website in einer einzigen Auswahlbox untergebracht. Auch eine individuelle Anpassung der Box ist möglich. So kann sich jeder ein Dropdown-Menü seiner Wahl zusammenstellen.

(dpe)

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.

2 Kommentare zu „Responsive Menu: jQuery-Plugin minimiert Navigationsmenüs für mobile Clients
  1. basti am 24. Mai 2012 um 23:27

    Ich persönlich finde das Umwandeln der Navigation in eine select-liste an sich eher nicht so gut weil man nicht viele Möglichkeiten hat diese anzupassen. Sie sieht auf jedem Betriebssystem anders aus. Den Menu-Icon-Ansatz finde ich besser. Andererseits ist es eine sehr solide Lösung und es gibt die Möglichkeit das ganze auch mit einem Fallback zu coden, falls JavaScript ausgeschaltet ist. Aber für RWD Einsteiger auf jeden Fall ein sehr hilfreicher Artikel.
    VG

  2. Webdesign Soest am 8. April 2013 um 15:11

    Im Firefox funktioniert alles super, nur der Chrome macht irgendwie Probleme. Dennoch ein nette und smarte Art des Responsive Design. “i like”.

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!