Responsive Menü Konzepte, CSS-Tricks
Im Folgenden ist ein Gastbeitrag von Tim Pietrusky. Ich weiß, dass Tim von seiner produktiven Arbeit auf CodePen und ein hilfreiches Community-Mitglied dort. Er schrieb mir mit diesem Gastbeitrag über ansprechende Menüs, die ich mehr als glücklich bin unten mit Ihnen zu teilen. Es ist nicht nur ein rechtzeitiges Konzept, aber eines der Konzepte verbessert auf einem cleveren CSS Trick, den wir hier in der Vergangenheit behandelt haben.
Wenn es um ansprechendes Design kommt sind wir mit verschiedenen Techniken konfrontiert, wie man am besten zu handhaben unsere Navigationsmenüs für kleine Bildschirme zu verändern. Die Ressourcen scheinen endlos. Deshalb werde ich Ihnen vier wichtigsten Konzepte zeigen und die Vor- und Nachteile aller von ihnen zu diskutieren.
Bevor wir anfangen
In dem Code in diesem Artikel vorgestellt, verwende ich keine hersteller Präfixe die CSS einfacher zu halten, um zu sehen und zu verstehen. Die komplexeren CSS Beispiele verwenden SCSS. Jedes Beispiel wird auf CodePen gehostet, wo Sie die kompilierte CSS sehen können, wenn Sie es wünschen.
Alle Menü Konzepte in diesem Artikel sind auf dieser einfachen HTML-Struktur basiert, die ich Grundmenü aufrufen. Die Rolle Attribut wird verwendet, um das besondere Konzept (Voll horizontal, wählen, custom-Drop-Down-und Off-Leinwand) zu spezifizieren.
Zu adressieren kleine Bildschirme verwende ich die gleiche Medien-Abfrage auf allen Konzepten.
1. Volle Horizontal
Dies ist der einfachste Ansatz, weil man nur die Listenelemente in voller Breite auf kleinen Bildschirmen vornehmen müssen.
Dies ist, wie es auf einem kleinen Bildschirm mit einem benutzerdefinierten Stil aussieht.
Vorteile
Nachteile
- Reserven zu viel Bildschirmraum
Dieses Konzept verbirgt das Grundmenü auf kleinen Bildschirmen und zeigt ein Auswahlmenü statt.
Wir verstecken die Auswahl auf großen Bildschirmen.
Auf kleinen Bildschirmen, verstecken wir das Grundmenü und zeigen die Auswahl. Damit der Benutzer erkennt, dass dies ein Menü wir auch ein Pseudo-Element mit dem Text „Menü“ und fügen hinzu.
Dies ist, wie es auf einem kleinen Bildschirm mit einem benutzerdefinierten Stil aussieht.
Vorteile
- Braucht nicht viel Platz
- Verwendet native Steuerelemente
Nachteile
3. Individuelle Dropdown
Dieses Konzept verbirgt das Grundmenü auf kleinen Bildschirmen und zeigt eine Eingabe Etikett statt (um die Checkbox Hack zu verwenden). Wenn der Benutzer auf dem Etikett klickt, wird das Grundmenü unterhalb gezeigt.
Problem mit der Checkbox Hack
Es gibt zwei Probleme mit der Standard-Checkbox Hack:
Vorteile
Nachteile
- Bad Semantik (Input / label)
- Extra HTML
4. Aus Leinwand
Dieses Konzept verbirgt das Grundmenü auf kleinen Bildschirmen und zeigt eine HTML-Eingabe beschriften (die Advanced Checkbox Hack zu verwenden, siehe 3. Benutzerdefinierte Dropdown für mehr Infos) statt. Wenn der Benutzer auf dem Etikett klickt, fliegt das Grundmenü in der linken und der Inhalt bewegt sich nach rechts - der Bildschirm geteilt wird: Menü
80% und der Inhalt
20% (abhängig von der Auflösung und CSS-Einheiten).
Auf großen Bildschirmen, verstecken wir das Etikett.
Auf kleinen Bildschirmen, verstecken wir das Grundmenü aus dem Bildfenster und das Etikett vorzeigen / Eingang. Um das Menü zu verbergen geben wir eine Breite ($ menu_width) und fügen Sie eine negative Position zu. Damit erkennt der Benutzer, dass dies ein Menü wir auch ein Pseudo-Element mit dem Hinzufügen von Text „≡“ (umgerechnet auf „\ 2261“ als Inhalt auf dem Pseudo-Elemente zu verwenden) auf das Etikett.
Wenn der Benutzer auf den Eingang klickt, fliegt das Grundmenü in der linken und der Inhalt bewegt sich nach rechts.
Dies ist, was das Menü sieht aus wie auf einem kleinen Bildschirm mit einem benutzerdefinierten Stil.
Vorteile
Nachteile
- Bad Semantik (Input / label)
- Extra HTML
- Absolute Position zum Körper = gefühlt feste Position
Ist es auf IE funktionieren?
Alle der oben haben ein Ziel verwendeten Techniken: Erstellen Sie ansprechende Menüs für modernen Browser! Und weil es keine IE 8 oder niedriger auf jedem mobilen Gerät ist, müssen wir nicht darüber Sorgen zu machen.
Teile das:
Für mich ist die beste Lösung ist nach wie vor eine Kombination zwischen 1 und 3, oder man könnte sogar tun 1 und 4. Was bedeutet, dass Sie ein Menü haben, die oben (oder unten) der Seite von Ausfall- und drehen, dass in einem der sichtbar ist die anderen Lösungen beim Laden der Seite mit JS. Dann können Sie JS Ereignisse für Trigger verwenden und sind nicht angewiesen auf die Checkbox Hack, die wie scheint nur, dass ... ein Hack. Danke für den Beitrag!