Contao-Camp 2024
Ergebnis 1 bis 5 von 5

Thema: CSS: Lavalamp-Effekt im Menü - bei aktivem Last-Child keine Funktion mehr

  1. #1
    Contao-Nutzer
    Registriert seit
    15.12.2012.
    Beiträge
    121

    Standard CSS: Lavalamp-Effekt im Menü - bei aktivem Last-Child keine Funktion mehr

    Hallo zusammen,

    seit einigen Tagen bin ich auf der Fehlersuche eines banalen Problems. Bennie hat mir schon ganz gut weitergeholfen, aber ich habe noch nicht des Rätsels Lösung gefunden.

    Weshalb funktioniert denn hier der "Lavalamp"-Effekt unter dem Menü nicht mehr, sobald der letzte Menüpunkt ("Mitmachen") 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;
    }
    Es funktioniert ja soweit alles problemlos - lediglich bei aktivem letztem Menüpunkt funktioniert die Lavalamp nicht mehr, sobald man über das Menü hovert.

    Update:

    Falls der obige Link nicht funktionieren sollte: https://test.passion.earth/startseite.html
    Geändert von KloBoBBerLe (01.05.2021 um 11:37 Uhr)

  2. #2
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.715
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Leider funktioniert der Link nicht. Damit kann man sich das nicht anschauen.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  3. #3
    Contao-Nutzer
    Registriert seit
    15.12.2012.
    Beiträge
    121

    Standard

    Besten Dank für Deine Rückmeldung!

    Zitat Zitat von mlweb Beitrag anzeigen
    Leider funktioniert der Link nicht. Damit kann man sich das nicht anschauen.
    Tatsächlich? Wenn ich auf "hier" klicke, dann wird bei mir die Seite geöffnet.

    Zur Sicherheit aber noch mal alleinstehend:

    https://test.passion.earth/startseite.html

    Zur besseren Verständlichkeit des Problems habe ich sämtlichen unnötigen CSS-Inhalt entfernt. Es wird also tatsächlich nur der gewünschte "Slider" angezeigt.
    Geändert von KloBoBBerLe (01.05.2021 um 11:37 Uhr)

  4. #4
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.715
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Leider bei mir noch immer nicht.

    2021-04-25_error.jpg
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  5. #5
    Contao-Nutzer
    Registriert seit
    15.12.2012.
    Beiträge
    121

    Standard

    So, jetzt funktioniert der Link.

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •