|
||||
Animation per CSS: Gleiteffekt beim Hovern in horizontaler Navbar
In der horizontalen Navbar auf Gäste-Etage gibt es einen Gleiteffekt, den ich schön finde.
Derjenige der es gebaut hat, setzt dafür jedoch zusätzliches inhaltsleeres Markup in Form eines DIV direkt unter der Liste ein. Und Inline-Styles mit vermutlich ausgerechneten Werten. Beides möchte ich nicht. Ich bin mit Animationseffekten via CSS noch unerfahren. Kennt ihr eventuell ein schönes Beispiel mit so einem horizontalen "Gleiteffekt", welches ohne so ein extra DIV auskommt? In der genannten Seite kommen opacity, transform und transition zum Einsatz.
__________________
|
Sponsored Links |
Sponsored Links |
|
||||
Zitat:
Ein zusätzliches Element in einer dynamischen Seite willst du vermeiden - warum denn? Welchen Sinn soll das haben? Welchen Vorteil erhoffst du dir damit? Wir sind alle Freunde des aufgeräumten und sinnvollen HTML Code, aber wir leben nicht mehr in den 80'ern, wo man um jedes Byte kämpfen musste. Und mehr oder weniger "sinnlose" Elemente gehören zu jedem guten HTML Layout dazu - einfach um auch in Zukunft flexibel bleibst. |
|
||||
@Basti
Gefunden habe ich noch: Menu en full CSS style Lavalamp - Animer les pseudo-éléments avec CSS pour réaliser un menu style Lavalamp - CSS3 Create Es kommt ohne Extra-Markup aus, indem per CSS ein Pseudoelement eingefügt wird. Leider muss für jeden Menüeintrag im CSS individuell eine Breite in em angegeben werden. Unschön für die Wartbarkeit. Und vermutlich entstehen so auch ungleichmäßig große Abstände, das habe ich noch nicht im Detail geprüft. Leider kann man per CSS nicht durch das Ereignis "Hovern auf Element, getroffen durch 'selector1'" einem anderem Element "getroffen durch 'selector2'" keine Deklaration zuweisen.
__________________
|
|
||||
Das wahr ein Krampf Man man.
Ohne Extra div und ohne Javascript. Nur ein <li> ,den Fehler muß man noch suchen. https://codepen.io/basti1012/pen/VXYwvx Nur ein Fehler bekomme ich nicht weg ,vieleicht findet den wer anders. Ich habe ein leeres <li> hinten dran gehangen ,aber nur weil er sonst kurz vorm ende anhält.Funktioniert super nur das letzte Stück will er einfach nicht durch Sliden. Habe das <li> Da jetzt rein gemacht weil es so Perfekt ist. Aber vieleicht kann mal einer kucken,weil eigentlich muß das auch ohne den leeren <li> gehen weil es für mich keinen ersichtlichen Grund gibt,warum er nicht durch slidet |
|
||||
@Basti
Erstmal herzlichen Dank Ich gucke mir das morgen in Ruhe an. Wenn ich es auf die Schnelle richtig sehe, hast Du absolute Breitenangaben in px verwendet. Ich möchte responsives Design ohne fixe absolute Angaben. Vermutlich ist so ein Gleiteffekt unter dieser (ganz normalen) Rahmenbedingung unmöglich.
__________________
|
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
bild per css mittig setzen | irmen | CSS | 4 | 25.08.2014 12:38 |
DropDown Menü per CSS | ad89 | CSS | 7 | 16.08.2013 16:40 |
Ecken abrunden per css | Zombiehunter | CSS | 2 | 15.12.2012 01:03 |
CSS Datei ändern per Hyperlink | einfachder | CSS | 3 | 14.02.2009 11:12 |
"Fusszeile" per CSS? | derSESO | CSS | 3 | 02.02.2005 01:44 |