zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Lavalamp-Effekt funktioniert nicht, wenn letzter Menüpunkt "aktiv" ist

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.05.2021, 16:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.04.2021
Beiträge: 3
Traginho befindet sich auf einem aufstrebenden Ast
Standard [gelöst] Lavalamp-Effekt funktioniert nicht, wenn letzter Menüpunkt "aktiv" ist

Hallo zusammen,

seit einigen Tagen bin ich auf der Fehlersuche eines banalen Problems.

Weshalb funktioniert denn hier der "Lavalamp"-Effekt unter dem Menü nicht mehr, sobald der letzte Menüpunkt ("Unterstützen") aktiv ist? Wähle ich einen anderen Menüpunkt aus, dann funktioniert wieder alles wie gewohnt. Ich schätze, dass ich irgendwo noch einen Denkfehler mit der strong.active-Klasse habe.

Das zugehörige CSS:

Code:
#navigation ul {
	position:relative;
	width:50em;
	margin:0 auto;
	padding:0;
	white-space:nowrap;
	display: flex	;
}
				
ul li {
	display:inline-block;
	text-align:center;
}

ul li a,
ul li a:hover,
ul li a:focus,
ul li strong.active {
	position:relative;
	top:0;left:0;right:0;bottom:0;
	display:inline-block;
	box-sizing:border-box;
	font-weight:normal;
	width:10em;
		/*Transition*/
		-webkit-transition:width .3s,right .3s;
		-moz-transition:width .3s,right .3s;
		-o-transition:width .3s,right .3s;
		transition:width .3s,right .3s;	
}

ul li:nth-child(1) a	{width:10em;}
ul li:nth-child(2) a	{width:10em;}
ul li:nth-child(3) a	{width:10em;}
ul li:nth-child(4) a	{width:10em;}
ul li:nth-child(5) a	{width:10em;}

ul li:last-child a::after {
	content:"";
	position:absolute;
	right:inherit;
	bottom:-3px;
	width:inherit;
	height:3px;
	pointer-events:none;
		/*transition*/
		-webkit-transition:all .5s ease;
		-moz-transition:all .5s ease;
		-o-transition:all .5s ease;
		transition:all .5s ease;
 }

ul li:nth-child(1) ~ li:last-child a	   {right:40em;width:10em;}
ul li:nth-child(2):hover ~ li:last-child a {right:30em;width:10em;}
ul li:nth-child(3):hover ~ li:last-child a {right:20em;width:10em;}
ul li:nth-child(4):hover ~ li:last-child a {right:10em;width:10em;}
ul li:nth-child(5):last-child:hover a	   {right:0;width:10em;}

ul li:hover ~ li:last-child a::after,
ul li:last-child:hover a::after	{background:#c351fa;}

ul li:last-child a	{min-width:10em;max-width:10em;}

ul li a:hover,
ul li a:focus,	{
	color:#c351fa;
	background-color:rgba(255,255,255,1);
	/*transition*/
		-webkit-transition:width .3s,right .3s,background-color .3s;
		-moz-transition:width .3s,right .3s,background-color .3s;
		-o-transition:width .3s,right .3s,background-color .3s;
		transition:width .3s,right .3s,background-color .3s;
}
Zur besseren Verständlichkeit des Problems habe ich sämtlichen unnötigen CSS-Inhalt entfernt. Es wird also tatsächlich nur der gewünschte "Schwebebalken" angezeigt.

Es funktioniert ja soweit alles problemlos - lediglich bei aktivem letztem Menüpunkt funktioniert die Lavalamp nicht mehr, sobald man über das Menü hovert.

Geändert von Traginho (03.05.2021 um 19:30 Uhr) Grund: Frage wurde beantwortet
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.05.2021, 09:30
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.153
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Wo ist der Punkt "Mitmachen" ?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 03.05.2021, 10:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.04.2021
Beiträge: 3
Traginho befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank für Deinen Hinweis!

Zitat:
Zitat von cloned Beitrag anzeigen
Wo ist der Punkt "Mitmachen" ?
Verzeihung, seit gestern Abend heißt dieser Menüpunkt nun "Unterstützen" anstelle von "Mitmachen".
Mit Zitat antworten
  #4 (permalink)  
Alt 03.05.2021, 10:39
top top ist offline
Neuer Benutzer
neuer user
 
Registriert seit: 06.01.2021
Beiträge: 11
top befindet sich auf einem aufstrebenden Ast
Standard

Dein animierter Balken wird mit "::after" vom Link im letzten Listenelement erzeugt. Bist du auf der letzten Seite, hast du dort nur noch ein "strong" und kein "a".

Wenn du dort dein "a" durch "> *" ersetzt, funktioniert es wieder:

Code:
#navigation #navigationsmodul ul li:last-child > *::after {
	content:"";
	position:absolute;
	right:inherit;
	bottom:-3px;
	width:inherit;
	height:3px;
	pointer-events:none;
		/*transition*/
		-webkit-transition:all .5s ease;
		-moz-transition:all .5s ease;
		-o-transition:all .5s ease;
		transition:all .5s ease;		}

