Alles auf der Webseite ist verlinkt
bearbeitet von 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`{: style="border: none; padding: 0; background: transparent"}-Eigenschaft für `header::before`{: style="border: none; padding: 0; background: transparent"} anzupassen. (Das ist das Ding, was mit `position: fixed`{: style="border: none; padding: 0; background: transparent"} oben an der Bildschirmkante klebt.) Wie [gezeigt](https://codepen.io/gunnarbittersmann/pen/vxmjGM).
> 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:
~~~js
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()`{: style="border: none; padding: 0; background: transparent"} aufgerufen wird.
~~~js
var headerNavElement = document.querySelector('body > header > nav');
~~~
Speichert die Referenz auf das `nav`{: style="border: none; padding: 0; background: transparent"}-Element in einer Variablen. Es hätte hier vielleicht auch `document.querySelector('nav')`{: .language-js style="white-space: nowrap"} getan, aber es könnte ja mehrere `nav`{: style="border: none; padding: 0; background: transparent"}-Elemente auf der Seite geben und es soll nur das im Seitenheader selektiert werden.
~~~js
var headerNavStyleElement = document.createElement('style');
document.head.appendChild(headerNavStyleElement);
~~~
Erzeugt ein `style`{: style="border: none; padding: 0; background: transparent"}-Element und hängt es ins DOM. Das `style`{: style="border: none; padding: 0; background: transparent"}-Element wird gebraucht, um die Regel für die Höhe des `header::before`{: style="border: none; padding: 0; background: transparent"}-Pseudoelements darin unterzubringen.
~~~js
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`{: style="border: none; padding: 0; background: transparent"}-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 }`{: .language-css style="white-space: nowrap"} in das `style`{: style="border: none; padding: 0; background: transparent"}-Element geschrieben. Damit hat das `header::before`{: style="border: none; padding: 0; background: transparent"}-Pseudoelement (das für den Hintergrund sorgt) genau die Höhe des `nav`{: style="border: none; padding: 0; background: transparent"}-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 🖖
--
“When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)