Ratgeber: "Webdesign"

Einblenden mit CSS

29.6.2012 von Dr. Florence Maurice

ca. 2:40 Min
Ratgeber
VG Wort Pixel
  1. Navigieren mit Responsive Design
  2. 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;
}

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 meis-ten 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.