Alles auf der Webseite ist verlinkt

[Gunnar Bittersmann]

@@grafikrose

Ich hätte gerne eine Navleiste bei der sich der Hintergrund einfach verfärbt (wie du schon vermutet hast). Anpassen wäre mit Sicherheit keine große Sache :-D... aus "eurer" Sicht, sag ich mal.

Das Einzige, was zu tun war, war die background-Eigenschaft für header::before anzupassen. (Das ist das Ding, was mit position: fixed oben an der Bildschirmkante klebt.) Wie gezeigt.

Ich habe zwei Javascript-Funktionen eingebaut, die max 5-zeilig sind - hier verstehe ich noch was passiert und was ich wie anpassen muss! Bei den 12 Zeilen blicke ich leider nicht mehr so ganz durch was was ist und warum.

12 Zeilen JavaScript entmystifiziert:

window.addEventListener('load', updateHeaderNavHeight);
window.addEventListener('resize', updateHeaderNavHeight);

Registriert Eventhandler; sorgt dafür dass nach dem Laden der Seite (samt Bildern etc.) sowie bei jeder Änderung der Vieportgröße (wozu auch das Drehen des Smartphones/Tablets zählt) die Funktion updateHeaderNavHeight() aufgerufen wird.

var headerNavElement = document.querySelector('body > header > nav');

Speichert die Referenz auf das nav-Element in einer Variablen. Es hätte hier vielleicht auch document.querySelector('nav') getan, aber es könnte ja mehrere nav-Elemente auf der Seite geben und es soll nur das im Seitenheader selektiert werden.

var headerNavStyleElement = document.createElement('style');
document.head.appendChild(headerNavStyleElement);

Erzeugt ein style-Element und hängt es ins DOM. Das style-Element wird gebraucht, um die Regel für die Höhe des header::before-Pseudoelements darin unterzubringen.

function updateHeaderNavHeight()
{
	headerNavStyleElement.innerText = 'header::before { height:'
		+ headerNavElement.offsetHeight
		+ 'px }';
}

Hier passiert die Magie: Bei jedem Funktionsaufruf (wir erinnern uns: nach dem Laden der Seite sowie bei jeder Änderung der Vieportgröße) wird die Höhe des nav-Elements ausgelesen. Wozu das Ganze? Nun, die Höhe kennt man ja vorher nicht. Man weiß ja bspw. nicht, ob alle Navigationspunkte beim Nutzer in eine Zeile passen; und das kann sich ja bei Änderung der Vieportgröße ändern.

Sei die Höhe bspw. 42 (Pixel). Das wird nun eingesetzt und header::before { height: 42px } in das style-Element geschrieben. Damit hat das header::before-Pseudoelement (das für den Hintergrund sorgt) genau die Höhe des nav-Elements.

Ich möchte nicht einfach etwas kopieren und dann nicht wissen was da los ist - ist ja meine Projektarbeit die ich dann auch erklären und präsentieren muss. 👀

Das ist löblich. Konnte ich helfen?

LLAP 🖖