Share
Ein beliebtes Muster für das Navigationsdesign für das responsive Web führt dazu, dass die Navigation Ihrer Website in ein wählen Speisekarte. Darstellung von Hierarchie oder kategorialen Unterscheidungen in wählen Elemente führen oft zu abgeschottetem HTML mit manuellen Bindestrichen und vielen Räume. In diesem Tutorial stellen wir Ihnen ein irgendwie unklares HTML-Tag vor optgroup So erhalten Sie eine einfache (und semantische) Möglichkeit, verwandte Inhalte in zu gruppieren wählen Menüs.
Herauszufinden, wie die Website-Navigation optimal auf die kleinen Bildschirme von mobilen Geräten angepasst werden kann, ist eine ständige Herausforderung des responsiven Webdesigns. Es gibt verschiedene responsive Webdesign-Navigationsmuster, die sehr gut funktionieren. Eine der beliebtesten Methoden ist die Verdichtung der Websitenavigation zu einem Formular wählen Element.
Diese Technik wurde in verschiedenen Tutorials im Web behandelt und erläutert, einschließlich eines Artikels über Webdesigntuts + von Ian Yates: Erstellen eines Responsive Layouts mit Skeleton. Das Konvertieren der Seitennavigation in ein natives Formularsteuerelement ist jedoch nicht unumstritten. Einige argumentieren, es sei eine schlechte Idee, da Formularelemente einfach nicht für die Navigation gedacht waren.
Accentsconagua
wählen: Ein kurzer ÜberblickDas wählen element ist ein großartiges UI-Element, da es viele Optionen unter einer einzigen Steuerung verbergen kann, wodurch viel Bildschirmfläche gespart wird (ein attraktiver Vorschlag für mobile Geräte). Außerdem können Designer die Website-Navigation oben auf der Seite beibehalten, wo Benutzer daran gewöhnt sind, sie zu finden.
Darüber hinaus gibt es einen Interaktionsvorteil wählen Menüs sorgen dafür, dass andere HTML-Elemente einfach nicht möglich sind: native Steuerelemente. Wenn aktiv, wählen Über Menüs können Benutzer auf native Steuerelemente zugreifen, die möglicherweise die günstigste Interaktion bieten, unabhängig vom Gerät oder der Eingabemethode des Benutzers.
Entscheidung, ob Sie Ihre Navigation in eine konvertieren möchten oder nicht wählen Bei mobilen Größen liegt es letztendlich an Ihnen als Designer. Jeder Fall ist anders. Wenn Sie sich für diese Route entscheiden, enthält dieses Lernprogramm weitere Informationen dazu, wie Sie Ihre navigierbaren Links mit Hilfe der Option optimal gruppieren können optgroup HTML-Tag.
Wir verwenden Webdesigntuts + als einfaches Beispiel für die theoretische Verwendung des optgroup Etikett.
Hinweis: Dieses Beispiel ist keinesfalls ein Vorschlag, wie ein Navigationsdesignproblem für Webdesigntuts + oder eine andere Website richtig gelöst werden kann. Es ist nur eine schnelle Illustration, wie man das benutzen könnte optgroup Element.
Nehmen wir an, wir wollten die drei separaten Navigationselemente auf der Webdesigntuts + Homepage zu einer zusammenfassen wählen Element.
optgroup Das Navigieren navigierbarer Links in ein select-Element bei gleichzeitiger Beibehaltung der kategorialen Gruppierung kann sich als unordentlich erweisen, wenn es nicht korrekt ausgeführt wird. Einige Designer / Entwickler können einen Riesen erstellen wählen Menü mit manuellen Leerzeichen () und Bindestrichen als Trennzeichen:
optgroup Verwenden Sie jedoch die optgroup element wird Sie mit sauberem HTML-Code und integrierter Unterstützung für die Kategorisierung in einem wählen Liste. Wir nehmen das Etikette Attribut, um zu bestimmen, was angezeigt wird:
Sie sehen, dass Sie mit HTML-Markup eine übergeordnete / untergeordnete Beziehung darstellen können, ohne spezielle Abstände und Listen mit Bindestrich einfügen zu müssen.
Wie gesagt, ein Vorteil bei der Verwendung der wählen Element ist der Zugriff auf native Steuerelemente auf mobilen Geräten oder Touchscreen-Geräten. Hier einige Beispiele, wie diese Menüs aussehen würden:
Das ist alles dazu! Erinnere dich einfach an die optgroup element bietet eine semantischere und wartungsfähigere Lösung zum Kategorisieren von Linkgruppen in a wählen Liste. Ob Sie eine verwenden wählen Das Menü zur Verdichtung der Website-Navigation auf mobilen Geräten ist eine Entscheidung, die Sie als Designer treffen müssen. Sie haben jetzt jedoch ein zusätzliches Wissen in Ihrem Werkzeuggürtel, um responsives Webdesign zu beherrschen!
