Das Off-Canvas-Muster ist ein klassischer Ansatz für die responsive Navigation. Wenn das Ansichtsfenster klein genug ist, um es zu rechtfertigen, wird die sperrige Navigation "off canvas" verborgen und nur beim Umschalten sichtbar gemacht.
Heute bauen wir eine Off-Canvas-Navigation mit CSS zum Umschalten (kein JavaScript erforderlich) und unserem guten Freund Grid zum Erstellen der Seitenstruktur. Hier ist die ganzseitige Demo, worauf wir hinarbeiten.
Grundlegende Seitenstruktur
Beginnen wir mit dem Erstellen einer einfachen Seite. Wir streben so etwas an:
Semantische Seitenstruktur
Dies ist eine ziemlich typische semantische Seitenstruktur. Sie werden sehen, dass für kleine Ansichtsfenster alles in einer einzigen Spalte verbleibt. Dann wird die Nebenansicht auf größeren Bildschirmen angezeigt. Das Das Element ist zur besseren Übersicht blau hervorgehoben.
Hier ist unser Markup:
Header
Artikel
Curabitur orci lacus, auctor ut facilisis nec, ultrises quis nibh. Phasellus id diam sollicitudin, malesuada turpis id, gravida erat. Maecenas placerat elit vel hendrerit convallis. Sed in mauris uto mit vulputate viverra feugiat ac dui. Fusce feugiat arcu in vehicula vehicula. Donec varius justo bei nulla aliquet volutpat.
Ut Id Rutrum Eros. Nulla tristique, magna und mattis vulputate, mi eros suscipit turpis, nec bibendum turpis nunc feugiat sapien. Nunc arcu est, lacinia id diam quis, sagittis euismod neque. Nullam Fringilla Velit Sed Porta Gravida. Proin eu vulputate libero. Ut a lacinia enim. Etiam venenatis mauris und orci tempor argumentieren. Sed eros et ultricies streiten sich. Aenean sed efficitur orci. Nulla vel tempus mi.
Ut cursus suscipit augue, id sagittis nibh faucibus eget. Etiam suscipit ipsum eu augue ultricies bei rhoncus mi faucibus. In et tellus vitae leo scelerisque fringilla nec bei nunc.
Nun fügen wir einige visuelle Stile und einige Rasterregeln hinzu.
Get Griddy Mit ihm
Beginnen Sie damit, alle unsere Strukturelemente in ein Element zu packen - dies wird unser Grid-Container sein. Ich benutze .
Fügen Sie nun einige grundlegende Gitterstile hinzu:
Hier erklären wir, dass der Container sein sollte Anzeige: Raster;, Es sollte eine einzige Spalte mit einer Brucheinheit enthalten (dies ist an dieser Stelle nicht unbedingt erforderlich, wird jedoch aus Gründen der Vollständigkeit hinzugefügt) und die Lücke zwischen allen Gitterelementen sollte 10 Pixel betragen.
Fügen Sie anschließend ein paar visuelle Stile hinzu, um die Dinge ein wenig klarer zu machen:
.container> * color: # 353535; Schriftgröße: 1.2em; Zeilenhöhe: 1,5; Polsterung: 20px; Hintergrund: # d0cfc5; .container nav background: # 136fd2; nav ul list-style: none; Marge: 0; Polsterung: 0; nav a color: # d0cfc5 nav a: hover Textdekoration: keine;
Machen Sie es ansprechbar
Fügen Sie eine Medienabfrage hinzu, sodass sich das Layout ändert, wenn der Darstellungsbereich eine bestimmte Größe erreicht (gehen wir für 600 Pixel).
Auf größeren Bildschirmen ändert sich die Rasterdeklaration in Rastervorlagen-Spalten: Wiederholung (4, 1fr);. Dadurch erhalten wir vier Spalten mit gleicher Breite. Daher müssen wir angeben, wie breit wir jedes unserer Strukturelemente haben möchten. Das Header, nav, und Fußzeile werden alle 4 (über vier Spalten) umfassen, während die Sektion wird sich über nur drei erstrecken, wobei eine Spalte für die Spalte übrig bleibt beiseite automatisch ausfüllen.
Schließlich einige Stile, um das Aussehen des Navis zu verändern:
/ * nav styles * / nav ul li Anzeige: Inline-Block; Auffüllen: 0 20px 0 0;
Folgendes haben wir bisher:
Off-Canvas wagen
Dies ist ein perfektes Beispiel dafür, wie CSS-Positionierung selbst in einem deklarierten Grid an strukturellen Elementen funktionieren kann. Wir greifen unser Nav auf, entfernen es aus dem Dokumentenfluss und positionieren es außerhalb der Leinwand. Die anderen Gitterelemente passen gut zusammen.
Beginnen Sie mit einer anderen Medienabfrage. Wir haben schon unsere min-Breite Abfrage, aber diesmal möchten wir nur Elemente bis zu einem Format erstellen maximale Breite. Bis unser Viewport die magischen 600 Pixel erreicht, möchten wir, dass das Navi außerhalb der Leinwand positioniert wird:
@media only screen und (max-width: 599px) #nav position: fixed; / * oder wähle "absolut" je nach gewünschtem Verhalten * / top: 0; unten: 0; Breite: 300px; links: -340px; Übergang: Verwandeln Sie das .3s-In-Out;
Wir haben dem Nav eine feste Breite gegeben und es so positioniert, dass es vollständig ausgeblendet ist.
Wir haben Position verwendet Fest, man könnte aber auch gebrauchen absolut Hier hängt es davon ab, ob das Navi mit dem Fenster gescrollt werden soll oder nicht.
Sie werden auch das bemerken Übergang Regel, die wirksam wird, sobald wir einige Umschaltsteuerungen erstellen. Wir werden das Nav-Panel mit Hilfe von wieder in die Ansicht bringen verwandeln. Danke an Rachel Nabors und Joe Zimmerman, die mich daran erinnert haben verwandeln ist für Animationen immer performanter als Position!
Umschalten
Nachdem unser Navigationsgerät verschwunden ist, benötigen wir jetzt einige Steuerelemente, um es bei Bedarf wieder zur Verfügung zu stellen. Fügen wir einen Link hinzu, um ihn auszulösen, und einen Link, um ihn wieder zu schließen.
Fügen Sie dies der Kopfzeile hinzu:
öffnen
und das zum nav:
schließen
Es ist nicht erforderlich, dass der offene Link auf größeren Bildschirmen angezeigt wird. Daher werden die .toggle-Elemente in unserer Medienabfrage mit geringer Breite ausgeblendet:
.umschalten display: none;
:Ziel
Wichtig bei den obigen Links ist das Vorhandensein eines "Fragment Identifiers" (der #nav in der href). Diese Bezeichner werden von Browsern verwendet, um direkt zu bestimmten Elementen auf einer Seite zu navigieren. In diesem Fall zielen wir auf das Element, das mit der ID "nav" übereinstimmt, und sobald es anvisiert wurde, können wir es mithilfe von formatieren :Ziel Pseudoklasse. Kein JavaScript erforderlich!
Hinweis: Wenn Sie einen Fragment-Bezeichner auf diese Weise verwenden, wird bei jedem Klicken ein Eintrag zum Browserverlauf hinzugefügt. Dies kann nicht das Ergebnis sein, das Ihre Benutzer wünschen! Vielen Dank an Joe Zimmerman für diesen Hinweis.
Fügen Sie der max-width-Medienabfrage Folgendes hinzu:
#nav: target transform: translateX (340px);
Das ist es! Das ist unser Toggle.
Folgendes haben wir jetzt:
Sie müssen einen Blick auf die ganzseitige Demo werfen, um sich voll einschätzen zu können, was sie tut.
Fazit
Und wir sind fertig! Ich habe das Styling auf ein Minimum reduziert, um nicht im Weg zu stehen, aber fühle mich frei, verrückt zu sein und diesen Look genau so aussehen zu lassen, wie du möchtest.
Möglicherweise bevorzugen Sie auch einen JavaScript-Schalter anstelle von :Ziel, In diesem Fall haben Sie alle Teile zur Verfügung, um auch diese Arbeit zu ermöglichen.
Ich hoffe, Sie haben diese kleine Übung genossen. Bleiben Sie dran, um noch mehr zu erfahren!
Nützliche Ressourcen
Grundlegendes zur CSS-Rasterlayout-Reihe in Tuts+
Untersuchen der Responsive Navigation: Off Canvas Patterns von Steven Bradley
Abonnieren Sie csslayout.news
Hochleistungs-Animationen von Paul Lewis und Paul Irish
Accentsconagua
Share
Semantische Seitenstruktur
