Erstellen Sie ein CSS-Dropdown-Menü

  • Erforderliche Kenntnisse: Grundlegendes HTML, mittleres CSS
  • Benötigt: Texteditor, Geräte und / oder Emulatoren nach eigenem Ermessen
  • Projektzeit: 30 Minuten
  • Support-Datei

Es ist geradezu eine Herausforderung, herauszufinden, wie die Navigation für mobile Geräte am besten optimiert werden kann. Unsere Community hat sich etwas ausgedacht Eine Menge verschiedener Ansätze zur Lösung dieses Problems , jedes mit seinen eigenen Vor- und Nachteilen.

In der Vergangenheit habe ich mich häufig dafür eingesetzt, die traditionelle listenbasierte Navigation in eine umzuwandeln wählen für Handys (siehe Beispiel unten). Es ist ein einfaches Konzept, das einfach zu implementieren ist, und ich liebe die Eleganz des Ansatzes, aber die Tatsache, dass Sie sich darauf verlassen müssen JavaScript um es nutzbar zu machen, saß nie wirklich gut bei mir. Als leidenschaftlicher Verfechter der fortschreitenden Verbesserung wusste ich, dass es einen besseren Weg geben musste.

CSS-Dropdown-Menü: Auswahlbasierte Navigation auf Retreats4Geeks.com



Auswahlbasierte Navigation auf Retreats4Geeks.com

Ich war schon immer verliebt in reine CSS-Dropdown-Menüs, aber sie haben sich traditionell darauf verlassen :schweben . Und Schweben ist, wie Sie wissen, in berührungsbasierten Szenarien irrelevant, sodass dies wie eine Sackgasse schien. Aber dann dämmerte es mir: :Ziel war die Antwort auf meine Gebete.

Wie Sie wahrscheinlich wissen, ist der Ziel-Pseudoklassen-Selektor ( :Ziel ) ermöglicht es Ihnen, Stile auf Elemente anzuwenden, auf die in der Fragmentkennung einer URL verwiesen wird. Zum Beispiel:

http: //website.tld/my-page/#content

In dieser URL lautet die Fragmentkennung 'Inhalt', wodurch der Browser einen Bildlauf durchführt, um ein Element mit einem zu bringen Ich würde von 'Inhalt' in Sicht. Kinderleicht. Wir können dann Stile auf dieses Element anwenden, wenn es als Ziel ausgewählt wird :Ziel ::

: Ziel {
Hintergrund: # F6FD86;
}}

CSS-Dropdown-Menü: Ein Element, das mit: target hervorgehoben wird

Ein Element, das mit: target hervorgehoben wird

Als sich das Nichols College wegen Neugestaltung an meine Firma wandte ihre angehende Student Microsite Das Projekt bot die perfekte Gelegenheit, meine Theorie zu testen :Ziel .

01. Das Design

Die Microsite besteht eigentlich nur aus zwei Seiten - einem Formular zum Sammeln von Informationen über eine potenzielle Studentin und einer Dankesseite, auf der relevante Informationen zu den Programmen des Nichols College basierend auf ihren Antworten zusammengestellt werden -, aber sie enthält eine Vielzahl von Navigationslinks, die ihr dabei helfen, Dinge wie den Zeitplan zu erledigen einen Besuch abstatten, den Bewerbungsprozess beginnen oder eine Wegbeschreibung zur Schule erhalten. Zusätzlich zu diesen wichtigen Navigationselementen bietet die Website auch eine Sammlung von Navigationslinks, die Zugriff auf mehr von dem bieten, was ich als 'Geschmack' der Schule bezeichne.

Es war viel zu jonglieren, aber wir haben natürlich mit dem Inhalt begonnen und die Seite so organisiert, dass die Benutzer sofort auf die Inhalte zugreifen konnten, die sie tatsächlich lesen und / oder bearbeiten konnten, bevor sie ihnen eine Navigation präsentierten:

  1. Site Banner
  2. Inhalt
  3. Handlungsaufforderungen
  4. Kontaktmechanismen
  5. Links zu bestimmten Schulseiten
  6. Soziale Netzwerke
  7. Suche
  8. Urheberrecht usw.

Dieser Ansatz passt perfekt zu Luke Wroblewskis „Mobile First“ -Mantra und der Idee von Präsentieren von Inhalten im Voraus und Ermöglichen, dass ein Benutzer von dort aus schwenkt . Dieser inhaltliche Ansatz führte zu Unser Basislayout ohne Medienabfragen , gerichtet auf Funktionstelefone.

CSS-Dropdown-Menü: Inhalt zuerst in Opera Mini

Inhalt zuerst in Opera Mini

