Beispiel-Rollover-Navigation Menue horizontal  

Beispiel-Rollover-Navigation Menue horizontal

Mit Bildertausch: die Buttons werden beim Überfahren mit der Maus ausgetauscht ( ohne JavaScript nur mit CSS )!

Das Menue konnte mit den beiden nachfolgenden Buttons umgesetzt werden:

ButtonButton Rollover

Um die beiden Buttons herunterzuladen, navigiere mit der Maus jeweils über diese und wähle mit der rechten Maustaste im Kontextmenü den Befehl "Grafik speichern unter ..."!
Weiter unten über den Download-Link wirst Du auf die Seite geleitet, über welche Du die Buttons auch in weiteren Farben herunterladen kannst.

Anweisung im Html-Dokument

 <div class="navi">
   <a href="#">Link 1</a>
   <a href="#">Link 2</a>
   <a href="#">Link 3</a>
 </div>

Anweisung im CSS-Style

.navi a:link, .navi a:active, .navi a:visited       
{ 
background: url('images/button.gif');
font: bold 12px/32px Verdana, Arial, Tahoma;
display: inline-block;
width: 132px;
height: 65px;
text-align: center;
text-decoration: none;
letter-spacing: 1pt;
color: #fff;
}
.navi a:hover       
{ 
background: url('images/button-rollover.gif');
color: #66CCFF;
}

Hinweis: Ggf. ist noch für die URL ( = Webadresse der Grafik ) der entsprechende Pfad zu notieren - bei Bedarf siehe über folgende externe Seite!

 zum Download 


Copyright by homepage-vorlagen-webdesign.de | Impressum | Datenschutz | Nutzungsbedingungen |

zurück