Ratgeber: "Webdesign"

Einblenden mit CSS

21.6.2012 von Dr. Florence Maurice

ca. 4:15 Min
Ratgeber
VG Wort Pixel
  1. Responsive Design: Möglichkeiten der Navigation
  2. 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 lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.