Hello guys, Welcome to Africa's Largest Video Search Engine, and you are watching Create a RESPONSIVE NAVBAR with sidebar animation (CSS ONLY). and this video is uploaded by Coding2GO at 2024-02-22T01:45:00-08:00. We are just promoting this video only for entertainment and educational purpose only. I hop you like our Video Search Engine. [8eFeIFKAKHw]
| Name | Create a RESPONSIVE NAVBAR with sidebar animation (CSS ONLY) |
| Video Uploader | Video From Coding2GO |
| Upload Date | This Video Uploaded At 22-02-2024 09:45:00 |
| Video Discription | 👉 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/coding2go-html5-crashcourse/?referralCode=F017D565D3D3BE47B8BC 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-sainato-tracks 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-sainato-tracks like and subscribe if you read this 👍 [8eFeIFKAKHw] |
| Category | Education |
| Tags | navbar html css | responsive navbar | animated sidebar | sidebar slide in animation | navbar transition | slide in | html css tutorial | for beginners | hamburger menu | menu icon | x icon | close icon | css only | no javascript | without javascript | css only animation | animate display none | navigation bar | responsive web design | css responsive design tutorial | media queries css | native css | navbar css |
