 09 - Hintergrund-Farbwechsel (waagerechte Leiste)
Eine Menüleiste in einer Tabellenzeile (hier mit 6 Tabellenzellen). Die Textlinks sind CSS-formatiert, die Hintergrundfarben der Tabellenzellen werden mittels JavaScript-Anweisungen bei MouseOver verändert.
Menü 09-1A
Die Hintergrundfarbe der Tabellenzelle wechselt bei Mouseover durch die JavaScript-Event-Anweisung für
1) MouseOver (Mauszeiger wird über die Tabellenzelle bewegt)
2) MouseOut (Mauszeiger wird aus dem Bereich der Tabellenzelle bewegt)
onmouseover="this.bgColor='#DEDEDE';" onmouseout="this.bgColor='#C0C0C0';"
CSS-Anweisungen für die Textlinks - Menü 09-1A
<style type="text/css">
<!--
.textlink01 {
color:#FFFFFF;
text-decoration:none;
font-family:verdana,arial,helvetica;
font-size:8pt;
text-transform: none;
}
.textlink01:visited {
color:#FFFFFF;
}
.textlink01:hover {
color:#FFFFFF;
}
-->
</style>
Den gesamten Quellcode inclusive der Tabelle entnehmen sie bitte der Textdatei 'Quellcode 09-1A', für den sie oben im Kopf dieser Seite einen Link finden.
Beispiel 09-1B
Hier eine Variante, bei der ich zusätzlich transparente Grafiken einsetze. Dieses graue Menü (09-1B) können sie übrigens in eine Webseite intergriert als komplette Homepagevorlage herunterladen.
Manche mögen's grau. Eine unauffällige Navigation, gut geeignet für ein Informationsfenster mit unterschiedlichen Themen. Schlicht sauber und dezent wirkt eine graue Leiste, unauffällig an den oberen Rand 'geklebt'. Passt zu beinahe allen Farbtönen (siehe Beispiel).
Menü 09-1B
Die Textlinks (Größe, Farbe und Schrifttype) wurden mit CSS formatiert (Auszug)
<style type="text/css">
<!--
a.nav2:link {
font-family: Verdana,Arial,Helvetica, sans-serif;
font-size: 11px;
text-decoration: none;
color: #333333;
}
-->
</style>
Ob sie dieses Menü nun ohne MouseOver-Farbwechsel bzw. mit / ohne Pfeilgrafik einsetzen möchten bleibt ihnen überlassen.
verwendete Images:
Pfeil: (14x11) 
Trenner: (2x19) 
Email: (24x15) 
Home: (24x15) 
Variante mit alternativer MouseOver-Farbe
Die MouseOver-Farbe #FFDF00
Die Hintergrundfarbe wechselt bei MouseOver
onmouseover="this.bgColor='#FFDF00';" onmouseout="this.bgColor='#C0C0C0';"
Variante mit Hintergrundgrafik
dezent gestreifte Hintergrundgrafik 'stripes03.gif' 
<table background="stripes03.gif" ...
Die Textlinks haben die Klasse 'nav3'
<a class="nav3" href=" ...
 CSS-Anweisungen ausblenden / einblenden
CSS-Anweisungen
<style type="text/css">
<!--
a.nav3:link
{font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:11px;
text-decoration:none;
color:#6F6F6F;
text-transform:none;
font-weight:bold;
}
a.nav3:visited {
color:#6F6F6F;
}
a.nav3:hover {
color:#000000;
}
-->
</style>
Download
In der Sektion 'DOWNLOADS' können sie das komplette Beispiel herunterladen!
  HP-Vorlage H01
|
Home
Quellcode 09-1A
ZURÜCK 