Media Queries

[bleumi85]

Guten Morgen,

ich versuche mich gerade das erste mal an MediaQueries und habe mir dazu folgenden Programmcode gebaut:

<section>
   <ul>
      <li><a class="menubutton" href="#"><img src="pics/menu.png" /></a></li>
   </ul>
</section>
<nav class="nav">
   <ul>
      <li><a href="menue1.php">Menüpunkt 1</a></li>
      <li><a href="menue2.php">Menüpunkt 2</a></li>
      <li><a href="menue3.php">Menüpunkt 3</a></li>
      <li><a href="menue4.php">Menüpunkt 4</a></li>
   </ul>
</nav>

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. Dieser sieht wie folgt aus:

$(document).ready(function() {
   $('.menubutton').click(function() {
      $('.nav').slideToggle('slow');
   });
});

Darüber hinaus hab ich mir mein Menü natürlich optisch schön gestaltet. Das entscheidende ist aber, dass ich mir das Menü bei geringer Bildschirmbreite (bspw. Handybildschirmen) als block anzeigen lassen möchte, also untereinander und bei großer Bildschirmbreite (bspw. Desktop-PC) nebeneinander. Da der Menubutton bei großer Bildschirmbreite nicht benötigt wird blende ich ihn einfach aus. Auch das ist wie ich finde recht einfach zu realiseren und ich habe es wie folgt gelöst:

.nav li{
   width:100%;
}

@media (min-width:400px){
   #menubar img{
      display:none;
   }
   .nav li{
      float:left;
      width:20%;
   }
}

Jetzt habe ich folgendes Problem: Wenn ich auf meinem Desktop-PC das Browserfenster kleiner ziehe (also unter 400px) nimmt das nav genau wie gewünscht Blockform an und der Menübutton erscheint. Wenn ich auf diesen klicke kann ich das nav genau wie geplant ein- und ausblenden. Also alles super. Wenn ich das nav jedoch ausblende und dann das Browserfenster wieder größer ziehe verschwindet der Menübutton 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?

[Jonathan Harker]

Guten Morgen,

ich versuche mich gerade das erste mal an MediaQueries und habe mir dazu folgenden Programmcode gebaut:

gut

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.

Warum nicht mit CSS?

Navigation ausblenden und mit Navicon aufrufen

Jetzt habe ich folgendes Problem: Wenn ich auf meinem Desktop-PC das Browserfenster kleiner ziehe (also unter 400px) nimmt das nav genau wie gewünscht Blockform an und der Menübutton erscheint. Wenn ich auf diesen klicke kann ich das nav genau wie geplant ein- und ausblenden. Also alles super. Wenn ich das nav jedoch ausblende und dann das Browserfenster wieder größer ziehe verschwindet der Menübutton und ich habe keine Chance mehr mir das nav einblenden zu lassen.

.nav li{
   width:100%;
}

