Kommentare zu: Sticky Menu, Feststehendes Menü

Von: Domi Kaltermann

Domi Kaltermann — Tue, 09 Jan 2024 14:12:04 +0000

Hey, echt stark! Ich habe das gleich bei unserer online Schülerzeitung eingebaut. Es hat nach ein paar Anläufen super funktioniert, und das sogar auf meinem gebrauchten, nicht gerade neuesten Computer. Super hilfreich, vielen Dank für die Anleitung!

Von: avs

avs — Fri, 17 Dec 2021 09:43:14 +0000

Als Antwort auf Alexandra. Ganz vielen Dank, dass Sie sich die Mühe gemacht haben, nachzusehen! Jetzt funktioniert es einwandfrei! Prima! :-)

Von: Alexandra

Alexandra — Fri, 17 Dec 2021 05:51:12 +0000

Als Antwort auf avs. Ganz vielen Dank, dass Sie sich die Mühe gemacht haben, nachzusehen! Jetzt funktioniert es einwandfrei! :) LG!

Von: avs

avs — Thu, 16 Dec 2021 16:34:36 +0000

Als Antwort auf Alexandra.

Hallo Alexandra,

danke für den Hinweis. Das ist auch schon länger her, dass ich den Code erstellt habe. Es ging dabei vor allem darum, eine Lösung vorzustellen, bei der sich mit wenig Code ein Mobile Menü bzw. ein Sticky-Menü realisieren lässt.
Ich habe mir den Code soeben nochmals angeschaut: im CSS steht bei nav ul folgendes:

nav ul { ... height: 100vh;}

Damit wird erzwungen, dass das Menü die volle Bildschirmhöhe einnimmt. Das macht auch Sinn beim Mobile Menü, denn dann bedeckt dieses nach dem einfaden den kompletten Contentbereich – sieht besser aus.
Leider überdeckt es beim normalen Menü (also auf größeren Bildschirmen) den Content, auch wenn das nicht zu sehen ist. Dadurch sind Links nicht anklickbar. Das sollte sich einfach lösen lassen, indem das CSS ein wenig modifiziert wird und der Wert „height: 100vh“ nur bei einem Viewport greift, bei dem das Mobile Menü erscheint. Also in diesem Codebeispiel ab 960px Bildschirmbreite abwärts.

Viele Grüße
Stefan

Von: Alexandra

Alexandra — Thu, 16 Dec 2021 16:00:15 +0000

Hallo Stefan, vielen Dank für die Antwort! Gestest habe ich mit Firefox und Edge und kann bestätigen, dass der vorgestellte Code fehlerfrei funktioniert. Wenn ich allerdings einen Link in den Blindtext einbaue, ergibt sich das interessante Phänomen, dass der Link nur in der Smartphone-Ansicht anklickbar ist, also bei sichtbarem Hamburger-Icon. Ist das Icon nicht sichtbar, ist der Link auch nicht anklickbar.
LG!

Von: avs

avs — Thu, 16 Dec 2021 10:09:14 +0000

Als Antwort auf Alexandra.

Hallo Alexandra,

weiter oben im Artikel gibt es den Button BEISPIEL ANSEHEN. Darüber lässt sich eine Demo-Seite aufrufen, die in den von uns getesteten Browsern ohne Probleme funktioniert und auf dem vorgestellten Code basiert.
Sie können ja einmal in dem von Ihnen verwendeten Browser testen, ob die Demo-Seite dort fehlerfrei funktioniert. Wenn ja, sollte es an Ihrem individuellen Code liegen. Falls Sie z.B. für Ihren eigenen Content-Bereich einen hohen z-index eingetragen haben, kann es natürlich gut sein, dass der Content das Menü „überdeckt“.

Viele Grüße
Stefan

Von: Alexandra

Alexandra — Thu, 16 Dec 2021 09:18:33 +0000

Das Menü funktioniert wunderbar und es freut mich besonders, dass man mit so wenig Code auskommt. Eine Frage hätte ich aber: Meine Links im Main-Bereich sind nicht anklickbar bzw. nur dann, wenn man den z-Index des entsprechenden Layers erhöht (und der Inhalt dann beim Scrollen über das Menü gleitet). Ist das normal oder liegt es daran, dass ich bei der Anpassung der Vorgaben an meine speziellen Bedürfnisse Fehler eingebaut habe?
LG!