Die sogenannten Off-Canvas Navigationen sind gerade für Webseiten, die auch für mobile Endgeräte optimiert werden, relativ gut geeignet, denn sie sparen Platz und machen Optisch einen guten Eindruck. Mit dem Open Source jQuery Plugin Sidr lassen sich solche Off-Canvas Navigationen sehr einfach umsetzen.
Das Sidr Script ist relativ einfach zu verwenden und kann über CSS den eigenen Bedürfnissen angepasst werden. In diesem kleinen Tutorial möchte ich euch erklären wie ihr Sidr verwenden könnt.
Als erstes ladet ihr euch alle relevanten Dateien von der Sidr Webseite herunter. In diesem Paket befinden bereits alle nötigen Dateien: Eine Version des jQuery Frameworks (die ihr übrigens auch gegen eine aktuellere tauschen könnt), das Sidr JavaScript und die entsprechende CSS Datei.
Die JavaScript und CSS Dateien könnt ihr im head Bereich eurer Webseite einbinden, die JavaScript für eine bessere Performance natürlich auch irgendwo am Ende des body’s.
Damit ist bereits die Hälfte geschafft, jetzt könnt ihr an beliebiger Stelle eure Navigation in den HTML-Code einfügen, dies geschieht in Form einer Liste. Weiterhin wird ein Link oder Button benötigt, mit dem das Menü geöffnet werden kann, dass ganze würde dann so aussehen:
Dieser Link öffnet die Navigation
Jetzt muss nur noch das Sidr Plugin ausgeführt werden, dieser Part muss nach den JavaScripten eingebunden werden:
Dieser Link öffnet die Navigation
Damit ist das Thema quasi erledigt und eure Off-Canvas Navigation fertig, viel Spaß beim nachbauen.