Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 02.05.2021, 16:41
Traginho Traginho ist offline
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