Wie wir nur allzu gut wissen, haben Immobilien auf Geräten mit kleinem Bildschirm einen hohen Stellenwert. Daher suchten wir ständig nach Möglichkeiten, die Benutzererfahrung zu optimieren. Da Smartphones tendenziell eine bessere CSS-Unterstützung bieten als Feature-Telefone, haben wir uns dazu entschlossen Stecken Sie die weniger wichtigen Links hinter ein Menüsymbol und machen Sie sie nur sichtbar, wenn Sie darauf klicken , sehr ähnlich den alten CSS-Dropdown-Menüs. Es ist ein gängiges Entwurfsmuster im mobilen Web, aber jede Implementierung, die ich bisher gesehen habe erforderliches JavaScript . Ich wollte sehen, ob ich eine vergleichbare Erfahrung nur mit CSS machen kann (und ohne auf Hacks zurückzugreifen mit einer versteckten Formularsteuerung ).

CSS-Dropdown-Menü: Das Dropdown-Menü für goto.nichols.edu

Das Dropdown-Menü für goto.nichols.edu

Ich werde durch das CSS gehen, aber zuerst sollte ich beachten, dass die folgenden Stile in einem Stylesheet für Geräte mittlerer Breite ab 19.375 Elementen platziert wurden. Die meisten dieser Regeln befanden sich in einer zusätzlichen Medienabfrage in diesem Stylesheet, die ihre Anwendung auf Breiten von weniger als 46 mm beschränkte (was breit genug war, um ein alternatives Layout für dieses bestimmte Navigationsgerät zu unterstützen). Diese Isolationstechnik stellt sicher, dass die Regeln nicht unnötig in alternative Layouts 'ausbluten'.



@media screen und (max-width: 46em) {
/ * Regeln gehen hier * /
}}

02. Lass uns eintauchen

Der erste Schritt bestand darin, die Stile anzuwenden, um das Navi oben auf der Seite neu zu positionieren:

#sind nicht {
Rand: 0;
Position: absolut;
oben: 0;
rechts: 0;
links: 0;
Z-Index: 1000;
}}

Hinweis: Ich habe irrelevante Stile entfernt, damit Sie sich auf die wichtigen Teile konzentrieren können.

Ich habe dann die Links so eingerichtet, dass sie reduziert angezeigt werden, außer für den Fall, dass das Navi das aktuelle Ziel war:

#nav a {
Rand-Boden-Breite: 0;
Überlauf versteckt;
Höhe: 0;
Zeilenhöhe: 0;
Polsterung: 0 1em;
}}
#nav: ziele auf ein {
Rand-Boden-Breite: 1px;
Zeilenhöhe: 3em;
Höhe: 3em;
}}

Mit diesen Regeln könnte ich die URL manuell bearbeiten, um das Menü zu öffnen und zu schließen. Dies ist jedoch in einem realen Szenario keine vernünftige Anforderung. Ich musste einen Link erstellen, der auf die Navigationsliste abzielt, aber ich wollte dies tun, ohne dem Dokument zusätzliche Cruft hinzuzufügen. Schließlich macht es keinen Sinn, dass sich ein Element auf der Seite befindet, wenn es nur in einem Szenario nützlich ist. Zum Glück war ein alter Standby perfekt für die Aufgabe geeignet.

03. Springe zur Rettung

In den frühen Tagen des Webs haben wir häufig Links zum Überspringen von Inhalten verwendet, um unseren Benutzern zu ermöglichen, die Navigation auf der Website zu überspringen und zum Kern der Seite zu gelangen. Bei einem Content-First-Ansatz ist ein Link zum Navigieren zur Navigation gleichermaßen nützlich, um Benutzern direkten Zugriff auf die Navigation zu ermöglichen, ohne dass alles oben auf der Seite platziert werden muss. Das Tolle an 'Überspringen zu' -Links ist, dass sie die Fragmentkennung der URL manipulieren und uns dadurch die Verwendung ermöglichen :Ziel . Hier ist!

Zuerst habe ich oben auf der Seite einen Link zum Springen hinzugefügt:



Seitennavigation

Dann habe ich es so gestaltet, dass es wie die kleine Menüschaltfläche in der oberen rechten Ecke unseres Designs aussieht:

#springen {
Hintergrund: # 000 url (/c/i/nav.png) 50% 50% no-repeat;
Rand: 1px fest # 8b8b8b;
Randbreite: 0 0 1px 1px;
Cursor: Zeiger;
Bildschirmsperre;
Polsterung: 0;
Höhe: 53px;
Breite: 53px;
Texteinzug: -999em;
Position: absolut;
rechts: 0;
oben: 0;
}}

Es ist erwähnenswert, dass dieser Link sogar für Feature-Telefone nützlich ist, da sie direkt zur Navigation springen können. (Sie können diesen einfachen Ansatz von sehen Inhaltsverzeichnis Magazin und Bagcheck . Für die Vor- und Nachteile konsultieren Sie Zusammenfassung des mobilen Navigationsschemas von Brad Frost .)

