Erstellen Sie eine feste Seitenleiste und ein unteres Navigationsmenü mit CSS Flexbox

Blog

Erstellen Sie eine feste Seitenleiste und ein unteres Navigationsmenü mit CSS Flexbox

Erstellen Sie eine feste Seitenleiste und ein unteres Navigationsmenü mit CSS Flexbox

CSS Flexbox Tutorial – So erstellen Sie eine feste seitliche und untere Navigationsleiste

Flexbox kann Ihnen dabei helfen, den Prozess der Erstellung grundlegender und erweiterter Layouts zu vereinfachen. Und es ist ziemlich einfach, seitliche und untere Navigationsmenüs mit CSS zu erstellen |_+_| oder |_+_|.

Diese Layouts sind so beliebt, dass sie fast überall im Web auftauchen. Sehen Sie sich zum Beispiel die Seitenleiste von Twitter an, die diesen Artikel inspiriert hat:

Um ein festes Menü mit CSS zu erstellen, müssten Sie normalerweise |_+_| . verwenden Eigenschaft mit einem Wert von entweder |_+_| oder |_+_|.

Das Problem bei diesem Ansatz besteht darin, dass das gesamte Element aus dem Dokumentenfluss herausgenommen wird, als wäre es nie da gewesen. Dies ist einer dieser frustrierenden Momente in CSS für Anfänger und manchmal sogar Experten.

In diesem Tutorial erfahren Sie, wie Sie mit CSS eine feste Seitenleiste und ein festes unteres Navigationsmenü erstellen |_+_| stattdessen. Ich hoste den gesamten Code und die Demos auf Codepen, damit Sie eine Live-Vorschau von dem sehen können, was wir erstellen werden.

Einstieg

Um mit Flexbox ein festes Element zu erstellen, müssen Sie zuerst das Scrollen auf dem übergeordneten Element des Elements deaktivieren, das Sie reparieren möchten. In unserem Fall ist das Elternelement das |_+_|:

Beispiel für einen pytorch-Lernratenplaner
flexbox

Das Aufschlag

Wir verwenden HTML, um ein zweispaltiges Layout zu erstellen, das in ein |_+_| . eingeschlossen ist genannt |_+_|.

2 Werte Javascript zurückgeben
Grid

Das CSS

Um die Seitenleiste zu reparieren, müssen wir nur das Scrollen auf dem übergeordneten |_+_| . deaktivieren und mache die |_+_| Element scrollbar.

position

Lassen Sie uns diesen Code ein wenig aufschlüsseln.

Zuerst machten wir die |_+_| nicht scrollbar und versteckte die Scrollbars mit diesem Code:

fixed

Dann haben wir mit |_+_| die Bildlaufleisten wieder zum |_+_| . hinzugefügt Element.

Und schließlich haben wir einen Flex-Container erstellt |_+_| und gab ihm mit |_+_| eine Höhe gleich dem Elternteil:

sticky

So machen Sie es mobilfreundlich

Aber auf einem mobilen Bildschirm mit einer Breite von weniger als |_+_| wir möchten, dass die Seitenleiste je nach Fall unten oder oben befestigt ist. Dazu fügen Sie das folgende CSS hinzu:

flexbox

Hier auf einem mobilen Bildschirm ändern wir die Richtung unseres Flex-Wrappers in Spalte statt in Zeile. Um es dann unten zu fixieren, fügen wir Folgendes hinzu:

body

Um es oben zu fixieren, musst du hingegen nur das |_+_| . entfernen und ändere es in |_+_| so:

body { overflow: hidden; height: 100vh; }

Unten sehen Sie eine Live-Vorschau in dem mit Codepen erstellten Stift. Sie können die Größe des Fensters ändern, um das feste untere Nav zu sehen

Wie lange dauert es, bis die Cash-App-Karte mit der Post kommt?

Abschluss

In diesem Tutorial haben Sie gelernt, wie Sie mit |_+_| eine responsive feste Seitenleiste erstellen. Hier sind einige wichtige Schritte, die Sie sich merken sollten:

  1. Um ein Element mit Flexbox zu fixieren, müssen Sie das Scrollen auf dem übergeordneten Element mit |_+_| . deaktivieren
  2. Dann müssen Sie einen Flex-Container erstellen, dessen Höhe der des übergeordneten Elements entspricht
  3. |_+_| . hinzufügen zu dem Element, das Sie nicht reparieren möchten

Und das ist es!

Wenn Sie dieses Tutorial nützlich fanden oder Fragen haben, können Sie sich gerne mit mir auf Twitter verbinden (vergessen Sie nicht, den Folgen-Button zu drücken) @sprucekhalifa .

Oh und viel Spaß beim Codieren!

Originalartikel bei https://www.freecodecamp.org

#css #webdev