• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Leuchteffekt um einen Button + Klappmenü mit mehreren Einträgen

3ds

Neues Mitglied
Liebe Freunde! Ich bin gerade dabei für eine Vereinigung eine Website zu entwerfen und zu entwickeln. Dafür möchte ich ein dynamisches Menü einbauen, dass beim Überfahren mit dem Mauszeiger ausklappen kann. Gleichzeitig soll sich eine Corona um den Button bilden, über den der Mauszeiger schwebt. Dabei bin ich auch auf diese Beispiele gestoßen: de.selfhtml.org/css/layouts/navigationsleisten.htm Momentan habe ich schon geschafft, einen Leuchteffekt um den Button zu generieren, über welchen der Mauszeiger sich befindet. Allerdings nur, wenn der Button nicht in ein Submenü ausklappt. Das läuft mit einer CSS-Animation ab, die den Wert von Visibility von 0 auf 1 erhöht. Sobald der Zeiger sich in Position befindet startet die Animation. Die Grafik die den Leuchtbereich enthält liegt in einer Ebene über dem eigentlichem Button, ist aber im inneren transpartent, so dass beim Überfahren der untere Button sichtbar bleibt. Jetzt ist mein Problem, dass ich nicht weiß, wie ich Klappmenü und den Leuchefekt miteinander kombinieren kann, und ob der Besipielquelltext von Selfhtml dafür überhaupt hinreichend geeignet ist. Meine Zielvostellung sieht so aus: Ein Überfahren mit dem Mauszeiger bei einem einfachen Button löst beschriebenen Coronaeffekt auf. Bei einem überfahren mit dem Mauszeiger über einem Button mit Untermenü soll die Corona sich nicht nur um den urspünglichen Button, sondern über das ganze Submenü legen. Aller Effekt natürlich mit CSS-Animation. Welche Teile des Quelltextes benötigt ihr, damit ihr mich besser verstehen könnt?
 
CSS box-shadow wäre wohl das simpelste.
CSS Box Shadow | CSS-Tricks
In deinem Fall zum beispiel:
Code:
box-shadow: 0px 0px 5px 10px #ff0000;
(Schatteneigenschaften: [Oberer Abstand] [linker Abstand] [Kantenunschärferadius] [Schattenvergrößerung] [Farbe];)
Ergibt einen roten Radialschatten der 10px größer ist als die Box, dementsprechend nach allen Seiten 5px übersteht die vollständig geblured sind.
 
Zurück
Oben