Create a RESPONSIVE NAVBAR with sidebar animation (CSS ONLY)
👉 Get the best web hosting to deploy your website: https://www.hostinger.com/coding2go
✌️ Use our discount code CODING2GO to get 10% off on all web hosting packages with a duration of 12 months or more
BEGINNERS START HERE:
👌 Learn HTML5 in one afternoon with our beginner course: https://www.udemy.com/course/coding2g...
In this video we are going to create a responsive navbar that has an animated sidebar. I am going to explain everything you need to create a responsive navigation bar with a hamburger menu and a sidebar that has a slide in and slide out animation transition. We are going to use HTML, CSS (Flexbox). This is a CSS only solution that does not require any JavaScript (no js). You will learn basic how to use CSS Flexbox to align your navbar horizontally and vertically (as a sidebar).
Source code for the navbar on our website:
👉 https://www.coding2go.com
Menu Icon and Close icon:
👉 https://fonts.google.com/icons
#responsive #navbar #javascript #webdevelopment
CONCEPTS YOU WILL LEARN:
✔ HTML, CSS only
✔ Responsive Web design
✔ Flexbox Layouts
✔ Media Queries
✔ Google Icons (Hamburger Menu, Close Button)
ABOUT THE NAVBAR:
The basic Navbar is created in HTML and CSS
To make it behave differently depending on the size of the device that the website is being displayed on, we have to make it responsive. In the mobile view most of the links are hidden and accessable by clicking on a menu button (hamburger menu icon). It will expand a sidebar that uses CSS Flexbox to align the navigation links vertically. The sidebar has a slide in and slide out transition. To open and close the sidebar, we use google icons menu and close X. Using simple HTML and CSS Code we can realize this project without javascript using a simple checkbox and its pseudo-class :checked to check if the sidebar should open or not.
LICENSE FOR BACKGROUND MUSIC
Track: "Little Things"
Music provided by https://Slip.stream
Free Download/Stream: https://get.slip.stream/QmMj1I
Track: "One More Night"
Música fornecida por https://Slip.stream
Download grátis/Stream: https://get.slip.stream/8j1Eo5
Track: "Tropical Nights", Nico Sainato Tracks
Music provided by https://Slip.stream
Free Download/Stream: https://get.slip.stream/Hk8DVL
Listen on Spotify: https://go-stream.link/sp-nico-sainat...
Track: "South Africa", Nico Sainato Tracks
Music provided by https://Slip.stream
Free Download/Stream: https://get.slip.stream/WFuB3L
Listen on Spotify: https://go-stream.link/sp-nico-sainat...
like and subscribe if you read this 👍
Watch video Create a RESPONSIVE NAVBAR with sidebar animation (CSS ONLY) online without registration, duration hours minute second in high quality. This video was added by user Coding2GO 22 February 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 76,022 once and liked it 2.2 thousand people.