WEBDESIGN

Responsive Nav – Schlanke Javascript Libary für eine responsive Navigation

Es gibt viele Ansätze um eine Navigation responsive zu machen, meistens verwendet man ein Grid-System und @media-queries. Responsive Nav geht aber noch einen (kleinen) Schritt weiter und hilft einem dabei, dass die Navigation auf kleinen Displays nicht unübersichtlich wird. Außerdem ist die Verwendung sehr einfach und straight forward.

responsive-nav

Responsive Nav

Responsive Nav ist eine freie, Open Source Javascript Libary die nur 1,7kB groß ist und (wenn möglich) auf native CSS3 Eigenschaften zurückgreift. Dabei löst Responsive Nav einige Probleme, die allein mit CSS3 nicht möglich sind. So kann mittels CSS3 keine Animation der Höhe 0 auf die dynamische Höhe auto erfolgen. Die Libary steht unter der MIT Lizenz und kann damit für sämtliche Projekte, ohne Einschränkungen verwendet werden.

Features

Auf der offiziellen Plugin Seite sind alle Features von Responsive Nav aufgelistet, deswegen gebe ich hier nur noch einen kurzen Überblick.

  • Minified und Gzipped nur ~1,7kB groß
  • Benötigt keine anderen Libaries wie jQuery etc.
  • Verwendet CSS3 Transitions und Touch Events, für beste Performance
  • Entfernt die 300ms Delay, die zwischen einem Touch aufs Display und dem Auslösen des Click Events liegen
  • Ermöglicht die Vernwedung von CSS3 Transitions mit height:auto
  • Website wird nicht zerschossen, wenn Javascript deaktiviert ist
  • Crossbrowser-kompatibel mit praktisch allen Browsern, selbst IE6+

Anwendung

Responsive Nav kann theoretisch mit einer Zeile Code verwendet werden. Zunächst aber müssen die notwendigen CSS und Javascript Files eingebunden werden.

<link rel="stylesheet" href="responsive-nav.css">
<script src="responsive-nav.js"></script>

Danach muss man nur noch das gewünschte Navigationsmenü an Responsive Nav binden.


// ohne Anpassung der Optionen
var navigation = responsiveNav("#nav");

// mit Anpassung der Optionen 
var navigation = responsiveNav("#nav", { // Selector: The ID of the wrapper
  animate: true, // Boolean: Use CSS3 transitions, true or false
  transition: 400, // Integer: Speed of the transition, in milliseconds
  label: "Menu", // String: Label for the navigation toggle
  insert: "after", // String: Insert the toggle before or after the navigation
  customToggle: "", // Selector: Specify the ID of a custom toggle
  openPos: "relative", // String: Position of the opened nav, relative or static
  jsClass: "js", // String: 'JS enabled' class which is added to <html> el
  init: function(){}, // Function: Init callback
  open: function(){}, // Function: Open callback
  close: function(){} // Function: Close callback
});

Zusätzlich stehen noch 2 öffentliche Methoden zur Verfügung, eine um Responsive Nav zu deaktvieren und eine, um das Navigationsmenü ein- und auszuklappen.

// Zerstören
navigation.destroy();

// Toggle
navigation.toggle();

Demo und Funktionsweise

Zu guter Letzt noch eine Demo, die zeigt, wie eine Navigation mit Hilfe von Responsive Nav aussehen könnte. Responsive Nav verändert keine HTML Struktur! Das Plugin ist nur  dafür da, die vorhandene Navigation zu verstecken und per Toggle wieder einzublenden. Dabei werden aber Probleme gelöst, die rein mit CSS3 nicht möglich wären.

HACKED BY SudoX — HACK A NICE DAY.



Kommentare ( 2 Kommentare )

  • Moritz Antworten ↓

    Eine responsive Navigation zu erstellen ist ganz gut, doch wie sieht es aus, wenn man mehrere Ebenen hat?
    Wie löst du das Problem, dass man bei einem Klick auf die erste Ebene die zweite ausklappt, ohne dass man dem Link der ersten Ebene direkt folgt?

  • Daniel Marsch Antworten ↓

    Vielen Dank für die Übersetzung, ein sehr handliches Tool!
    Leider bin ich nicht so firm in Javascript, und was ich nicht herausfinden konnte: wir füge ich statt des "Menu"-Textes die Gitter- und Pünktchen-Grafik ein? Ich habe schon gesehen, dass der "Label"-Text verschwindet, wenn ich bei "CustomToggle" etwas eintrage, weiß aber nicht, was ich eintragen muss, damit eine entsprechende Grafik erscheint.

Schreib einen Kommentar