Kategorien
Design HTML/CSS JavaScript & jQuery Webdesign

Slideout.js: Off-Canvas-Navigation mit Gestensteuerung

Die Gestaltung einer für Mobilgeräte optimierten Website ist mitunter eine große Herausforderung. Der wenige Platz, der auf mobilen Geräte zur Verfügung steht, macht es nicht immer einfach, alle relevanten Inhalte unterzubringen. Gerade Navigationen stellen häufig ein Problem dar, da sie oft viel Platz einnehmen. Daher verschwinden Navigationen oft außerhalb des sichtbaren Bereichs einer Website und werden über eine Schaltfläche eingeblendet. Solche Off-Canvas-Navigationen sind beliebt, praktisch und werden vor allem in mobilen Apps gerne eingesetzt. Mit Slideout.js lässt sich eine Off-Canvas-Navigation einfach in ein eigenes Webprojekt integrieren – inklusive Gestensteuerung, was vor allem auf Mobilgeräten der Usability entgegenkommt.

slideoutjs

Menü und Panel definieren

Das Prinzip einer Off-Canvas-Navigation ist einfach: Per HTML wird ein Bereich mit dem Menü ausgezeichnet, der per CSS jenseits des sichtbaren Bereiches platziert wird – meist außerhalb des linken Randes. Der eigentliche Inhalt – hier Panel genannt – stellt den sichtbaren Bereich mit den Inhalten dar. Slideout.js liefert Stylesheet-Angaben, welche die beiden Elemente entsprechend platzieren.

<nav id="menue">
  …
</nav>

<main id="panel">
  <button class="js-slideout-toggle"></button>
  …
</main>

Im Beispiel werden ein „<nav>“-Element für die Navigation sowie ein „<main>“-Element für den Inhaltebereich ausgezeichnet. Innerhalb des „<main>“-Elementes befindet sich zudem noch ein „<button>“-Element, welches die Navigation per Fingertap oder Mausklick öffnet.

Am Ende des HTML-Bodys wird nun die JavaScript-Datei für Slideout.js eingebunden. Außerdem werden den HTML-Elementen – „<nav>“, „<main>“ und „<button>“ – anhand ihrer ID beziehungsweise ihres Klassennamens die Funktionen von Slideout.js zugewiesen:

<script src=".slideout.min.js"></script>

<script>

var slideout = new Slideout({
  "panel": document.getElementById("panel"),
  "menu": document.getElementById("menu"),
  "padding": 250,
  "duration": 500
 });
 
document.querySelector(".js-slideout-toggle").addEventListener("click", function() {
  slideout.toggle();
});
 
</script>

Per „Slideout()“ werden Optionen zugewiesen, welche die HTML-Elemente als Menü beziehungsweise als Panel auszeichnen. Außerdem wird über den Wert „padding“ eingestellt, die breit die Navigation ist und wie weit der Inhaltebereich nach rechts verschoben werden muss, damit die Navigation sichtbar ist. Der Wert „duration“ gibt die Länge der Animation in Millisekunden an. Standardmäßig dauert sie 300 Millisekunden.

Außerdem muss dem „<button>“-Element die Funktion „slideout.toggle()“ zugewiesen werden, damit per Fingertap oder Mausklick die Navigation ausfahren beziehungsweise wieder verschwinden kann.

slideoutjs_beispiel
Beispiel für eine Off-Canvas-Navigation mit Slideout.js

Zwar stellt Slideout.js ein exemplarisches Stylesheet für das Aussehen der Navigation zur Verfügung. Diese kann allerdings auch gänzlich frei definiert werden. Für das Ein- und Ausblenden werden Inline-Styles verwendet. Per „transition“-Eigenschaft erfolgt die Animation.

Integrierte Gestensteuerung

Neben der einfachen Einbindung von Slideout.js ist es vor allem die integrierte Gestensteuerung, die hervorsticht. Ohne weiteres Zutun lässt sich die Navigation auf Mobilgeräten mit der typischen Wischgeste ein- beziehungsweise ausblenden. Statt einer Wischgeste kann die Navigation per Geste gezogen werden. Beim Loslassen rastet die Navigation dann jeweils im ein- oder ausgeklappten Zustand ein.

Wer Slideout.js ohne Gestensteuerung verwenden möchte, kann diese ausschalten.

var slideout = new Slideout({
  "touch": false
 });

Dazu wird die Option „touch“ auf „false“ gesetzt.

Zusätzliche Methoden und Events

Mit den Methoden „open()“, „close()“ und „toggle()“ stellt Slideout.js Methoden zur Verfügung, mit denen die Navigation aus- und eingeklappt werden kann. Diese lassen sich auf beliebige Elemente anwenden – wie auf das „<button>“-Element im Beispiel oben.

Mit der Methode „isOpen()“ kann man zudem den aktuellen Status der Navigation auslesen. Ist das Menü ausgeklappt, gibt die Methode „true“ zurück, andernfalls „false“.

if (slideout.osOpen() == true) {
  console.log("Menü ist ausgeklappt.");
}

Neben den Methoden gibt es auch Events, mit denen man auf das Verhalten der Navigation reagieren kann. So gibt es unter anderem die Ereignisse „open“, „close“ und „transition“, die auf das Öffnen, Schließen sowie auf die Animation der Navigation reagieren. Während „open“ und „close“ ausgelöst werden, nachdem die Navigation komplett auf- beziehungsweise zugeklappt ist, werden „beforeopen“ und „beforeclose“ vor der Ein- oder Ausklapp-Animation ausgelöst.

slideout.on("open", function() {
  console.log("Menü ist geöffnet.");
});

Im Beispiel wird eine Funktion ausgeführt, sobald das Menü geöffnet beziehungsweise ausgeklappt wurde.

slideout.once("once", function() {
  console.log("Menü ist geöffnet.");
});

Während „on()“ bei jedem Öffnen der Navigation reagiert, führt „once()“ nur beim erstmaligen Öffnen der Navigation die Funktion aus.

Browsersupport und Link zum Beitrag

Slideout.js funktioniert in allen modernen Browsern. Der Internet Explorer wird ab Version 10 unterstützt. Slideout.js steht unter der MIT-Lizenz und kann somit für jedes Projekt, auch kommerziell und in Kundenprojekten, kostenlos eingesetzt werden.

(dpe)

Von Denis Potschien

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.

Eine Antwort auf „Slideout.js: Off-Canvas-Navigation mit Gestensteuerung“

Schreibe einen Kommentar

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