Dynamische visuelle Menüs
(Auszug aus "CSS Kochbuch" von Christopher Schmitt)
Problem
Es soll ein Karteireiter-Navigationsmenü mit abgerundeten Ecken erstellt werden, das auch bei Änderungen der Textgröße noch korrekt dargestellt wird. Die Standarddarstellung sehen Sie in folgender Abbildung.
Abbildung: Das dynamische Karteireiter-Navigationsmenü.
Lösung
Zu Beginn erstellen Sie den nötigen Markup-Code für das Navigationsmenü:
<div id="header">
<h2>Persönliche Site dot-com</h2>
<h5>Navigationsmenü:</h5>
<ul>
<li><a href="/">Startseite</a></li>
<li><a href="/about/">Über uns</a></li>
<li><a href="/archives/">Archive</a></li>
<li><a href="/writing/">Schreiben</a></li>
<li id="current"><a href="/speaking/">Sprechen</a></li>
<li><a href="/contact/">Kontakt</a></li>
</ul>
</div>Danach erstellen Sie zwei Bilder für die Karteireiter. Eines der Bilder dient zur Darstellung der Links; das zweite wird für die Darstellung der gegenwärtig ausgewählten Seite benutzt. Teilen Sie die beiden Grafiken jeweils in zwei einzelne Dateien, wie in der nächsten Abbildung gezeigt.
Abbildung: Das zweigeteilte Bild für eine der beiden Karteireiter-Grafiken. Beachten Sie die abgerundeten oberen Ecken.
Die rechte Seite des Karteireiters wird nun im Hintergrund des Listeneintrags platziert:
#header li {
float: left;
background-image: url(tab_right.gif);
background-repeat: no-repeat;
background-position: right top;
margin: 0;
padding: 0;
}Die linke Seite des Karteireiters wird als Hintergrund des Anker-Elements definiert:
#header a {
display: block;
background-image: url(tab_left.gif);
background-repeat: no-repeat;
background-position: left top;
padding: 5px 15px;
color: #ccc;
text-decoration: none;
font-family: Georgia, Times, "Times New Roman", serif;
}Um das gegenwärtig betrachtete Webdokument in der Navigationsleiste darzustellen, wird das entsprechende Karteireiter-Bild zugewiesen:
#header #current {
background-image: url(tab_right_current.gif);
}
#header #current a {
background-image: url(tab_left_current.gif);
color: black;
}Das Bild mit der einen Pixel hohen Linie wird unterhalb der Karteireitergruppe platziert.
Diskussion
Die Verwendung von Text in den Navigationslinks dient drei Kriterien der Webentwicklung:
- Zugänglichkeit
- Design
- Wartbarkeit
So können beispielsweise Benutzer mit Sehproblemen die Darstellung des Navigationsmenüs nach Bedarf anpassen, wie in folgender Abbildung gezeigt.
Abbildung: Das vergrößerte Navigationsmenü.
Da Benutzer den Text sehr stark vergrößern können, müssen auch die Hintergrundbilder für die Karteireiter recht groß sein, ansonsten funktioniert das Design nicht mehr (siehe nächste Abbildung). In dieser Lösung besitzen die Grafiken für die Karteireiter daher eine Breite von jeweils 450 Pixeln.
Abbildung: Das Design einiger Karteireiter funktioniert nicht mehr.
Diese Methode wird von vielen Webentwicklern bevorzugt, da die Linkliste leicht zu warten ist. Soll eine Beschriftung verändert oder ein Tippfehler verbessert werden, braucht der Entwickler nur den HTML-Code anzupassen, ohne extra ein Bildbearbeitungsprogramm zu bemühen.
Ein weiterer Vorteil dieser Methode besteht darin, dass die Karteireiter grafisch ansprechender gestaltet werden können. Im Rezept Horizontale Navigationsmenüs finden Sie eine Anleitung zum Erstellen einer Karteireiter-Navigation mittels der Eigenschaft border, die ohne abgerundete Ecken auskommen muss. Mit dem hier besprochenen Rezept können Webentwickler die Karteireiter hingegen mit abgerundeten Ecken oder Farbverläufen versehen, um die Darstellung ansprechender zu gestalten.
Siehe auch
Das Rezept Pull-Quotes mit Bildern, in dem die sogenannte Gummiband-Methode zum Erstellen von Pull-Quotes mit Bildern beschrieben wird und den Artikel "Sliding Doors of CSS, Part II", in dem auch auf diese Art der Karteireiternavigation eingegangen wird.
| << zurück | vor >> |
| Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln