Es ist schon etwas her, dass wir hier Techniken in Bezug auf „Responsive Websites“ vorgestellt haben.
Die Reihe soll nun wieder initiiert und in nächster Zeit nach und nach fortgesetzt werden.
In diesem Artikel und Tutorial geht es darum, wie mit wenig Aufwand eine simple responsive Navigation erstellt werden soll, die in allen Geräten und Displays funktioniert, indem sie sich dynamisch anpasst.

Auch diesmal sei erwähnt, dass bei diesem komplexen Thema keine umfassende Abhandlung entstehen soll, sondern ein praktischer Einblick vermittelt werden soll, wie mit einigen Handgriffen Lösungen bei der Entwicklung von responsiven Websites gefunden werden können.

In unserer Beispiel-Website gibt es im oberen Bereich mehrere Links, die in einer horizontalen Navigation angeordnet werden. In kleineren Displays sind horizontale Navigationen meist unbrauchbar. Vor allem je mehr Links dort untergebracht werden müssen. Hierfür macht es Sinn, die Links untereinander aufzulisten oder in ein Dropdown-Menü unterzubringen. Auf diese Weise kann Platz gespart werden, ohne auf Informationen oder Benutzerfreundlichkeit zu verzichten.

In unserem ersten Beispiel sind die Links oben in einer Reihe angeordnet. Verkleinert man jetzt das Browser-Fenster, werden die Links einfach untereinander aufgelistet. Probiert es aus und verkleinert das Browserfenster bis, die Navigation mehrzeilig wird.

Wie wurde das gemacht?

Die Navigation wurde in HTML als Liste mit 4 Elementen angelegt. Die wichtigsten CSS-Formatierungen sind die Breite von 25% je Listen-Element und die float-Eigenschaft.


ul li {
width:25%;
float:left;
}

Hierdurch passen sich die Listen-Elemente dynamisch der Breite des Browserfensters an und nehmen je Link immer 1/4 Breite der Gesamtbreite an.
Durch die Float-Eigenschaft werden die Listen-Elemente horizontal statt vertikal angeordnet.

Als nächstes definieren wir ein „Breakpoint“ mit Hilfe von „Media Queries“ für kleinere Display-Größen. Für Displays, die bis zu 767 Pixel breit sind, sollen andere CSS-Formatierungen gelten.

@media screen and (max-width: 767px) {
ul li {
float:none;
width:100%;
}
}

Bei Display-Größen bis 767 Pixel werden die die bisherigen CSS-Eigenschaften überschrieben.
Die Float-Eigenschaft wird von „left“ auf „none“ gesetzt, wodurch die Listen-Elemente in kleinen Displays vertikal aufgelistet werden, statt nebeneinander. Und die Elemente bekommen eine größere Breite (hier mit 100% gesamte Display-Breite), wodurch sie in kleinen Geräten gut „klickbar“ sind.

Das war jetzt die simpelste Möglichkeit, die Navigation responsive zu machen. Allerdings nicht in jedem Fall die praktikabelste. Bei einer größeren Zahl von Links muss man im Smartphone immer erst runterscrollen, um den gewünschten Content sehen zu können.

In unserem zweiten Beispiel haben wir deswegen die Links in ein Dropdown-Menü übertragen.
Die horizontale Navigation bleibt wie gehabt.
Aber es wird zusätzlich in HTML eine Dropdown-Menü angelegt.

<select>
<option value=“#1″>Eins</option>
<option value=“#2″>Zwei</option>
<option value=“#3″>Drei</option>
<option value=“#4″>Vier</option>
</select>

Jetzt müssen die CSS-Formatierungen angepasst werden, damit das Dropdown-Menü nur in kleineren Displays und die horizontale Navigation nur in größeren sichtbar ist.


nav select {
display:block;
}

nav ul {
display:none;
}

Das ist ganz leicht mit der Display-Eigenschaft zu lösen. In größeren Displays sind hier nur die Listen-Elemente sichtbar
Dann wie gehabt ein Media Query für kleinere Displays, wo die Display-Eigenschaft umgedreht wird:

@media screen and (max-width: 767px) {
nav select {
display:none;
}

nav ul {
display:block;
}
}

Als letztes muss noch eine kleine Funktion eingebunden werden, die ermittelt welches Element aus dem Dropdown-Menü angewählt wurde und den Value-Wert an die URL anhängt.
Wir setzen das mit jQuery um:
$(document).ready(function() {
$('nav select').change(function() { //Funktion ermittelt, welcher Button geklickt wurde...
var which_button_selcted = $(this).val(); // ..speichert den Wert des Value-Attributes
window.location.href = which_button_selcted; //...und übergibt ihn.
});
});

Probiert es wieder aus. In kleinen Displays ist das Dropdown-Menü sichtbar. Wählt man hier eins aus, kann man an der URL sehen, dass der Wert des Value-Attributes angehängt wurde.
Diese Möglichkeit ist für kleinere Displays schon viel sinnvoller, da platzsparend.

Als letztes Beispiel bauen wir die erste Möglichkeit etwas aus, indem ein zusätzlicher Button und ein kleiner Slide-Effekt per jQuery integriert wird. Ein Dropdown-Menü hätte bei komplexeren Navigationen mit mehreren Ebenen von Unternavigationen das Problem, dass sie schnell umständlich und unübersichtlich werden.
Zunächst orientieren wir uns an die erste Beispielseite, integrieren aber einen zusätzlichen Button noch vor dem <nav>-Tag.

In kleineren Displays soll der Button sichtbar sein und die Navigation erst einmal unsichtbar geschaltet sein.

@media screen and (max-width: 767px) {
button {
display:block;
}
nav {
display:none;
}
}

So weit, alles bisher bekannt.

Als nächstes definieren wir in jQuery ein Click-Event, bei dem die Navigation seitlich einfahren soll.


$(document).ready(function() {
$('button').click(function() { // bei Klick auf Button...
$('nav').stop().animate({'width': 'toggle'}); // .. Navi rein / raus
});

});

Das sind drei Möglichkeiten responsive Navigationen zu erstellen.
Das ist alles natürlich sehr simpel gehalten und man kann mit einigen ergänzenden Handgriffen alles etwas geschmeidiger und „schöner“ machen. 😉 Aber die Beispiele zeigen, wie man man mit wenig Aufwand schon responsive Elemente in Websites herstellt.
Beim letzten Beispiel hätte man den Vorteil, dass die Navigation immer nur zur Auswahl des gewünschten Links einfährt und sonst keinen „Platz“ benötigt. Außerdem ist das Prinzip auch für komplexere Navigations-Strukturen geeignet, da sich hier auch Unternavigationen einbinden lassen.

Demnächst gibt es mehr zum Thema Responsive Design

Weitere Artikel von Nima Sorouri