In diesem Artikel wird aus der Basis-Navigation eine vertikale Tab Navigation…
Kopiervorlage für Flex 2 mit Basis-Navigation:
Als Kopiervorlage dient das bisherige Layout aus dem Artikel “HTML Grundgerüst 3“.
Als erste kleine Anpassung wurde auch schon die Sprachangabe in das html-Element eingebaut. Wenn der HTML Quelltext jetzt über den HTML Validator geprüft wurde, sollten keine Fehler und keine Warnungen mehr angezeigt werden…
Die CSS Dateien sollten auch alle ordentlich validiert sein.
Der Weg zur Tab-Navigation:
Die Tab Navigation vertikal macht aus den Hyperlinks der Basis-Navigation Tabulator-ähnliche Menüpunkte. So sieht die Navigation dann schon etwas professioneller aus.
Statt jetzt hier den vollständigen Quelltext reinzukopieren, schauen wir nur mal auf die Navigation:
<ul>
<li><a href=”index.html”>Startseite 1</a></li>
<li><a href=”index.html”>Startseite 2</a></li>
</ul>Im HTML Quelltext gibt es noch nichts Neues.
In der Navigations-CSS-Datei (navibereich.css) wird es aber spannend:
nav li {
display: block;
list-style-type: none;
padding: 3px;
}Der Listenpunkt wird also zum Block-Element umgewandelt und die Listenaufzählungspunkte werden per “list-style-type: none” entfernt.
Anschließend werden nur noch die Hyperlink-Elemente (nav a) angepasst…
Nachfolgend nur zwei kleine Ausschnitte aus der Datei…:
nav a:link {
color: black;
background-color: white;
display: block;
text-decoration: none;
padding: 3px;
}
nav a:hover {
background-color: red;
color: black;
display: block;
text-decoration: none;
}Für die Tab- Navigation ist also die Hintergrundfarbe des “nav a:link-Elements“ zuständig. Der Mouse-over Effekt wird über das “nav a:hover-Element“ gestaltet…