animierte CSS Menüs!


Was wäre die Webwelt ohne CSS, wahrscheinlich wäre diese Webseite auf dem Holzweg und vieleicht noch überflüssiger als jetzt schon… immerhin die Kommentare im Quellcode lohnen sich anzuschauen :P

Zurück zum Thema: da inzwischen ganz normale Webseiten besser animiert sind, als Hollywood Produktionen von vor 5 Jahren, und Werkzeuge wie Java, Ajax oder Flash in jeden Browser Einzug gefunden haben, wurde wohl die ganze Mächtigkeit der Style Sheets nie richtig erkannt. (oder nur von mir ignoriert??)

Für mich komplett neue Tips und Tricks hatte da Ralph G. Schulz auf seiner Webseite zu bieten, auf der mit Beispielen erklärt wird wie man mit purem CSS richtig hübsche und animierte Menüs erstellen kann.

Hier der Link direkt zu den Menüs : viel Spass beim Testen und Fluchen über den “stupid IE” ;)

edit:
hier noch eine kleine Erklärung zur Funktion (am ersten Beispiel):
Im HTML Code werden alle Menüs mit in der CSS Klasse “.aussen” definiert. Im Style Sheet wird am Ende nur mit der Pseudoklasse :hover gearbeitet, d.h. in der Klasse .aussen wird mit “overflow: hidden” alles ausserhalb der definierten Höhe ausgeblendet. Sobald der Mouseovereffekt registriert wird, wird die Klasse “.aussen:hover” aktiv und ändert die ursprünglich festgeschriebene Höhe auf “auto”, also wird auch das im HTML definierte Menü angezeigt.

Grüße,
Christian

  1. Bisher keine Kommentare.
(wird nicht veröffentlicht)