Media Queries

[Gunnar Bittersmann]

@@bleumi85

<section>
   <ul>
      <li><a class="menubutton" href="#"><img src="pics/menu.png" /></a></li>
   </ul>
</section>

Das Markup ist falsch. Zum einen ist es keine section, zu erkennen daran, dass der Bereich keine Überschrift hat.

Zum anderen: wozu die Liste, wenn darin nur ein Item ist?

<a href="#"> ist ein Link (Sprung!) zum Seitenanfang. Wenn du nicht den Seitenanfang verlinken willst, ist das a-Element falsch.

Links (a-Elemente) sind für Verweise zu anderen Ressourcen (andere Seiten, Fragmente). Für Aktionen auf einer Seite sind Buttons (button-Elemente) da.

Und da der Button einmalig ist, bekommt er eine ID, keine Klasse.

Der Button hat bei dir keine Beschriftung. img müssen einen Alternativtext (alt-Attribut) haben.

Das Markup könnte so aussehen:

<button id="menubutton"><img src="pics/menu.png" alt="Menü öffnen"/></button>

Das Icon könnte aber auch per Stylesheet als Hintergrundbild gezeigt und der Buttontext visuell(!) versteckt werden. Markup dann:

<button id="menubutton">Menü öffnen</button>

Im Übrigen dürfte für ein Icon eine Vektorgrafik (SVG) besser geeignet sein als eine Pixelgrafik (PNG).

<nav class="nav">

Hier ebenfalls ID, nicht Klasse.

Darüber hinaus hab ich einen kleinen Schnipsel Javascript der dafür sorgt, dass das nav bei Klick auf den "menubutton" ein- bzw. ausgeblendet wird.

Und der setzt den Wert der display-Eigenschaft mit hoher Spezifität und überschreibt damit die Angaben im Stylesheet.

… und ich habe keine Chance mehr mir das nav einblenden zu lassen.

Wie kann ich es lösen, dass mein nav IMMER eingeblendet ist, sobald ich in den Bereich von mehr als 400px Bildschirmbreite komme?

Indem du mit JavaScript nicht direkt Stile änderst, sondern die Änderung offen/geschlossen im DOM festhältst, bspw. mit einer Klasse oder in einem data-Attribut.

Und die transition (Rein-/Rausfahren des Menüs) überlässt du auch besser CSS, nicht JavaScript.

LLAP 🖖