CSS Mouseover : Ein Menue ohne Grafik ( Button ) oder nur mit 2 Grafiken ( 2 Buttons) für ein komplettes Menue

Liebe Besucher, das hört sich doch toll an, oder.....

hier finden Sie nachstehend Menüs mit CSS Textlink Mouseover.

Dieser CSS Onmouseover Effekt wird auch Hover Mouseover genannt. Erstellen Sie also einen Link oder mehrere Links als Text so schnell wie nie.

Der Hover Mouseover hat sich gegenüber dem Javascript-Mouseover (nur) bezüglich der Anwendung auf Menues durchgesetzt.

Folgende Vorteile sind hier gegenüber dem Javascript-Mouseover erkennbar.

• Der CSS-Mouseover funktioniert ohne Javascript und erscheint damit auch ausnahmslos in allen Browsern, also auch solchen, die Javascript deaktiviert, d.h. bewusst oder vielleicht unbewusst (bei Anfängern) ausgeschaltet haben


• Jedes Menü ist mit Textlinks erstellt. Das erleichtert Ihre Arbeit, denn Sie sind flexibler.


• Der CSS-Mouseover kann ganz ohne Grafik auskommen ( dann Mouseover per Hintergrundfarbe, Rahmenfarbe, Schriftfarbe oder ähnliches )


• Wenn beim CSS Mouseover Grafiken verwendet werden- was die Optik steigert, so kommt er nur mit den selben 2 Grafiken ( eine für den Ausgang und eine für den Mouseover ) für ein komplettes Menü aus [siehe hier Menü 10] - egal wie viele Links ! )
  
  
  (Zum Vergleich: Beim Javascript-Mouseover müsste man für jeden Link eine Grafik anlegen und auch für jeden Mouseover eine weitere Grafik (denn hier kann man nicht mit Textlinks arbeiten, da die Grafik nicht in den Hintergrund, also hinter den Text gelegt werden kann) - Das kostet dann jede Menge Ladezeit und ist arbeitstechnisch sehr uneffektiv. So müsste man bei einem 6-Link-Menü mit Mouseover gleich 12 unterschiedliche ! [statt 2] Grafiken verwenden.)

Menüs 1 - 13

Diese Auswahl soll Ihnen zeigen, wie vielfältig die Menüs sein können, obwohl alle auf den gleichen Grund-Quelltext zugreifen.
Eine Aufzählung aller und insbesondere kreaitiver Möglichkeiten würde an dieser Stelle den Rahmen sprengen.

Je nachdem ob und wie in das Menü Grafiken eingearbeitet sind, lässt sich beim Ausgangszustand als auch beim Mouseover-Zustand alles oder weniger ändern.

Zu Ändern wären z.b. je nach Auslegung (eher mit oder eher ohne Grafik) sowohl beim Ausgangszustand als auch zusätzlich beim Mouseover:

- Schriftfarbe, Schriftfamilie, Schriftstil, Schriftgrösse
- Rahmenfarbe gesamt als kompletter Rahmen, Rahmengrösse (ggflls. mehr als 1px Standard),
- Rahmenfarbe nur links, nur rechts, nur unten oder nur oben oder Mischformen.
- Hintergrundfarbe oder Hintergrundgrafik der Buttons.
- Hintergrundfarbe des kompletten Menüs
- Linkunterstreichung AN (und Linkunterstreichungsfarbe) oder Aus
- Vorzeichen farblich ändern oder kein Vorzeichen.
- Zeilenabstand zwischen den Buttons.

Bitte experimentieren Sie selbst ein wenig.

Zu unterscheiden sind hierbei folgende Zustände: Ausgangs-Button und Mouseover-Button.

Sowie auch unterschiedliche Vorzeichen wie folgt:

Vorzeichen (Quadrat, Kreis, Pfeil oder Sonstiges) können sowohl
Text (4,5,6,7)
als auch Grafik (12,13)
sowie auch Html-Listenzeichen (2,3,8,11) sein.