Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Dieter Petereit 9. April 2013

Sidr für jQuery: Moderne Sidebar-Navigation mit vielen Finessen

Das sogenannte Panelmenu, oder korrekter Off-Canvas-Menu, ist seit dem Siegeszug mobiler Clients immer populärer geworden. Seitlich rein slidende Navigationsmenüs kennen Sie von nahezu jeder größeren Smartphone-App. Wenn ich mich recht erinnere, war es Facebooks mobile Anwendung, die das Sidebar-Menü als erste einsetzte. Vor einiger Zeit stellten wir mit dem jQuery-Plugin jPanelMenu bereits eine Variante vor, die das Sidebar-Menü für beliebige Websites verfügbar macht. Unsere neueste Entdeckung Sidr kann noch mehr…

Wix Webseiten — echt superpraktisch. ↬ Mehr erfahren

sidr-homepage

Anzeige

Sidr für jQuery: Hochflexible Navigationslösung auch für mobile Clients

Technisch betrachtet ist ein Off-Canvas-Menü, also eines, dessen Inhalte sich außerhalb des Viewport befinden und erst auf Anforderung in den sichtbaren Bereich bewegt werden, keine große Sache. Schon zu DHTML-Zeiten, also vor gut zehn Jahren, hätte man ähnliche Ergebnisse erzielen können.

Will man jedoch mehr als die Basisfunktionalität, muss man sich einige Gedanken mehr machen. Damit wir das nicht alle für uns selber im stillen Kämmerlein tun müssen, übernahm Alberto Varela Sanchéz diese Aufgabe und entwickelte Sidr.

sidr-schematic

Und Sidr ist so ziemlich die flexibelste Off-Canvas-Menülösung, die ich bisher gesehen habe. Dabei ist der Einsatz auf der eigenen Website in der simpelsten Variante extrem einfach. Zunächst gilt es, das Script und eines der zugehörigen Stylesheets einzubinden. Im Head:

    

Im Body, am Ende des Dokuments:

%MINIFYHTML8a86e047236a2a4757e8d7e53a266dc411%%MINIFYHTML8a86e047236a2a4757e8d7e53a266dc412%

Die Einbindung der einfachsten Variante des Sidebar-Menüs erfolgt auf der Basis eines DIV mit der ID sidr. Das DIV enthält die Menüinhalte, der Link öffnet das DIV:

Toggle menu 
%MINIFYHTML8a86e047236a2a4757e8d7e53a266dc413%

Mit dieser Funktionalität könnte man bereits zufrieden sein, Sidr bietet jedoch deutlich mehr. Zunächst ist es möglich, beliebig viele Sidebars in einer Seite unterzubringen. Man muss ihnen dann lediglich Namen geben, um sie programmlogisch unterscheiden zu können.

Die Inhalte für das Menü können auf verschiedene Weisen eingebunden werden. Die einfachste Möglichkeit, die direkte Einbindung im DIV habe ich bereits dargestellt. Ebenso kann bestehendes HTML lokal, aber auch remote gerufen werden. Die komplexeste Methode setzt auf die Callback-Funktionalität.

sidr-themes

Die aus meiner Sicht beeindruckendste Funktionalität ist der Einsatz als responsives Menü. Sanchéz zeigt es direkt anhand der Projekt-Website. Die Projekt-Website verfügt über ein horizontales Menü als Topbar. Verkleinert man nun das Browserfenster, greift ab einem bestimmten Punkt Sidr ein, verwandelt die Topbar in eine Sidebar und blendet einen zusätzlichen Button ein, um die Sidebar öffnen zu können. Auf mobilen Clients können Swipe-Gesten für das Öffnen und Schließen der Sidebar genutzt werden.

Sidr setzt auf Themes, bringt das typische helle und dunkle Theme gleich mit. Auf der Basis dieser Stylesheets können Sie sich ihr eigenes Layout zusammenstöpseln.

Meiner Meinung nach ist Sidr die derzeit beste Lösung für Off-Canvas-Menüs. Wenn Sie eines brauchen, greifen Sie zu Sidr. Zumal das Plugin kostenlos für private, wie kommerzielle Zwecke unter MIT-Lizenz zur Verfügung steht.

Links zum Beitrag

  • The best jQuery plugin for creating side menus and the easiest way for doing your menu responsive | Sidr Project-Demo
  • Sidr auf Github | artberri / sidr
  • Homepage des Entwicklers | Alberto Varela Sanchéz
  • jPanelMenu: Elegante Sidebar-Navigation mit CSS Animations und jQuery | Dr. Web Magazin

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design.

3 Kommentare

  1. Wenn ich das sidr-Menu schliessen möchte, wie müsste da der Link im Div aussehen?

  2. Das ist ja ein pfiffiges Ding.

    Um die Navigationsliste muss übrigens nicht unbedingt ein div sein, nav id=“sidr“ funktioniert bei mir wunderbar.

    Und noch ein Tipp: Der script-Block zur Aktivierung des Menüs muss immer *unterhalb * der Einbindung von jQuery und Sidr bleiben. Auch wenn wie bei der “Responsive Variante” die Navigation selbst getrennt davon zum Beispiel im Header steht.

  3. Sehr schön. Das ist genau das, wonach ich gesucht habe. Jetzt kann ich mir eine Eigenentwicklung sparen :)

    Viele Grüße,
    Benni

Schreibe einen Kommentar

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