zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Animation per CSS: Gleiteffekt beim Hovern in horizontaler Navbar

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.03.2018, 13:14
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.391
AndreasB wird schon bald berühmt werden
Standard 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.
__________________

Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.03.2018, 15:49
Benutzerbild von basti1012
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 184
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

Habe mal versucht das nachzu bauen ,aber ohne einen leeren extra div bekomme ich es auch nicht hin.Der div wird als slider benutzt der den orangen untergrund darstellt. Fals mir noch eine Lösung einfallen tut werdeich es hier mitteilen
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.03.2018, 11:35
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.391
AndreasB wird schon bald berühmt werden
Standard

Danke für Deinen Versuch.

Kann man eventuell das zusätzliche Markup durch ein absolut positioniertes Pseudoelement via :before (oder :after) vermeiden?
__________________

Mit Zitat antworten
  #4 (permalink)  
Alt 04.03.2018, 17:24
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von AndreasB Beitrag anzeigen
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?
Ehrlich, das klingt mittlerweile manisch.
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.
Mit Zitat antworten
  #5 (permalink)  
Alt 07.03.2018, 12:58
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.391
AndreasB wird schon bald berühmt werden
Standard

@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.
__________________

Mit Zitat antworten
  #6 (permalink)  
Alt 09.03.2018, 17:08
Benutzerbild von basti1012
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 184
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 09.03.2018, 18:19
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.391
AndreasB wird schon bald berühmt werden
Standard

@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.
__________________

Mit Zitat antworten
  #8 (permalink)  
Alt 09.03.2018, 20:42
Benutzerbild von basti1012
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 184
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

Das läst sich wohl auch reponsiv machen ,aber chau erstmal rein.Wenn dann noch einer den kleinen <li> Fehler raus bekommt sollte es ja gut sein, und dann machen wir es reponsiv.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:33 Uhr.