[TYPO3-german] Slider verdeckt Sticky-Menu

[Emil-WebDesign.net]

Quote: Björn Hahnefeld wrote on Mon, 03 October 2016 16:44
----------------------------------------------------
> Grundsätzlich scheint das zu funktionieren :)!
> 
> ABER: Es bleibt im Quelltext dann "class" im Tag stehen. Ist zwar die
> Klasse entfernt, aber das Tag nicht sauber gelöscht... :(

Es bleibt nicht im Quelltext, weil es da nicht eingetragen werden kann. Du siehst es im Browser-Cache, nachdem der Browser den Quelltext verarbeitet hat.
Theoretisch könntest Du statt „remouveClass" „removeAttr( 'class' )" nehmen, wenn Du sicher bist, dass „class" nicht woanders gebraucht wird.
Ich verstehe aber nicht, warum Dich das überhaupt stört.

Quote: Björn Hahnefeld wrote on Mon, 03 October 2016 17:03
----------------------------------------------------
> Ich habe das einmal über meinen Content-Bereich eingefügt. Findest du
> nicht, dass das durchaus geschmeidig aussieht? Übrigens habe ich dafür
> keine Klasse angelegt, sondern die Änderungen direkt als Style (.css)
> geschrieben. Ich meine, dass es nicht das Design stört... Was ist deine
> Meinung?

Wolltest Du nicht die ganze Seite abdunkeln? ;)
Darauf bezog sich auch meine Aussage.

Ich finde alles gut, was die Bedienbarkeit steigert.
Vom Optischen her, als nicht Designer, finde ich es ok.
Ob es genug ist, um den Kontrast zu steigern, hängt vom Gerät und die Lichtverhältnisse der Umgebung ab.
Mir kommt es ein wenig zu wenig vor. :)


Wenn Du aber nur beim :hover verdunkeln willst, also ohne Tastatur-Unterstützung und nur dann wenn die JavaScript-Unterstützung im Browser an ist - ok, aber Du könntest den Effekt auch alleine per CSS regeln.

#menu:hover + #content { opacity: .7; }

Dabei entstehen zwei Problemchen: die aufklappbare Submenüs verstecken sich wieder hinter dem Slider ( #menu { opacity:  0.92; } und der Margin-Top bei den Sub ULs lässt eine Lücke (2px) entstehen  was bei Hover-Übergang auf die Submenüs problematisch werden kann.

Ich habe nur schnell alles überflogen und nicht nachgeforscht woher #menu-sticky-wrapper her kommt usw. Daher so auf die Schnelle eine vorübergehende Lösung:

ul.dropdown li ul {
	/*margin-top: 2px;*/
	margin-top: 0;
	/*statt dessen padding*/
	padding-top: 2px;
}
#menu:hover { opacity: 1; }
#menu:hover + #content { opacity: .7; }

Übrigens, der Umgang mit „opacity" ist nicht unproblematisch. Das hat seine Besonderheiten: das Element (und dessen Kindelemente) mit opacity kleiner 1, wird zuerst außerhalb des sichbaren Bereich berechnet und als letztes ins Viewport geholt. Dabei wird ein neues Stapel-Kontext etabliert. Usw.
Und es lässt nicht nur den Hintergrund des Elementen durchsichtig werden (wie viele irrtümlich vermuten), sondern alles: Text, Border usw.
Aber kein Problem, wenn man das alles weiß und kann. :)