Die Media-Queries bringen mich zum Heulen...

[Matthias Scharwies]

Servus!

Hallo Gunnar,

Bei großem Viewport ist das Menü permanent sichtbar und der Button nicht sichtbar: display: none; und auch nicht im accessibility tree, d.h. nicht bei Tastatur erreichbar.

Bei kleinem Viewport ist der Button sichtbar und schaltet bei jedem Click sein aria-expanded-Attribut zwischen "true" und "false" um, was anzeigt (d.h. im Screereader ansagt), ob das Menü ausgeklappt ist oder nicht.

Das Problem ist hier, dass es zwei Navigationen gibt: im Kreuzbalken und im Stamm.

Es gibt nicht so viele Unterseiten - weswegen ich beide zu einer - evtl. sogar ohne Dropdown zusammmenfassen würde.

• Wer wir sind
  • PFARRBEREICH GÖRZIG
  • PFARRBEREICH WEISSANDT-GÖLZAU
  • ...
• Was wir tun
  • Gottesdienste
  • Gemeindeleben
  • Rückblicke
• Kontakt
  • Impressum
  • Datenschutz

Die Herausforderung ist, das ganze HTML so zu gestalten, dass man im Wide Viewport das Kreuz-Layout (mit Navi in Balken und Stamm) rein per CSS herstellen kann.

Ich würde den horizontalen Balken (ohne Inhalt) als Pseudoelement zum header packen. Der lila Stamm wäre die Navigation, die sich bei breiten Viewports etwas nach rechts schiebt.

Im Mobilmodus müsste sie sich natürlich über die ganze Breite erstrecken.

Herzliche Grüße

Matthias Scharwies