Off-Canvas-Menü mit dem JQuery Plugin Sidr
In diesem Beitrag geht es um den Einsatz des JQuery Plugins Sidr für die Navigation auf einer Website. Mit dem Plugin ist es möglich, bestimmte Bereiche einer Website, die zunächst ausgeblendet sind, durch Betätigung eines Buttons erscheinen zu lassen. Der Clou dabei ist, dass der gesamte, zuvor angezeigte Viewport um die Breite des eingeblendeten Bereiches verschoben wird. Das Plugin wird auch auf dieser Website eingesetzt, wobei die obere Navigationsleiste in der mobilen Ansicht ausgeblendet wird und erst durch einen Menü-Button aufgerufen werden kann.
Um das Plugin auf einer Website verwenden zu können, muss zunächst eine aktuelle JQuery Bibliothek eingebunden werden. Die dafür nötige JavaScript-Datei wird auf der Website jquery.com zum Download angeboten. Im Headbereich des HTML-Dokuments wird die Datei folgendermaßen eingebunden:
<script src="js/jquery-1.11.2.min.js"></script>
Das src-Attribut erhält als Wert die entsprechende URL zur Datei. Anschließend muss das Plugin Sidr in gleicher Weise eingebunden werden. Das Plugin steht als JavaScript-Datei auf der Website berriart.com/sidr zum Download bereit. Dort ist auch eine kurze Beschreibung der Anwendungsmöglichkeiten zu finden. Zum Download gehören auch zwei CSS-Dateien, welche für das Aussehen der Navigationsleiste verwendet werden können. Natürlich können auch eigene CSS-Anweisungen vergeben werden.
<script src="js/jquery.sidr.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.sidr.dark.css" media="screen">
Wie das HTML beschaffen sein muss, hängt von der Anwendung des Plugins ab. Das einfache Ein- und Ausblenden einer Seitenleiste benötigt z.B. einen Link, der das Plugin aktiviert und die zuvor ausgeblendete Seitenleiste, deren Inhalt in einem Container mit der id=“sidr“ enthalten ist, erscheinen lässt bzw. wieder ausblendet. Außerdem wird je nach Anwendung noch ein entsprechender Scriptblock zur Initialisierung des Plugins benötigt. Das folgende HTML kann für ein Menü verwendet werden, das in der mobilen Ansicht ausgeblendet wird und durch einen Menü-Button aufgerufen werden kann. Demnach ist es wunderbar für Responsive Webdesign anwendbar.
<div id="mobile-header">
<a id="responsive-menu-button" href="#sidr-main">Menu</a>
</div>
<div id="navigation">
<nav class="nav">
<ul>
<li><a href="index.html#headline">Info</a></li>
<li><a href="index.html#inhalt">Potenzial</a></li>
<li><a href="index.html#slide">Projekte</a></li>
<li><a href="index.html#contact">Kontakt</a></li>
</ul>
</nav>
</div>
Der Container mit der id=“navigation“ wird bei größeren Bildschirmen im Browser angezeigt, z.B. als horizontale Navigationsleiste mit den entsprechenden CSS-Eigenschaften. Für kleinere Bildschirme kann mithilfe von CSS-Mediaqueries das Menü ausgeblendet werden und dafür ein Menü-Button platziert werden. Der Div-Container mit der id=“mobile-header“ wird standardmäßig mit der CSS-Anweisung display:none für größere Bildschirme ausgeblendet.
#mobile-header {
display: none;
}
@media screen and (max-width: 800px) {
#mobile-header {
display: block;
}
#navigation {
display: none;
}
}
Mithilfe dieser CSS-Anweisungen wird bei Bildschirmen mit einer Breite unterhalb von 800 Pixel die standardmäßig sichtbare Menüleiste ausgeblendet und der Menübutton erscheint. Wird nun der Menübutton betätigt, erscheint eine Seitenleiste, die sich vom Bildschirmrand in den Viewport schiebt und alles zuvor Sichtbare wird entsprechend der Breite der Seitenleiste verschoben. In einer vertikalen Seitenleiste mit einer Breite von 260px werden die Menüpunkte in vertikaler Anordnung angezeigt. Je nachdem welche CSS-Datei von den beiden mitgelieferten verwendet wird, erscheint die Seitenleiste in einer dunklen oder hellen Farbgebung. In den CSS-Deklarationen sind die entsprechenden Selektoren ersichtlich und können nach den eigenen Vorstellungen angepasst werden.
Wie bereits erwähnt, wird für die Funktion des Plugins noch ein Scriptblock benötigt. Das nötige Snippet für das soeben beschriebene, reaktionsfähige Menü schreibt sich wie folgt:
<script>
$('#responsive-menu-button).sidr({
name:'sidr-main',
source:'#navigation'
});
<script>
Der Script-Tag wird einfach am Ende des HTML-Dokumentes geschrieben. Wichtig dabei ist es, die benötigten IDs originalgetreu von den HTML-Elementen zu übernehmen, sonst funktioniert das Ganze nicht.
Ich habe festgestellt, dass sich die Seitenleiste nur durch nochmaliges Betätigen des Menübuttons wieder ausblenden lässt. Damit die Seitenleiste auch wieder verschwindet, wenn an einer beliebigen Stelle geklickt bzw. getippt wird, muss folgende Scriptanweisung hinzukommen:
$(window).click(function() {
$.sidr('close', 'sidr-main');
});
Abschließend kann gesagt werden, dass mithilfe des Sidr-Plugins auf sehr einfache Weise Bereiche einer Website versteckt werden können und per Knopfdruck erscheinen. Auch responsive Menüs sind sehr komfortabel in die Website integrierbar. Manchmal lässt die Performance etwas zu wünschen übrig, gerade auf mobilen Geräten. Auf der Website von Sidr ist weiterhin noch eine Möglichkeit für Multitouchgeräte dargestellt. Mithilfe einer Swipe-Geste ist die Seitenleiste ein- bzw. auszublenden. Diese Funktion hat mich allerdings nicht sonderlich überzeugt, da ständig beim vertikalen Scrollen die Seitenleiste eingeblendet wird, sobald der Finger etwas schräg über den Bildschirm gezogen wird. Auf dieses Feature sollte zu Gunsten der Usability der Website verzichtet werden.