Einblenden mit CSS
- Navigieren mit Responsive Design
- 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,...
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.
