3 jQuery Plugins für responsive Website-Menüs
Kommentare

Die freie und umfangreiche JavaScript-Klassenbibliothek jQuery eignet sich gut zum Aufpolieren einer Website. Vor allem die Erweiterbarkeit durch zahlreiche freie Plugins kann Webdesignern, die ihre Seite grafisch aufwerten möchten, sehr entgegenkommen.

Insbesondere die Seiten-Navigation kann durch jQuery Plugins deutlich verbessert werden. Dazu haben wir drei Beispiele für Euch:

Sidr

Mit Sidr könnt Ihr spielend einfach responsive Seitenmenüs erstellen, die dann auch auf Mobil-Geräten in passender Form angezeigt werden. Laut den Machern entsprechen die mit Sidr erstellten Menüs denen, die auch auf Facebooks mobiler Website zum Einsatz kommen. Zum Plugin werden jeweils ein dunkles und ein helles Theme mitgeliefert, die natürlich auch durch selbstgebastelte Themes ersetzt werden können. Hilfe für die Implentierung findet Ihr als Schritt-für-Schritt-Anleitung auf berriart.com/sidr, dort könnt Ihr das jQuery-Plugin dann auch herunterladen.

http://www.berriart.com/sidr/

Screenshot: http://www.berriart.com/sidr/

SlimMenu

SlimMenu eignet sich hervorragend zum Erstellen eines schlichten, responsiven Multi-Level-Menüs. Einzig das Plugin und eine Liste bzw. Multi-Level-Liste wird zum Erstellen benötigt. Unterstützt werden die Browser IE 9+, Chrome (aktuellste Version), Firefox (aktuellste Version), (Mobile) Safari, Opera (aktuellste Version) und Android 2.2+. Zum Download gelangt Ihr über http://adnantopal.github.io/slimmenu/.

Wenn Ihr das SlimMenu im Einsatz sehen wollt, könnt Ihr es direkt auf der Seite der Macher testen. Verändert dazu einfach die Größe Eures Browser-Fensters und schaut was passiert. Zur Veranschaulichung haben wir nachfolgend zwei Screenshots, die jeweils eine Version des ausgefahrenen Menüs und des Mobile-Menüs zeigen. 

http://adnantopal.github.io/slimmenu/

 

slimmenü klein

 

Screenshot: http://adnantopal.github.io/slimmenu/

SmartMenus

Das jQuery Plugin SmartMenus ist ein Script zum Erstellen optimierter Websites für Desktop- und Mobile-Browser. Da das Menü auf reinem CSS basiert, kann es völlig frei angepasst und gestalltet werden. Unterstützt werden die Browser IE 6+, Chrome, Firefox 10+, Safari 5+, Opera (Desktop und Mobile ab Version 11) und Mobile Webkit Browser. Eine Online-Demo, die Euch beim Einrichten sowie der Auswahl eines schicken Themes unterstützt, findet Ihr auf github. Die drei Standard-Themes sind blue, clean und simple. Über das Dropdown-Menü auf der Hilfeseite könnt Ihr alle drei zu Vorschauzwecken auswählen.

smartmenus

Screenshot: http://www.smartmenus.org/

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -