- Hinweise zu den Tutorials:
- Bitte aus dem kopierten Quelltext:
<p class="bitte_loeschen">.....</p>und die Gestaltungsanweisungen dazu entfernen.
Navi – Tabs
Sehr beliebt sind auch Menüs, die sich mit Tabs organisieren. Vielleicht ist euch in diesem Zusammenhang schon mal der Begriff Sliding Doors (Schiebetürentechnik) untergekommen.
Der Nachteil dieser Technik ist, das man pro Linkzustand jeweils zwei Grafiken braucht.
Diese Hintergrundbilder waren so weit ineinander geschoben, das sie sich beim Zoomen der Seite wie eine Schiebetür immer weiter auseinanderzogen.
Wir verwirklichen das Ganze mit CSS-Sprites (engl. für Kobolde, Geist), d.h. wir benötigen nur eine Grafik für alles. Diese wird einfach per background-position an die richtige Stelle geschoben.
Hier findest du die tabs_sprites_anfang.htm zum Quelltext rauskopieren.
Die benötigte Grafik kannst du dir hier holen: sprites_grafik.htm
So sieht die Grafik aus:
Der Normalzustand ist das obere Drittel der Grafik. In der Mitte der gehoverte Zustand und darunter der gerade „aktive“ Zustand.
Und das ist der Stand im Browser:
Der Quelltext der Navigation schaut so aus:
<div id="navigation"><ul id="navi"><li><a href="#"><span>Startseite</span></a></li><li class="aktiv"><strong>Übersicht</strong></li><li><a href="#"><span>Galerie</span></a></li><li><a href="#"><span>Impressum</span></a></li></ul></div>
Alle Menüpunkte sind noch zusätzlich in ein span gewickelt worden.
Der Listenpunkt der gerade aktiven Seite hat die Klasse .aktiv bekommen und das a ist durch strong ersetzt worden, damit es keinen Deppenlink gibt.
Jetzt wird ein wenig wild rumgefloatet und der Textbereich bekommt ein solides Clear, um ihn sauber von der Navigation zu trennen.
Bitte CSS ergänzen:
div#navigation {float:left;width:100%;}
ul#navi {float:right;}
ul#navi li {float:left;}
#inhalt {clear:both;}
Das div#navigation wird gefloatet damit es die Floats der ul einschließt.
Hätten wir jetzt einfach li das float:right; gegeben, hätte sich die Reihenfolge der Links im Browser umgekehrt.
Also wird die ulnach rechts gefloatet und li nach links.
a und span werden zum Blockelement erklärt. Ihnen wird eine andere Schriftfarbe zugewiesen und span bekommt etwas padding. Die Unterstreichung der Links wird entfernt.
Sowohl das a und das span bekommen die Hintergrundgrafik, lediglich die Positionsangaben unterscheiden sich.
Bitte CSS ergänzen:
/* Der Normalzustand der Links wird gestaltet */ul#navi a,ul#navi span {display:block;color:#fff;}
ul#navi a {background:url(sprites.png) no-repeat 0 0;font-weight:bold;text-decoration: none;}
ul#navi span {background:url(sprites.png) no-repeat 100% 0;padding:4px 15px 2px 0;}
Zwischenstand im Browser:
Nur die rechte Rundung der Hintergrundgrafik ist zu sehen. Links wird abrupt abgeschnitten. Das liegt daran das die span-HG-Grafik die a-HG-Grafik verdeckt.
Damit die linke Rundung der Hintergrundgrafik zu sehen ist benötigt das span einen linken margin.
Bitte CSS ergänzen:
ul#navi span {margin-left:15px;}
Sieht schon etwas besser aus!
Bitte CSS ergänzen:
/* Gestaltung der gehoverten Menüpunkte */ul#navi a:hover {background-position: 0 -100px;}
ul#navi a:hover span {color:#336699;background-position: 100% -100px;}
Der aktive Menüpunkt wird nun gestaltet.
Wie bei a und span bekommen strongund die Klasse .aktiv die Hintergrundgrafik mit unterschiedlichen Positionsangaben zugewiesen.
Bitte CSS ergänzen:
/* Menüpunkt der aktuellen Seite wird gestaltet */.aktiv {background: url(sprites.png) no-repeat 0 -200px;}
.aktiv strong {display:block;color:#336699;background: url(sprites.png) no-repeat 100% -200px;padding:4px 15px 2px 0;margin-left:15px;}
Soweit fast alles in Ordnung!
Im IE 6 ist nur der Text anklickbar und nicht die ganze Fläche.
a braucht HasLayout. Die normale Methode mit height:1px;
funktioniert hier leider nicht, das würde die Navi zerreißen. Also muss a auch floaten.
Bitte CSS ergänzen:
<!--[if lte IE 8]><style type="text/css">* html div#navigation a {float:left;}</style><![endif]-->
Endergebnis im Browser:
Inspiriert von:Fortgeschrittene CSS-Techniken
- Kategorien:
- Navigationen, XHTML/CSS
- Tags:
- menü, navi, sliding doors, sprites, tabs
- Kommentare:
- Kommentare verfolgen oder Kommentar abgeben
0 Kommentare und 3 Trackbacks/Pingbacks
Sprich und fürchte dich nicht:
« Skiplinks und Skiplinktabs – Fortgeschrittene CSS-Techniken »
[...] [...]
[...] [...]
[...] [...]