Ratgeber: "Webdesign"

Einblenden mit CSS

Javascript-Code

Der Javascript-Code ist hauptsächlich für das dynamische Zuweisen der richtigen Klassen zuständig:

  • Ist Javascript aktiviert, wird dem HTML-Element die Klasse js zugewiesen. Auf diese Art können Sie eigene Formatierungen bei aktiviertem Javascript schreiben.
  • In der Navigation wird ein Schließen-Button ergänzt. Da dieser nur bei aktiviertem Javascript eine Funktion hat, ist es sinnvoll, ihn erst mit Javascript zu erstellen.
  • Außerdem wird abwechselnd bei Klick auf den Schließen- oder den Menü-Button die Navigation ein- oder ausgeblendet. Das eigentliche Ein- und Ausblenden erledigt CSS. Javascript bereitet diese Formatierungen vor, indem beim HTML-Start-Tag bei aktivierter Navigation die Klasse nav-spalte ergänzt wird; diese Klasse wird bei deaktivierter Navigation entfernt.
  • Ab einem gewissen verfügbaren Platz soll die Navigation immer angezeigt werden, dafür wird der verfügbare Platz mit Javascript ermittelt und ab einer bestimmten Größe die Klasse nav-spalte beim HTML-Start-Tag ergänzt.

Zuerst wird jQuery eingebunden:

<script src="http://
ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Dann folgt der Javascript-Code, der erst ausgeführt werden soll, wenn das Dokument vollständig geladen ist.

<script>
$(function(){

Sofern Javascript unterstützt wird, ergänzen wir beim HTML-Element die Klasse js.

$('html').addClass('js');

Außerdem wird der Schließen-Button hinzugefügt und am Anfang der Navigation platziert.

$('#navigation ul').before('<a href=
"#" id="nav-verstecken" >Schliessen</a>');

Jetzt kommt der entscheidende Teil: Beim Klick auf den Menü- oder Schließen-Button soll die Navigation abwechselnd ein- und ausgeblendet werden. Dafür ergänzen wir die Klasse nav-spalte beim HTML-Element - und entfernen sie wieder. Für das wechselnde Ergänzen und Entfernen sorgt toggleClass():

$('#nav-zeigen, #nav-verstecken').
on('click', function(){
$('html').toggleClass('nav-spalte');
return false;
});

Ab 100 Pixel verfügbarem Platz soll die Navigation immer angezeigt werden:

$(window).bind('load resize orientationchange', function(){
if ( window.outerWidth >= 1000 ) {
$('html').addClass('nav-spalte'); };
});
});</script>

Einblenden mit CSS

Für alle Situationen gibt es nun passende Klassen beim HTML-Start-Tag.

  • Ist Javascript nicht aktiviert, steht keine Klasse bei <html>.
  • Bei aktiviertem Javascript und bei kleinerem Bildschirm sieht das HTML-Start-Tag so aus: <html class="js">.
  • Wenn die Navigation angezeigt wird, haben wir hingegen folgendes HTML-Start-Tag: <html class="js nav-spalte">.

Mit diesem Wissen sind wir gerüstet, die Formatierungen vorzunehmen. Erst einmal zum Inhaltsbereich: Er wird relativ positioniert und von links um 0 verschoben; damit ist er ganz normal sichtbar. Außerdem ist eine CSS3-Transition, also ein Übergang definiert, wodurch das Ein- und Ausblenden später animiert erscheint:

#inhalt {
position: relative;
left: 0;
background-color: #fff;
-webkit-transition: left 0.3s ease;
-moz-transition: left 0.3s ease;
-o-transition: left 0.3s ease;
-ms-transition: left 0.3s ease;
transition: left 0.3s ease;
}

Bei aktiviertem Javascript - erkennbar an der Klasse js im HTML-Start-Tag - wird #navigation absolut positioniert; - das Ausblenden geschieht über display: none.

.js #navigation {
padding-top: 1em;
position: absolute;
top: 0;
left: 0;
display: none;
margin: 0;
}

