Responsive Navigation mit Slide-in Animation | CSS Navbar Tutorial Deutsch

In diesem Video werden wir eine responsive Navigationsleiste mit einer animierten Sidebar erstellen. Ich erkläre dir alles, was du brauchst, um eine responsive Navigationsleiste mit einem Hamburger-Menü und einer Sidebar zu erstellen, die einen animierten Übergang zum Ein- und Ausblenden hat. Wir werden HTML und CSS (Flexbox) verwenden. Dies ist eine reine CSS-Lösung, die kein JavaScript (no js) erfordert. Du wirst lernen, wie du CSS Flexbox verwendest, um deine Navigationsleiste horizontal und vertikal (als Seitenleiste) auszurichten.

✌️ Spare 10% (und mehr) mit unserem Rabattcode: KURZUNDKNAPP

☝️ Das ist ein Affiliate-Link. Durch einen Kauf erhalten wir eine Provision. Es entstehen dabei keine Zusatzkosten für dich. Im Gegenteil: Du kannst bis zu 85% sparen, je nach Angebot.

ANFÄNGER AUFGEPASST:

SOURCE CODE für die Navigation gibt's auf unserer Webseite:

Menu Icon und Close Icon herunterladen:

#responsive #navbar #javascript #webdevelopment

KONZEPTE, DIE DU LERNEN WIRST:
✔ HTML, CSS only
✔ Responsive Web design
✔ Flexbox Layouts
✔ Media Queries
✔ Google Icons (Hamburger Menu, Close Button)
✔ HTML CSS Navbar
✔ CSS Animationen / Transition

ÜBER DIE NAVIGATIONSLEISTE

Die einfache Navigationsleiste wird in HTML und CSS erstellt. Damit sie sich je nach Größe des Geräts, auf dem die Website angezeigt wird, unterschiedlich verhält, müssen wir sie responsiv gestalten. In der mobilen Ansicht sind die meisten Links ausgeblendet und können durch Klicken auf eine Menüschaltfläche (Hamburger-Menü-Symbol) aufgerufen werden. Es wird eine Seitenleiste eingeblendet, die CSS Flexbox verwendet, um die Navigationslinks vertikal auszurichten. Die Seitenleiste verfügt über einen Ein- und Ausblendvorgang. Um die Seitenleiste zu öffnen und zu schließen, verwenden wir die Google Icons menu und close X. Mit einfachem HTML- und CSS-Code können wir dieses Projekt ohne Javascript realisieren, indem wir eine einfache Checkbox und ihre Pseudo-Klasse :checked verwenden, um zu prüfen, ob die Seitenleiste geöffnet werden soll oder nicht.

LICENSE FOR BACKGROUND MUSIC

Track: "Little Things"

Track: "One More Night"

Track: "Tropical Nights", Nico Sainato Tracks

Track: "South Africa", Nico Sainato Tracks

Lass gerne ein Abo da, wenn du das liest👍

[belalnoori]

Coole Tutorial und sehr lehrreiche Informationen.

[mikado]

Sehr gut erklärt ;), kann man die Navigationsleiste auch mit eigenen Images ansteuern oder braucht man die svgs?