Frage zum Wiki-Artikel „zugängliche_Dropdown-Navigation“

[Aladin]

Liebes Forum,

erstmal vorweg, ich bin ein kompletter Anfänger und versuche gerade ohne Budget eine Seite für einen gemeinnützigen Verein zu erstellen. Mit Hilfe von ein paar Tutorials konnte ich mir, so glaube ich, die basics von html und css anlernen. Mit JS kenne ich mich jedoch leider kaum aus.

Jetzt aber zu meiner Frage!

Ich finde das Tutorial zum Dropdownmenü mit Js absolut genial vor allem weil mir eine möglichst barrierefreie Nutzung der Website wichtig ist.

Ich fände es jedoch angenehm das Menü am oberen Bildschirmrand zu fixieren.

Das ist mir gelungen indem ich die position im css Zeile 82 auf fixed gestellt habe, dies führt jedoch zu folgendem Problem:

Die Ebenen die sich nach rechts öffnen sollten werden plötzlich nichtmehr angezeigt. Wie auf folgenden Beispielen ersichtlich.

Ich denke, dass es daran liegt, dass das js für ein absolut positioniertes Menü geschrieben wurde. Da ich mich aber leider mit js wie gesagt kaum auskenne ist es mir leider nicht gelungen zu erroieren wo genau der Hund begraben liegt und ob es es eine "einfache" Lösung für dieses Problem gibt?

Google konnte mir bei diese speziellen Fragestellung leider nicht weiterhelfen und auch mit der Suchfunktion im Forum konnte ich leider keinen passenden Thread finden.

Meine Seite kann ich leider noch nicht teilen da sie weder fertig noch online ist. Ich glaube dies ist in dem Fall aber auch nicht notwendig da es mir um das Grundlegende verständniss einer möglichen adaption dieses Tutorials geht.

Bitte verzeiht wenn meine Anliegen etwas primitiv wirkt, ich hatte nicht vor js zu verwenden bis ich auf dieses tolle Tutorial gestoßen bin.

Vielen Dank

Aladin

[JürgenB]

Hallo Aladin,

ich habe das Menü bisher nicht mit fixer Position getestet. Ich werde mir das aber mal ansehen.

Eine Anmerkung zu fixen Menüs: Ich fand das auch toll und hatte das auch mal auf meiner Seite. Aber ich musste darauf achten, dass das aufgeklappte Menü nicht höher ist, als die Seite. Auch empfand ich es irgendwann als störend, wenn immer ein Teil der Seite durch die Menü-Zeile verdeckt ist. Die Bildschirme werden immer breiter, aber nicht höher. Daher scrollt die Navigation auf meiner Seite und eben auch die im Wiki jetzt mit.

Gruß
Jürgen

[Aladin]

Hallo Jürgen,

vielen Dank für deine schnelle Antwort.

Ich bin mir selbst noch nicht sicher wie ich mein Menü, dann im Endeffekt realisiere. Mein erster Impuls war, ein fixes Menü könnte angenehmer für Benutzer sein. Die Argumente die du fürs scrolbare Menü hast ergeben natürlich Sinn und habe ich so noch nicht bedacht.

Ich spiele mich nur gerade ein bisschen und versuche so viel wie möglich zu verstehen und zu lernen. Weil ich bei diesem Punkt selbst nicht weiter gekommen bin dachte ich mir, ich frage einfach mal hier im Forum nach 😅.

[JürgenB]

Hallo Aladin,

es darf nur das nav-Element (#sitenav) auf position: fixed gesetzt werden, die UL's darin müssen weiter absolut positioniert bleiben:

/* Positionierung */
/* Bei Browsern, die Details/Summary unterstützen, und bei eingeschaltetem Javascript wird die Navigation absolut positioniert. Die Klasse withjs wird vom Sript gesetzt. */
@supports (width: max-content) { 
	/* Nicht für IE und MS-Edge, indirekter Test auf Details/Summary */
	#sitenav { 
		position: fixed; 
	}
	#sitenav ul { 
		position: absolute; 
	}
}
#sitenav.withjs { 
	position: fixed; 
}
#sitenav.withjs ul { 
	position: absolute; 
}

Gruß
Jürgen

[Aladin]

Hallo Jürgen,

vielen lieben Dank für deine Hilfe und die rasche Antwort!

Das ergibt natürlisch Sinn und funktiooniert einwandfrei.😃

Beste Grüße

Aladin

[Marc]

Hej Aladin,

fixierte Elemente Elemente führen zu diversen Problemen. Zum Beispiel verdecken sie in der Regel fokussierte Links oder Buttons vor Tastatur-Nutzern.

Auch überlagern sie bei Menschen die hohe Zoom-Stufen benötigen riesige Bereiche der Seiten.

Marc (marctrix)

[MichaelS]

Hallo, ich habe mal gelesen, dass position:fixed; nicht im Grid- Layout verwendet werden kann. Da bliebe letztlich nur ein sticky, was aber eben nicht absolut fest steht. Wie das im Flex ist, kann ich nicht mit Bestimmtheit sagen, aber ich vermute anhand des Aufbaus, das das auch Probleme geben könnte. Lässt sich das nicht mit Java script regeln?

Gruss Michael