Mit der Umschalttaste hatte ich eine raffinierte Möglichkeit, das Navi erscheinen zu lassen, aber keine Möglichkeit, es wieder verschwinden zu lassen.

Nachdem ich eine Weile über dieses Problem nachgedacht hatte, wurde mir die lächerlich einfache Lösung klar: Fügen Sie am Ende der Navigationsliste einen Link „Zurück zum Inhalt“ hinzu. Klicken Sie auf diesen Link #sind nicht nicht mehr das Ziel, und die Liste würde zusammenbrechen.

Einfach genug, aber das hat nur einen Teil des Problems gelöst. Wir möchten nicht, dass ein Benutzer eine Liste durchsuchen muss, um einen Link zu finden, über den er das Dropdown-Menü schließen kann. Stattdessen möchten wir, dass es sich so verhält, wie es ein Benutzer erwarten würde: Durch Tippen oder Klicken außerhalb des Dropdown-Menübereichs sollte das Navigationssystem erneut reduziert werden. Zum Glück mit ein wenig Z-Index Jonglieren und ein Hauch von cleverer Positionierung Es ist möglich, den Link unter den anderen Navigationselementen zu platzieren und ihn zu erweitern, um den Rest des Bildschirms auszufüllen (natürlich unsichtbar). Hier eine Auswahl der relevanten Stilregeln:

#springen {
/ * Stellen Sie sicher, dass die Menüschaltfläche oben ist * /
Z-Index: 1001;
}}
#sind nicht {
/ * Das Navi befindet sich hinter der Menütaste * /
Z-Index: 1000;
}}
#nav: Ziel
/ * es sei denn, es wird angezeigt * /
Z-Index: 1001;
}}
#nav: ziele auf ein {
/ * Navi-Links auf eine Ebene bringen * /
Position: relativ;
Z-Index: 1;
}}
#zurück {
/ * einen Positionierungskontext für den näheren erstellen * /
Position: relativ;
}}
#back a {
/ * verwandle den Link in einen Geist * /
Hintergrund: transparent;
Rand: 0;
Texteinzug: -999em;
/ * lass es den Bildschirm füllen * /
Position: absolut;
oben: -101em;
unten: -101em;
links: 0;
rechts: 0;
/ * stelle sicher, dass es hinter den anderen Links sitzt * /
Z-Index: 0;
}}

Damit war das Menü voll funktionsfähig. Es musste nur ein wenig verfeinert werden.

CSS-Dropdown-Menü: Das endgültige Dropdown-Menü wurde erweitert

Das letzte Dropdown-Menü wurde erweitert. Der unsichtbare Link „Zurück nach oben“ wurde farbig dargestellt, um zu zeigen, wie er in das Gesamtlayout passt.

04. Hauswirtschaft

Um das Erscheinungsbild der Benutzeroberfläche zu verbessern, habe ich mich dafür entschieden, den Links einen einfachen Übergang hinzuzufügen, damit sie vertikal wachsen können, wenn das Navi als Ziel ausgewählt wird:

#nav: ziele auf ein {
-Moz-Übergang: Höhe 0,25 s, Linienhöhe 0,25 s;
-ms-Übergang: Höhe 0,25 s, Zeilenhöhe 0,25 s;
-o-Übergang: Höhe 0,25 s, Linienhöhe 0,25 s;
-Webkit-Übergang: Höhe 0,25 s, Zeilenhöhe 0,25 s;
Übergang: Höhe 0,25 s, Linienhöhe 0,25 s;
}}

Mit diesem kleinen Übergang lief das Navi wunderbar, aber ich war immer noch ein wenig besorgt über mögliche Stilblutungen. Sicher, wenn ein Browser Medienabfragen unterstützt, unterstützt er wahrscheinlich :Ziel , aber nur für den Fall, ich habe mich dafür entschieden, jede relevante Stilregel mit vorwegzunehmen Körper: nicht (: Ziel) (Dies würde nur übereinstimmen, wenn der Browser die Zielauswahl unterstützt). Hier ein Beispiel:

body: not (: target) #nav {
/ * Diese Stile werden nur angewendet, wenn: target und: not are
verstanden (und der Körper ist natürlich nicht zielgerichtet) * /
}}

draplin design co.: so ziemlich alles

Und da haben Sie es: ein einfaches, schrittweise erweitertes CSS-Dropdown-Menü, das als Teil eines reaktionsschnellen Designs wunderbar funktioniert. Ich hoffe, Sie finden diesen Ansatz genauso praktisch wie ich.

Aaron Gustafson ist der Gründer und Hauptberater von Easy! Designs, eine Webentwicklungsberatung. Er ist außerdem Gruppenmanager des Web Standards Project (WaSP), ein eingeladener Experte der Open Web Education Alliance des W3C, Redner und Autor.

So was? Lese das!

Was halten Sie von Dropdown-Menüs - gute Idee oder unnötige Unordnung? Lass es uns in den Kommentaren unten wissen!