#navigation #navigationsmodul ul li:nth-child(1) ~ li:last-child > * {right:40em;width:10em;}
#navigation #navigationsmodul ul li:nth-child(2):hover ~ li:last-child > * {right:30em;width:10em;}
#navigation #navigationsmodul ul li:nth-child(3):hover ~ li:last-child > * {right:20em;width:10em;}
#navigation #navigationsmodul ul li:nth-child(4):hover ~ li:last-child > * {right:10em;width:10em;}
#navigation #navigationsmodul ul li:nth-child(5):last-child:hover > *	{right:0;width:10em;}

#navigation #navigationsmodul ul li:hover ~ li:last-child > *::after,
#navigation #navigationsmodul ul li:last-child:hover > *::after	{background:#c351fa;}
Mit Zitat antworten
  #5 (permalink)  
Alt 03.05.2021, 19:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.04.2021
Beiträge: 3
Traginho befindet sich auf einem aufstrebenden Ast
Daumen hoch

Zitat:
Zitat von top Beitrag anzeigen
Dein animierter Balken wird mit "::after" vom Link im letzten Listenelement erzeugt. Bist du auf der letzten Seite, hast du dort nur noch ein "strong" und kein "a".

Wenn du dort dein "a" durch "> *" ersetzt, funktioniert es wieder:

Code:
#navigation #navigationsmodul ul li:last-child > *::after {
	content:"";
	position:absolute;
	right:inherit;
	bottom:-3px;
	width:inherit;
	height:3px;
	pointer-events:none;
		/*transition*/
		-webkit-transition:all .5s ease;
		-moz-transition:all .5s ease;
		-o-transition:all .5s ease;
		transition:all .5s ease;		}

#navigation #navigationsmodul ul li:nth-child(1) ~ li:last-child > * {right:40em;width:10em;}
#navigation #navigationsmodul ul li:nth-child(2):hover ~ li:last-child > * {right:30em;width:10em;}
#navigation #navigationsmodul ul li:nth-child(3):hover ~ li:last-child > * {right:20em;width:10em;}
#navigation #navigationsmodul ul li:nth-child(4):hover ~ li:last-child > * {right:10em;width:10em;}
#navigation #navigationsmodul ul li:nth-child(5):last-child:hover > *	{right:0;width:10em;}

#navigation #navigationsmodul ul li:hover ~ li:last-child > *::after,
#navigation #navigationsmodul ul li:last-child:hover > *::after	{background:#c351fa;}
Fantastisch! Ganz herzlichen Dank Dir!!
Mit Zitat antworten
Antwort

Stichwörter
animation, animationen, css, effekt, lavalamp, menü, menue, slider

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
Hoover effekt funktioniert nicht joni8a CSS 3 09.03.2013 14:54


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