Jetzt kommen die Formatierungen, die bei aktivierter Navigation gelten sollen. In diesem Fall hat das HTML-Start-Tag die Klasse nav-spalte, deswegen wählen die Selektoren .nav-spalte #navigation und .nav-spalte #inhalt die Elemente nur bei aktivierter Navigation aus.

Die Navigation wird über display: block eingeblendet. Außerdem erhält sie eine Breite von 50 Prozent.

.nav-spalte #navigation {
width: 50%;
display: block;
}

Der Inhaltsbereich muss Platz für die Navigation machen, er wird dafür um 50 Prozent nach rechts geschoben, und außerdem in der Breite begrenzt.

.nav-spalte #inhalt {
left: 50%;
width: 40%;
}

Wenn die Navigation nicht angezeigt ist, steht beim Inhaltsbereich left: 0, jetzt aber left: 50%: Der Unterschied zwischen 0 und 50 Prozent wird über die CSS3-Transition animiert, es sieht dann so aus, dass sich der Inhaltsbereich wahrnehmbar nach rechts schiebt.

Es fehlt noch die Darstellung der Links zum Ein- und Ausblenden. Der Menüpunkt zum Zeigen und Ausblenden der Navigation ist immer zu sehen.

#nav-zeigen {
/* Formatierungen nach Bedarf */
}

Der Schließen-Button ist hingegen im Normalfall ausgeblendet mit display: none:

#nav-verstecken {
display: none;
}

Aber der Schließen-Button wird sichtbar bei eingeblendeter Navigation:

.nav-spalte #nav-verstecken{
display: block;
}

dieses Thema

https://github.com/mattkersley/Responsive-Menu coding.smashingmagazine.com/2012/02/13/progressive-and- responsive-navigation/ filamentgroup.com/lab/responsive_design_approach_for_ navigation/ https://github.com/filamentgroup/RWD-Nav-Patterns www.stuffandnonsense.co.uk/blog/about/we_need_a_standard_ show_navigation_icon_for_responsive_web_design

Damit haben Sie eine funktionierende Basis mit einer dynamischen Navigation. Jetzt können Sie daran gehen, optische Verbesserungen durchzuführen. So wäre es sicher sinnvoll, die Breite der Navigation je nach verfügbarem Platz unterschiedlich zu definieren- mithilfe von Media Queries.

Das Wichtigste an diesem Beispiel ist die Bereitstellung der Klassen per Javascript; das Aussehen können Sie dann ganz frei per CSS steuern. Die Position der Navigation lässt sich ebenfalls verändern - sie könnte zum Beispiel genauso gut auch oben angezeigt werden.

Das richtige Icon

Bei zwei der vorgestellten Lösungen - der Ankernavigation und dem dynamischen Ein- und Ausblenden - brauchen Sie einen schönen Link oder Button zur Navigation. Wie soll dieser aber aussehen? Welche Beschriftung soll er haben? Dafür hat sich noch kein Standard herausgebildet. Teilweise sieht man Beschriftungen, die sich auf den Inhalt beziehen - bei Zeitungsauftritten liest man hier oft "Rubriken".

Schön wäre aber natürlich ein Symbol mit einer eindeutigen Identifikation. Andy Clarke ist bei seinen Untersuchungen sehr häufig auf ein Quadrat mit drei horizontalen Linien gestoßen. Es wird sich zeigen, ob sich dieses Icon etabliert.

Bei den hier vorgestellten Lösungen sollte auch eine für Ihr Responsive Design dabei sein. Die letzte Variante ist die aufwändigste, bietet aber die meisten Möglichkeiten für die Gestaltung und den größten Variationsreichtum. Und das dort benutzte Prinzip, dass Javascript nur zur Ergänzung der Klassen eingesetzt, das eigentliche Ein- und Ausblenden aber über CSS gesteuert wird, ist natürlich ebenso in vielen weiteren Fällen ein probates Vorgehen.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
Ben Stiller Owen Wilson Zoolander Hansel
Vorschau auf Film- und Serien-Highlights

Prime Instant Video lockt im September mit Highlights wie "Zoolander 2", "Die Tribute von Panem – Mockingjay 2" und der neuen Staffel von "Mr.…