@media (min-width:400px){
   #menubar img{
      display:none;

Das ist doch im CSS gewollt, dass der Menübutton verschwindet, oder?

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

Das CSS entfernen.

BTW: Lege media queries in em fest, dann kann die Webseite auch automatisch auf Änderungen der Standardschriftgröße reagieren und zerschießt dir nie das Layout.

Gruß Jo

[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 🖖

[bleumi85]

Hi Gunnar,

danke für die sehr ausführliche Hilfe. Ich bin um einiges schlauer und ein ganzes Stück weitergekommen. An ein paar Sachen hapert es aber noch.

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.

Kannst du mir kurz auf die Sprünge helfen, wie sowas dann aussehen würde? Ich hab bisher nur gelesen, dass ich dafür via Javascript die Klassenbezeichnung ändern müsste. Damit hab ich mich aber noch nicht beschäftigt und daher noch keine Ahnung von der Thematik.

[JürgenB]

Hallo,

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.

Kannst du mir kurz auf die Sprünge helfen, wie sowas dann aussehen würde? Ich hab bisher nur gelesen, dass ich dafür via Javascript die Klassenbezeichnung ändern müsste. Damit hab ich mich aber noch nicht beschäftigt und daher noch keine Ahnung von der Thematik.

kennst du schon Javascript und CSS?

Gruß
Jürgen

[Christian Wansart]

Hallo,

kennst du schon Javascript und CSS?

Ich denke, JavaScript ist hier gar nicht notwendig. So ein Menü lässt sich wunderbar in CSS gestalten.

Freundliche Grüße
Christian

[Christian Kruse]

Hallo Christian,

kennst du schon Javascript und CSS?

Ich denke, JavaScript ist hier gar nicht notwendig. So ein Menü lässt sich wunderbar in CSS gestalten.

Das krankt an den gleichen Problemen wie alle CSS-Lösungen für sowas, die ich bisher gesehen habe: es ist fürchterlich frickelig zu bedienen. Ich muss höllisch aufpassen, wohin ich die Maus bewege um nicht aus Versehen das Menü verschwinden zu lassen. Mein Chef würde mir das um die Ohren hauen.

LG,
CK

P.S.: Argh, meine Augen! Wer hat diese Farben so ausgewählt??

[Matthias Apsel]

Hallo Christian Kruse,

Das krankt an den gleichen Problemen wie alle CSS-Lösungen für sowas, die ich bisher gesehen habe: es ist fürchterlich frickelig zu bedienen. Ich muss höllisch aufpassen, wohin ich die Maus bewege um nicht aus Versehen das Menü verschwinden zu lassen.

Vielleicht sollte man die CSS-Lösung dennoch vorhalten, sodass das Menü bei fehlendem JS trotzdem bedienbar ist.

P.S.: Argh, meine Augen! Wer hat diese Farben so ausgewählt??

Das war wahrscheinlich ich. Ursprünglich war das auch ein Beispiel für repeating-linear-gradient. Ich nehme die Streifen raus. Dann sollte es deinen Augen schon wesentlich besser gehen.

Bis demnächst
Matthias

[Christian Kruse]

Hallo Matthias,

Das krankt an den gleichen Problemen wie alle CSS-Lösungen für sowas, die ich bisher gesehen habe: es ist fürchterlich frickelig zu bedienen. Ich muss höllisch aufpassen, wohin ich die Maus bewege um nicht aus Versehen das Menü verschwinden zu lassen.

Vielleicht sollte man die CSS-Lösung dennoch vorhalten, sodass das Menü bei fehlendem JS trotzdem bedienbar ist.

Die reine CSS-Lösung halte ich für wenig zugänglich - schonmal jemandem mit multipler Sklerose zugesehen, wie er die Maus bedient? Das ginge gar nicht… aber als Fallback im Sinne von progressive enhancement fände ich sie OK.

P.S.: Argh, meine Augen! Wer hat diese Farben so ausgewählt??

Das war wahrscheinlich ich. Ursprünglich war das auch ein Beispiel für repeating-linear-gradient. Ich nehme die Streifen raus. Dann sollte es deinen Augen schon wesentlich besser gehen.

Danke, ist jetzt in der Tat besser ;-)

LG,
CK

P.S.: nicht jeder mit MS „zittert,“ ich weiss.

[Matthias Scharwies]

Servus!

Die reine CSS-Lösung halte ich für wenig zugänglich [...] aber als Fallback im Sinne von progressive enhancement fände ich sie OK.

Umso wichtiger, dass SelfHTML ein Beispiel und Tutorial für eine zugängliche Dropdown-Navigation präsentiert, wie ich schon im Juli und jetzt wieder angesprochen habe:

• Push: modernes JS - Selfhtml muss aktuell und relevant bleiben!

• zugängliche Dropdown-Navigation

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

auch im März schon angesprochen: Wiki-Push im März 2016: Zugänglichkeit

Herzliche Grüße

Matthias Scharwies

[Matthias Apsel]

Hallo Christian Kruse,

schonmal jemandem mit multipler Sklerose zugesehen, wie er die Maus bedient? Das ginge gar nicht…

Nein, aber das Problem ist mir durchaus bewusst.

Bis demnächst
Matthias

[Christian Wansart]

Hallo Christian,

(Man das ist echt praktisch mit dir, ich muss immer nur das „> “ vorne erntfernen! :D)

Das krankt an den gleichen Problemen wie alle CSS-Lösungen für sowas, die ich bisher gesehen habe: es ist fürchterlich frickelig zu bedienen. Ich muss höllisch aufpassen, wohin ich die Maus bewege um nicht aus Versehen das Menü verschwinden zu lassen. Mein Chef würde mir das um die Ohren hauen.

Meinst du? Ich hatte letztens was gebastelt, damit war ich eigentlich sehr zufrieden: https://codepen.io/Ctwx/pen/xOmyQw

P.S.: Argh, meine Augen! Wer hat diese Farben so ausgewählt??

Ich war es nicht. Es gibt dann nur noch zwei andere Autoren von dem Artikel. 😅

Freundliche Grüße
Christian

[bleumi85]

Hi,

das Menü sieht wirklich nett aus, ist aber nicht das was ich brauche. Das Grundgerüst entspricht genau dem was ich auch habe, also quasi 5 Seiten zum anklicken. Allerdings brauche ich keine Untermenüs sondern einfach ein responsive Design. Ich hab es so gelöst, dass bei einer Fensterbreite < 400px die Anordnung nicht mehr nebeneinander ist sondern untereinander und dass oberhalb des Navs eine Art Menü-Icon eingeblendet wird. Dieser dient per Click-Event dazu das Nav ein- bzw. auszublenden. Alles was ich jetzt will ist, dass das Nav bei einer Fensterbreite > 600px IMMER sichtbar ist. Denn wenn ich mein Fenster auf eine Breite unter 600px ziehe, das Nav ausblende und es dann wieder größer ziehe bleibt das Nav ausgeblendet und genau das will ich verhindern.

Hallo,

kennst du schon Javascript und CSS?

Ich denke, JavaScript ist hier gar nicht notwendig. So ein Menü lässt sich wunderbar in CSS gestalten.

Freundliche Grüße
Christian