 Menü 13
Bei der Überarbeitung ist ein völlig neues Menü entstanden! Hier geht (beinahe) alles. Für jeden Menüpunkt können 2 Farbwerte (Text- und Hintergrundfarbe) für die 4 Mausaktionen individuell festgelegt werden. Das schafft 8 Möglichkeiten der Farbwahl, die natürlich nicht alle ausgeschöpft werden müssen.
Überwachte Mausaktionen: MouseOver, MouseOut, MouseDown, MouseUp
Außerdem steht CSS für die Texte der Links zur Verfügung! (siehe Bsp. 13d)
Spielkram, verspielt oder sinnvoll, das hängt von den gewählten Farben und vom Einsatzort dieses Menüs ab. Nicht nur auf Kinderseiten findet diese Menü-Variante einen passenden Einsatz. Denn es kann durchaus dezent eingefärbt werden und nicht jede Möglichkeit der Farbgebung muss unbedingt ausgeschöpft werden (z.B. bei 13d, der besuchte Link wird angezeigt). Testen sie selbst ... und vergessen sie nicht zu Klicken (MouseDown-Option)!
Version 13 a
|
Version 13 b
|
Version 13 c
|
Version 13 d
|
Version 13 b horizontal
|
Bei dieser CSS / Javascript-Kobination ist es ohne großen Aufwand möglich, beim MouseOver einzelne Links farblich hervorzuheben oder sogar alle unterschiedlich einzufärben. Bis zu 8 Farbwerte können übergeben werden.
Aufwand:
- CSS-Anweisung in den HEAD kopieren
- JavaScript in den HEAD kopieren
- CSS-Anweisungen zur Textgestaltung anpassen
- Links innerhalb einer Tabelle notieren
- Zellen-Hintergrundfarbe eintragen (optional)
- in die td-Tags die Funktionsaufrufe einkopieren
- Farbwerte eintragen
Möglichkeiten der Farbgestaltung mittels JavaScript:
| Aktion |
Textfarbe |
Hintergrundfarbe |
kollidiert mit |
| MouseOver |
 |
|
|
| MouseOut |
|
|
|
| MouseDown |
|
|
|
| MouseUp |
|
|
MouseOut |
MouseUp wid in Bsp. 13 d eingesetzt, dafür wurde auf MouseOut verzichtet.
Notierung für die Tabellenzelle mit Link - Bsp. 13 a, b, c
<td bgcolor="#FFFFFF"
onMouseover="NavOver3(this, '#9E8DE3', '#000000')"
onMouseout="NavOut3(this, '#FFFFFF', '#000000')"
onMouseDown="NavDown3(this, '#000000', '#B3AAEC')">
<a href="#" class="navlink2"> Textlink </a>
</td>
Notierung für die Tabellenzelle mit Link - Bsp. 13 d
<td bgcolor="#FFFFFF"
onMouseDown="NavDown3(this, '#B3AAEC', '#000000')">
onMouseUp="NavUp3(this, '#D5D0F4', '#000000')">
<a href="#" class="navlink1"> Textlink </a>
</td>
Möglichkeiten der Textgestaltung mittels CSS-Unterklasse:
| CSS |
Beschreibung |
Beispiel |
|
| color: |
Farbe |
#00CC33; |
|
| font-family: |
Schrifttype |
Arial; |
|
| font-size: |
Größe |
12px; |
|
| font-weight: |
Gewichtung |
normal; |
|
| text-decoration: |
Dekoration |
none; |
|
| text-transform: |
Umwandlung |
uppercase; |
|
CSS-Notierungen für den Linktext
<style type="text/css">
<!--
*/ nur für Bsp. 13 d /*
.navlink2 {
color:#000000;
text-decoration: none;
font-family: Arial;
font-size: 12px;
font-weight: normal;
text-transform:none;
}
.navlink2:hover {
color:#FF7300;
text-decoration: none;
font-family: Arial;
font-size: 12px;
font-weight: bold;
text-transform:none;
}
*/ für alle anderen /*
.navlink2 {
color:#000000;
font-family: Arial;
font-size: 12px;
font-weight: normal;
text-decoration: none;
text-transform:uppercase;
}
-->
</style>
der Textlink
<a href="dateiname.htm" class="navlink2"> Textlink 1</a>
JavaScript im Head - für die 3 Funktionen
<script type="text/javascript" language = "javascript">
<!--
function NavOver3(elem, farbe1, farbe2)
{elem.style.backgroundColor = farbe1;
elem.children.tags('a')[0].style.color = farbe2;
elem.style.cursor = 'hand'}
function NavOut3(elem, farbe1, farbe2)
{elem.style.backgroundColor = farbe1;
elem.children.tags('a')[0].style.color = farbe2;}
function NavDown3(elem, farbe1, farbe2)
{elem.style.backgroundColor = farbe1;
elem.children.tags('a')[0].style.color = farbe2;}
function NavUp3(elem, farbe1, farbe2)
{elem.style.backgroundColor = farbe1;
elem.children.tags('a')[0].style.color = farbe2;}
//-->
</script>
|
WWW.WEB-TOOLBOX.NET
Textdatei 
ZURÜCK