Wie Rollover der horizontalen Navigationsleiste

Übergeben Ihren Mauszeiger über eine Website-Navigationsleiste kann verursachen, die Menü-Buttons oder Links ändern Farbe oder entfalten um Untermenüs anzuzeigen. Kodierung des Rollover-Effekts ist recht einfach. Erstellen Sie ein Menü, das eine Reihe von Schaltflächen am oberen Rand Ihrer Website erstreckt sich, und wenn ein Besucher den Cursor über eine Schaltfläche im Menü bewegt, ändert sich die Farbe der Schaltfläche Farben aufgrund der angewandten Rollover-Funktion.

Anweisungen

1 Öffnen Sie Ihre HTML-Datei in Editor oder Ihre bevorzugte nur-Text-Editor. Fügen Sie diesen Code auf Ihre cascading Stylesheet, das Steuerelemente zu Ihrem Menü übergibt:

Navcontainer ul {

Textabstand links: 0;

Rand Links: 0;

Hintergrundfarbe: #036333;

Farbe: weiß;

Float: left;

Breite: 100 %;

Font-Family: arial, Helvetica, sans-Serif;

}

Navcontainer Ul li {display: Inline;} Navcontainer Ul li a {

Polsterung: 0.2em 1em;

Hintergrundfarbe: #036333;

Farbe: weiß;

Text-Decoration: none;

Float: left;

Rand rechts: 1px Solid #fff;

}

Navcontainer Ul li a: Hover {

Hintergrundfarbe: #369888;

Farbe: #fff;

}

2 Ersetzen Sie beide Instanzen von "036333" mit den gewünschten Farbcode für die Menüleiste und Schaltflächen, wenn niemand über sie mousing ist. Ersetzen Sie "369888" mit den gewünschten Farbcode für die Schaltflächen zu ändern, wenn ein Besucher über sie Mäuse (siehe Ressourcen für hexadezimale Farbkarte). Ersetzen Sie die Farbe "Weiß" durch die Farbe der Schaltflächentext sein soll. Ersetzen Sie "arial, Helvetica, sans-Serif" mit den Namen der gewünschten Schriftart.

3 Fügen Sie diesen Code zwischen den Body-Tags Ihres HTML-Dokuments:

< Div Id = "Navcontainer" >

< Ul Id = "Navlist" >

< li Id = "aktiv" >< a Href = "http://www.itemonelink.com" Id = "aktuell" > ein Element </a >< / li >

< li >< a Href = "Item" > http://www.itemtwolink.com "> Element zwei </a >< / li >

< li >< a Href = "Item" > http://www.itemthreelink.com "> Element drei </a >< / li >

< li >< a Href = "Item" > http://www.itemfourlink.com "> Item vier </a >< / li >

< li >< a Href = "Item" > http://www.itemfivelink.com "> Item fünf </a >< / li >

</ul >

< / Div >

4 Ersetzen Sie "Element One," "Element zwei" etc., mit den Namen der einzelnen Schaltflächen. Ersetzen Sie jeweils die URLs auf derselben Zeile wie die Namen, mit dem speziellen Link, wo Sie wollen Besucher geleitet, wenn sie auf diese Schaltfläche klicken.

5 Speichern Sie und laden Sie Ihre HTML-Datei.