Frage zum Wiki-Artikel „Navigation richtig erstellen“

[Florian268]

Hallo,

bin gerade dabei eine Menünavigation zu erstellen. Wenn man sich den Code in nachfolgender Abbildung ansieht,

Quelle: https://wiki.selfhtml.org/wiki/HTML/Tutorials/Navigation richtig erstellen

dann wird durch: @media screen and (max-width : 60em) { nav li { display: block; width: 50%; } }

festgelegt, dass bei Geräten mit einer Bildschirmweite unter 60em die Navigationselemente untereinander dargestellt werden. In der Beschreibung (siehe im Bild unter dem Quellcode) steht allerdings, dass sich die Navigation unter 60em auf 100% ausdehnt.

Wurden hier die Regelsätze der beiden Mediaqueries vertauscht oder habe ich den Code falsch interpretiert?

Vielen Dank!

[MrMurphy1]

Hallo

Das CSS zum Erstellen der Beispielnavigation ist ist inzwischen veraltet. Aktuell hat sich grade für responsive Navigationen Flexbox bewährt.

Zudem hat das Vorgehen "Mobile First" (min-width) einige Vorteile gegenüber dem verwendeten "Desktop First" (max-width).

Listen können für Navigationen zwar verwendet werden, sind aber auch sachlich nicht erforderlich. Das ist auch eine Geschmacksfrage.

Das Beispiel ist zudem sehr theoretisch, so dass der Sinn des CSS nicht ersichtlich wird.

So ist es unsinnig praxisfremde Einträge (Seite 1, Seite 2, ...) zu verwenden. In der Praxis sind die Einträge unterschiedlich lang.

Der Bezug auf bestimmte Geräte (Smartphones) führt grade Anfänger in die Irre. Da bestimmte Geräte überhaupt nicht abgefragt werden können kann auch kein geräteabhängiges Layout erstellt werden. Das Layout hängt immer vom Inhalt ab.

Bei der Navigation zum Beispiel von der Anzahl und der Breite der Einträge. Das Layout wird dann der Fensterbreite (und davon abhängig der zur Verfügung stehenden Breite für die Navigation, die durchaus geringer sein kann) angepasst. Die Browser erkennen dann die für sie zugedachte Breite vollkommen unabhängig davon, auf welchem Gerät sie laufen.

Die Beispielnavigation ist grundsätzlich sinnvoll, muss aber für die eigene Navigation noch angepasst werden. Keineswegs sollten die Werte eins zu eins übernommen werden.

steht allerdings, dass sich die Navigation unter 60em auf 100% ausdehnt

Nein, da steht das sich die li-Elemente anpassen. Das tun sie auch, die Auswirkungen sind aber nicht sichtbar, da die li-Elemente weder eine Hintergrundfarbe oder einen Rahmen haben.

Zunächst stehen die li-Elemente nebeneinander.

Bei weniger als 60em rutschen sie untereinander, nehmen aber nur die Hälfte des zur Verfügung stehenden Platzes ein, da es bei so breiten Bildschirmen als unpassend empfunden wird, wenn die li-Elemente die gesamte Breite einnehmen.

Bei weniger als 30em bleiben die li-Elemente untereinander, nehmen aber die gesamte zur Verfügung stehende Breite ein, da dies bei schmaleren Fenstern nicht mehr als so unpassend empfunden wird.

In der Praxis würde eine Navigation mit den Werten so wohl nicht erstellt werden. In dem Beispiel soll aber nur das grundsätzliche Vorgehen aufgezeigt werden und das ist korrekt. Wenn auch nicht mehr aktuell.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

Listen können für Navigationen zwar verwendet werden, sind aber auch sachlich nicht erforderlich. Das ist auch eine Geschmacksfrage.

Listen sind aber für Nutzer bei der Navigation hilfreich. Und das ist keine Geschmacksfrage.

LLAP 🖖