Toggle-Navigation mit CSS :target Experiment

[beatovich]

hallo

Hallo liebe Forumer, ich unternehme gerad ein Toggle-Navigation mit CSS :target Experiment, das eigentlich auch ganz gut funktioniert: Toggle-Navigation mit CSS :target V1 Bis ich nun das Ganze in ein zentriertes mittiges div setze, (siehe: Toggle-Navigation mit CSS :target V2) dann wandert das (von links) "einschwebende" div vom äußersten linken Rand an und nicht vom linken Rand des mittleren (roten) "Fensters". Was ist nun falsch?

Wünscht du also, dass ein Teil der Navigation immer sichtbar ist?

Aber ich sehe folgende Fehler:

• Die Abwesenheit eines Schliessen Buttons im Navigations-Block nötigt dich dazu, einen Button ausserhalb der Navigation sichtbar zu halten (egal wie das Fenster gescrollt ist).
• left/width 87vw ist dazu nicht geeignet
• Auf mobiles willst du sowieso die Navigation über die ganze Breite.

ferner: statt <div class="navMain"> verwende

• <nav id="navMain">
• <nav id="navLocal">

Da Navigationen selber Navigationsziele sind, ist es hier richtig eine id zu verschwenden.

Ferner halte ich es für interessant dass du ein Elternelement der Navigation statt die Navigation selber navigierst, um die Navigation via CSS zu verschieben. Interessant deshalb, weil damit sehr viel Styling auf :target reagieren kann. Trotzdem wollen wir eigentlich die Navigation navigieren, und nicht irgend einen Elternkontext, der noch alles andere enthält.

Ferner soll es ungünstig sein, Elemente von jenseits des Bildschirms einzuschieben. Die Kosten sind hier verschieden für verschiedene Richtungen. Es soll weniger kosten, die Navigation von oben einzuschieben.

Alternativ: verzichte auf Effekte.

Ferner: denke jetzt schon daran, dass deine Navigation wohl umfangreicher werden wird und du einen Skiplink vor der Navigation brauchst.

Ferner plane jetzt schon ein <header role="banner"> ein.

Ferner: überlege, welcher Inhalt den Main-Content repräsentiert und verwende für diesen <main id="maincontent">. Dieser soll das Ziel des Skiplinks sein.