Heute möchte ich kurz 5 jQuery menu plugins vorstellen, die gut aussehen, funktionieren und gleichzeit nicht viel Bandbreite benötigen.

Anfangen möchte ich mit einem javaScript Menu, welches kein jQuery Plugin ist, sondern vollkommen ohne Framework auskommt.


1. Responsive Nav - reines Javascript Menu ohne zusätzliche Library

Javascript Menu ohne jQuery Framework
Responsive Nav
ist ein Javascript Menu, welches vollkommen ohne jQuery oder sonstige Javascript Frameworks auskommt. Minified und gziped ist das Menu gerade mal 1KB klein.

Das Javascript Menu unterstützt dabei Touch Events und CSS3 Transitions zum ausklappen des Menus. Wie das Menu jeweils bei hoher und niedriger Auflösung aussieht, ist oben im Bild zu sehen. Beide Darstellungen sind natürlich nicht gleichzeitig aktiv.

Das Menu ist oben angeheftet und scrollt aus dem Sichtbereich. Da kann man mit etwas CSS sicherlich noch etwas nachhelfen, falls das Menu lieber fix stehen bleiben soll.

Der große Vorteil ist sicher, dass das reine Javascript Menu vollkommen ohne jQuery und sonstige Frameworks auskommt. Sehr schön.


2. TinyNav.js - minified und gziped gerade mal 443 Byte klein

jQuery menu plugin - tinyNav

TinyNav.js ist ein ein echtes jQuery Menu Plugin und verbraucht gerade mal 443 Byte.

Wie man im Bild sehen kann, verwandelt sich das Menu in eine einfache select Box und sieht demnach, je nach Browser und Betriebssystem, etwas anders aus. Auch hier gilt wieder, beide Menu-Darstellungen sind nicht gleichzeitig zu sehen, sondern sind von mir nur zur Veranschaulichung zusammengefügt worden.

Das Menu macht bei geringer Auflösung vielleicht optisch nicht viel her, ist dafür wirklich sehr klein und visuell klar und ohne große Schnörkel. Dessen Bedienung muß Niemandem erklärt werden. Ich mags.


3. jQuery.mmenu - für Anspruchsvolle

jQuery menu - jQuery.mmenu
mmenu
- Vielseitig und wahrscheinlich das anspruchvollste Menu in dieser Kollektion. Minified und gziped 12 KB - mit allen Features knapp 20KB.

Optisch angelehnt an das iOS 7 und themeable, erinnert dies Plugin auch stark an das Facebook Menu. Wenn es entsprechend konfiguriert wird. Angeheftet werden kann das jQuery Menu an beliebiger Position und kommt auch mit Untermenus sehr gut zurecht. Auch Suchboxen und weitere Felder können hinzugefügt werden.

Der Funktionsumfang ist sehr komplex. Schaut euch das Plugin einfach auf der Homepage an.

Leider funktioniert das Menu nicht im Internet Explorer 8. Unterstützt dafür alle Major Browser in halbwegs aktueller Version.

In MIT Lizenz und GPL für kommerzielle Projekte. Wobei nur eine Spende nötig ist.

4. jQuery slimMenu - nested multi level menus

jQuery menu - slimMenu

slimMenu - Dieses jQuery Plugin kommt erstmal wie ein normales Drop Down hover Menu daher. Ist aber responsive - unter Angabe der Breite, ab der das Menu kollabieren soll. Leider klappt es über den rechten Fensterrand hinaus auf, statt nach innen. Aber das ist nur ein kleiner Makel, der bei gut gewählter Größe nicht ins Gewicht fallen sollte. Siehe auch Webdesigner versus Webentwickler. Ich achte halt auf sowas.

Einige Features:

  • Multi-level nested menus
  • 100% mobile responsive menu
  • Mehre Menus auf einer Seite möglich

jPanelMenu - Facebook style jQuery Menu Plugin

jPanel menu - jQuery Plugin

PanelMenu ist ein jQuery Plugin, welches ein animiertes Panel Menu erstellt (ähnlich den mobilen Versionen von Facebook und Google). Auf Geräte, die Hardware accelerated transitions unterstützen, wirken die Animationen sehr weich. Ohne Unterstützung, fällt das Plugin auf jQuery CSS Animation zurück.

Dieses Menü kommt ohne spezielle Desktop Version daher und sieht überall sofort gleich aus.


Es werden wieder mehr Artikel zum Thema responsive Webdesign und Webentwicklung folgen.


Das könnte Sie auch interessieren:

10 kostenlose Responsive Webdesign Templates

teile diesen Beitrag

11 Kommentare

  1. Avatar
    Sinead
    Di, Nov 12, 2013

    Kommt mir gerade recht. Vielen Dank

  2. Avatar
    Gerhard
    Mi, Nov 13, 2013

    Neben diesen gibt es auch noch kommerzielle responsive Menüs, die nicht viel Geld kosten.

    Eine große Auswahl gibt es hier: Navigation Menus

  3. Avatar
    Do, Nov 14, 2013

    Guten Tag, ich finde die Artikel immer sehr interessant und gut geschrieben. Wir von http://www.webdesign-freelancer.ch planen, nächstes Jahr diverse Gastbeiträge zu publizieren. Daher wollten wir nachfragen, ob Sie interessiert sind, einen solchen Gastbeitrag zu schreiben. All Ihre Themen sind eigentlich für uns geeignet.

    Evtl. fühlt sich auch jemand anders (ein Leser) angesprochen... nehmt mit uns Kontakt auf!

  4. Avatar
    Mo, Dez 9, 2013

    Hallo, danke für die schöne Aufstellung, ich suche gerade responsive Menus für meine Seite. Mal sehen, ob ich eins davon auf mein Design ummodeln kann...

  5. Avatar
    Mi, Feb 19, 2014

    Eine gute Liste, aber mir fehlen optisch schöne Menüs für den normalen Bildschirm. Auf dem Handy reicht ja ein minimalistisches Design.

  6. Avatar
    Do, Feb 27, 2014

    Danke für die Aufstellung von responsiven Menus. Leider untertützt auch das "jQuery slimMenu" nicht den IE8. Man kann nur hoffen, dass die XP-Nutzer mit dem ollen IE bald ein Einsehen haben....

  7. Avatar
    Mo, Mai 5, 2014

    Gute Übersicht. Gibt es eine Empfehlung, ab wie viel Pixeln ein Navigation sich verändern sollte? Sprich auf welcher Screengröße das Menü "mitschrumpfen" sollte?

  8. Avatar
    Do, Jun 26, 2014

    Hallo und danke für die Tipps. Zur Zeit arbeite ich auch vermehrt mit dem jQuery.mmenu Plugin, allerdings ist das mit dem Internet Explorer schon ein ziemliches Problem. Dafür kann man damit die tollsten Menüs basteln, wenn man sich erstmal eingearbeitet hat. Definitiv zu empfehlen.

  9. Avatar
    Do, Jun 26, 2014

    Hallo und danke für die Tipps. Zur Zeit arbeite ich auch vermehrt mit dem jQuery.mmenu Plugin, allerdings ist das mit dem Internet Explorer schon ein ziemliches Problem. Dafür kann man damit die tollsten Menüs basteln, wenn man sich erstmal eingearbeitet hat. Definitiv zu empfehlen.

  10. Avatar
    s
    Sa, Sep 13, 2014

    s

  11. Avatar
    Mo, Mrz 21, 2016

    Eine gut zusammengetragene Liste. Ansehnliche Ansichten für den PC könnten noch besser sein. Für Kleingeräte sind einfache Ansichten eigentlich ausreichend.

Diskutiere mit!

 
Kommentar senden