» Navigation mit Rollover
geschrieben um 12:35 Uhr in Coding mit 383 Wörtern
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 LandrySchritt 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.
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
in den Linkcode ein.
Das wiederrum könnte dann so aussehen, also sieht der a-Tag danach so aus
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 
XOXO
Pasue
♂männlich, 15 Jahre (nur noch Tage bis zu meinem 16. Geburtstag) und lebt in der nähe von Trier, liebt O.C., California, Gossip Girl, viel zu viele Filme, Bring me the Horizon und viel zu viel 
