Navigation mit Rollover Coding
geschrieben am 31.Mai 2008, um 12:35 Uhr mit 383 Wörtern von Pasue

Stimmung: gut Musik: nichts TV American High | »

Heute habe ich euch mal wieder ein Tutorial mitgebracht. Da ich mir lange überlegt habe, was ich denn so erlären könnte, bin ich zu dem Schluss gekommen: Ich erkläre euch wie man eine “Button-Navigation” mit einem schicken Rollover machen kann. Das ganze funktioniert mit CSS und ist total einfach!

So sollte das ganze aussehen, wenn es fertig ist:

photo credit: Aaron Landry

Schritt 1
Als erstes fügst du folgenden Code in deine CSS Datei ein. Du kannst ihn beliebig verändern und anpassen, denn alle Angaben sind nur Beispielangaben. Achte aber darauf, dass dieser Part erst nachdem Part kommt, in dem du die Links in deiner CSS angepasst hast.

a.nav, a.nav:link, a.nav:active, a.nav:visited {
height:10px;
padding: 2px;
color:#F5428D;
border-bottom:1px solid #DBECBC;
display:block;
text-transform:uppercase;
background:#C6E094;
}
a.nav:hover {
height:10px;
padding:2px;
color:#F5428D;
border-bottom:1px solid #DBECBC;
display:block;
text-transform:uppercase;
background:#B4D773;

}

Schritt 2
Nun öffne die Seite, wo deine Navigation sein soll.
Füge

class = nav

in den Linkcode ein.
Das wiederrum könnte dann so aussehen, also sieht der a-Tag danach so aus

< a href = "link.de" class = "nav" > ich bin der 1 link< / a >

Tipp!
Du kannst verschiedene “Buttons” machen, in dem du den Code beliebig oft in deine CSS einfügst, achte aber darauf “nav” immer anders zu nennen, zB.: nav2, nav3 ….

Das war’s auch schon und es war doch wirklich nicht schwer oder? Fragen können wie immer per Kommentar gestellt werden