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.
👉 Hol dir das beste Web hosting bei Hostinger: www.hostinger.com/kurzundknapp
✌️ 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:
👌 Lerne HTML5 an einem Nachmittag mit unserem englischen Anfänger Kurs: www.udemy.com/course/coding2g...
SOURCE CODE für die Navigation gibt's auf unserer Webseite:
👉 www.coding-kurzundknapp.com
Menu Icon und Close Icon herunterladen:
👉 fonts.google.com/icons
#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"
Music provided by Slip.stream
Free Download/Stream: get.slip.stream/QmMj1I
Track: "One More Night"
Música fornecida por Slip.stream
Download grátis/Stream: get.slip.stream/8j1Eo5
Track: "Tropical Nights", Nico Sainato Tracks
Music provided by Slip.stream
Free Download/Stream: get.slip.stream/Hk8DVL
Listen on Spotify: go-stream.link/sp-nico-sainat...
Track: "South Africa", Nico Sainato Tracks
Music provided by Slip.stream
Free Download/Stream: get.slip.stream/WFuB3L
Listen on Spotify: go-stream.link/sp-nico-sainat...
Lass gerne ein Abo da, wenn du das liest👍