Navigationsmenüs waren früher eine recht einfache Sache. Codiere eine ungeordnete Liste, gib sie ab und du kannst loslegen. Das responsive Design ist heutzutage der letzte Schrei, obwohl Sie beim Erstellen eines Menü-Designs vor einigen neuen Herausforderungen stehen.
Folgen Sie uns, während wir von vorne beginnen und ein einfaches, aber effektives Navigationsmenü programmieren, das Sie leicht ändern und in Ihren eigenen Projekten wiederverwenden können.
Was wir bauen
Wenn Sie die Art von Person sind, die gerne weitergeht, haben wir hier einen kleinen Einblick in das, was wir bauen. Stellen Sie sicher, dass Sie die Größe Ihres Browser-Fensters ändern, um die reagierenden Konzepte in Aktion anzuzeigen.
Demo: Klicken Sie hier, um Dabblet anzuzeigen und zu optimieren.
Das HTML
Lassen Sie uns direkt in dieses Projekt eintauchen, ohne unnötige Flusen. Ich bin mir sicher, dass Sie gerne etwas Gutes tun.
Der erste Schritt ist die Entscheidung über ein Markup. Da es sich um ein Navigationsmenü handelt, ist es der perfekte Ort, um die HTML5-Navigation (nav) zu implementieren. Element.
Ob Sie es glauben oder nicht, dieses eine kleine Stück Code hatte meinen Kopf gedreht, als es Zeit zum Testen war. Aus irgendeinem mir unbekannten Grund waren meine Stile in IE6-8 einfach nicht wirksam! Nach gut zehn Minuten Fummeln schlug ich mir in den Kopf, als mir klar wurde, dass ich HTML5-Elemente verwendet hatte, die natürlich nicht von etwas älterem als IE9 unterstützt werden.
Glücklicherweise ist der Fix einfach. Legen Sie einfach das berühmte html5shiv ab, und Sie können loslegen (legen Sie dies in den Kopfbereich Ihres Dokuments).
Fügen Sie die Liste hinzu
Nun, da wir unser Containerelement herausgefunden haben, ist es Zeit, ein einfaches UL mit acht Links einzubauen. Dieses Tutorial ist ziemlich stark von der Anzahl der Links abhängig. Wenn Sie also nicht sicher genug sind, um in einigen Bereichen selbstständig zu sein, sollten Sie acht verwenden.
Fügen Sie das Untertag hinzu
Um das Menü ein wenig interessanter und hilfreicher zu gestalten, fügen wir zu jedem Menüpunkt eine weitere Textzeile unterhalb der ersten ein. Es gibt eine Reihe von Möglichkeiten, wie wir das angehen könnten. Fühlen Sie sich also nicht einverstanden mit meiner Herangehensweise. Im Grunde habe ich nur ein Break-Tag geworfen und ein klein Element für die zweite Zeile. Das zweite Element ist in der Tat klein, so dass wir einen ziemlich semantischen Hook ohne unnötige Divs, IDs oder Klassen erhalten.
Fortschrittskontrolle
Nach diesem Schritt sollten Sie eine einfache, nicht gestylte Liste von Links haben. Beachten Sie, dass diese kleinen Tags ohne Anstrengung bereits funktionieren und die Größe jeder anderen Zeile reduzieren.
Starter Styles
Um unser CSS zu beginnen, ziehen wir den guten alten Universalselektor heraus und folgen dem Rat von Paul Irish, indem Sie sich bewerben Box-Dimensionierung: Border-Box zu jedem Element. Dies hilft uns dabei, die Größen einfach zu bestimmen, auch wenn wir Rahmen verwenden.
Containerstile
Bevor wir uns mit den einzelnen Listenelementen beschäftigen, lassen Sie uns einige übergeordnete Elemente auf unsere übergeordneten Elemente anwenden. Richten Sie zunächst das Nav-Element aus und stellen Sie es auf 90% der Körperbreite ein. Dies wird sich größtenteils über den zur Verfügung stehenden Platz erstrecken, lässt aber weiterhin ein wenig Raum zum Atmen. Stellen Sie sicher, dass Sie ihn auch auf der Seite mit automatischen Rändern zentrieren.
Springen Sie auch hinein und wenden Sie die erforderlichen ungeordneten Listenstile an, um die Liste zurückzusetzen und alle Aufzählungszeichen zu entfernen.
Menüstile
Nun, da unsere übergeordneten Elemente zusammenwirken, ist es an der Zeit, gezielt an den Menüelementen zu arbeiten, die über das Element nav in Verbindung mit den Ankertags und Listenelementen anvisiert werden können.
Hier ist ein großer Teil des Codes, aber habe keine Angst davor, ich werde dich Stück für Stück durchgehen.
Ich habe die Eigenschaften hier zum leichteren Nachschlagen alphabetisch geordnet, aber um ehrlich zu sein, ist dies nicht meine bevorzugte Vorgehensweise. Ich mag es, Stile nach Funktionen zu gruppieren, damit sie ein bisschen mehr Sinn ergeben. Wenn wir unsere Stile auf diese Weise neu ordnen, können sie leichter besprochen werden.
An erster Stelle steht der Teil der Stile, der die Form und das Layout jedes Listenelements definiert. Wir haben die Anker geändert, um Levelelemente zu blockieren, sie nach links geschoben, eine Breite zugewiesen und ihnen ein wenig Polsterung zugewiesen. Dadurch wird für jeden Link im Menü ein schönes großes Rechteck erstellt. Warum 12,5% für die Breite? Weil wir acht Menüpunkte haben und 100% / 8 gibt uns 12,5% Breite für jeden Artikel.
Das nächste ist der Codeabschnitt, der die visuelle Gestaltung der gerade erstellten Boxen definiert. Wir haben ihnen auf der rechten Seite eine Hintergrundfarbe und einen einzelnen Pixelrand gegeben.
Zum Schluss enden wir mit allen Stilen, die sich auf den Text des Menüs beziehen. Dies ist alles ziemlich einfach, der eine Kurvenball ist der? Cutive? Schrift, die Sie hier finden können.
Für die klein Stile habe ich die Farbe geändert, die Textumwandlung in Großbuchstaben entfernt und die Schriftart auf Helvetica gesetzt.
Fortschrittskontrolle
Diese Stile machten den Unterschied in der Welt. Unser Menü sucht viel besser. Die benutzerdefinierte Schriftart funktioniert, die Links sind Inline, der kleine Text ist perfekt. es ist eine schöne sache.
Hover-Stile
Wenn der Benutzer den Mauszeiger über einen Menüpunkt bewegt, nehmen wir ihn ganz schwarz. Damit es sich ein bisschen schöner anfühlt, fügte ich auch eine halbe Sekunde hinzu.
Border Fix
Nun, Sie können es nicht sehen, da unser Hintergrund weiß ist, aber es gibt tatsächlich ein Problem mit unseren Grenzen. Sie sind eigentlich nur dazu gedacht, jedem Menüpunkt ein wenig visuelle Definition zu geben, was bedeutet, dass es am Ende keine Notwendigkeit gibt. Um dies zu beheben, können wir die letzte: untergeordnete Pseudoklasse verwenden.
Im Folgenden habe ich eine temporäre Hintergrundfarbe angewendet, damit Sie den Unterschied zwischen der vorherigen und der nachfolgenden Version sehen können.
Responsive gehen
Dieses Projekt ist ein gutes Beispiel für den Unterschied zwischen einem responsiven Design und einem fließenden Design. Zu diesem Zeitpunkt ist unser Menü flüssig (es werden prozentuale Breiten verwendet), es reagiert jedoch nicht. Wir können dies deutlich sehen, wenn wir versuchen, unser Fenster zu sehr zu verkleinern:
Wie Sie sehen können, ist dies ein Wrack! Lassen Sie uns in einige Medienabfragen einsteigen, um zu sehen, ob wir dieses Problem beheben können. Der beste Weg, um herauszufinden, wo wir Medienabfragen benötigen, besteht einfach darin, sie zu testen und herauszufinden, wo das Layout bricht, und dann zu berücksichtigen.
1220px
Das erste Problem, das ich sehe, tritt etwa 1.200 Pixel breit auf. Hier werden die längeren Textelemente abgeschnitten und sind nicht mehr vollständig lesbar.
Um dies zu beheben, müssen wir nur die Schriftgröße anpassen. Ich ziele auf einen Bereich kurz bevor das Problem auftritt (1,220px) und setze meine Schriftarten auf 10px.
Mit dieser Änderung tritt das Problem nicht mehr auf. Wenn wir die Größe unseres Fensters verkleinern, reagiert das Menü und reduziert die Schriftgröße entsprechend der Größe.
930px
Wieder verkleinern wir das Fenster und stellen fest, dass es um die 900px-Marke haarig wird. Wir haben hier viele Probleme mit dem Überlauf:
Anstatt die Schriftgröße zu verkleinern und zu verkleinern, bis Sie sie nicht mehr sehen können, wird das Menü dieses Mal komplett neu angeordnet, sodass es in zwei Zeilen aufgeteilt wird. Jetzt kann jeder Link schön und groß sein, da sich dies möglicherweise um den Punkt herum befindet, an dem Tablettgrößen auftreten.
Beachten Sie, dass wir neu überdenken mussten, wie unsere Grenzen auch diesmal funktionieren. Jetzt brauchen wir die obere Reihe, um die unteren, aber nicht die unteren Reihen. Wieder einmal machen Pseudoklassen-Selektoren das ganz einfach.
580px und 320px
Das zweizeilige Format funktioniert gut genug, bis wir weniger als 600 Pixel erreichen und dann die Hölle losgeht. Das Ding fällt einfach völlig auseinander.
Um dies zu beheben, beenden wir unsere Medienanfragen mit einem zweispaltigen, vierzeiligen Format. Wir werden dieses Layout für 580px verwenden und die Schriftgröße bei 320px etwas verringern.
Unsere Speisekarte sieht jetzt auch bei einer sehr kleinen Größe gut aus. Der Nachteil ist, dass es ein ordentliches Stück vertikaler Höhe beansprucht, aber Sie können einige der Polsterungen entfernen, wenn Sie dadurch gestört werden.
Selectivizr
Die scharfsinnigen Beobachter unter Ihnen werden feststellen, dass wir ältere Versionen von IE mit dem html5shim-Konto berücksichtigt haben, um nur einige ausgefallene Pseudo-Klassenselektoren zu verwenden, die im IE nicht funktionieren. Um dies zu berücksichtigen, müssen Sie Selectivizr herunterladen und implementieren, ein schickes JavaScript-Dienstprogramm, das speziell für CSS3-Selektoren in IE6-8 entwickelt wurde.
Fazit
Responsive Design ist kein Spaziergang im Park.Es braucht Zeit, Mühe und viel? effektiv abziehen. Ich zerlege es gerne in individuelle Herausforderungen wie das Navigationsmenü hier und die Bildergalerie in einem vorherigen Artikel, damit Sie den Prozess lernen können, ohne sich überfordert zu fühlen.
Sie sollten jetzt gut gerüstet sein, um Ihr eigenes responsives Navigationsmenüprojekt zu starten. Hinterlassen Sie einen Kommentar und zeigen Sie uns, was Sie sich vorstellen. Welchen besonderen Herausforderungen standen Sie unterwegs gegenüber?