Hello guys, Welcome to Africa's Largest Video Search Engine, and you are watching How to create a Responsive Navigation Bar (for beginners). and this video is uploaded by Coding2GO at 2023-06-04T04:05:14-07:00. We are just promoting this video only for entertainment and educational purpose only. I hop you like our Video Search Engine. [U8smiWQ8Seg]
| Name | How to create a Responsive Navigation Bar (for beginners) |
| Video Uploader | Video From Coding2GO |
| Upload Date | This Video Uploaded At 04-06-2023 11:05:14 |
| Video Discription | 👉 Get the best web hosting to deploy your websites: 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 👌 Check out our HTML & SEO course on udemy: https://www.udemy.com/course/coding2go-html5-crashcourse/?referralCode=F017D565D3D3BE47B8BC Source code on our website 👉 https://www.coding2go.com In this video we are going to create a responsive navbar together. I am going to explain everything you need to create a responsive navigation bar with a hamburger menu and a sidebar with a close button using HTML, CSS (Flexbox) and JavaScript. You will learn basic DOM-Manipulation with JavaScript and how to use CSS Flexbox to align your navbar horizontally and vertically (as a sidebar). #responsive #navbar #javascript #webdevelopment background image: https://unsplash.com/photos/m_HRfLhgABo google icons: https://fonts.google.com/icons CONCEPTS YOU WILL LEARN: ✔ HTML, CSS, JavaScript ✔ Responsive Webdesign ✔ 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 also a glassmorphism design to make it look like glass using the backdrop-filter property and the blur() method. To open and close the sidebar, we use google icons menu and close X. Using simple JavaScript DOM-Manipulation and the onclick Attribute of the Icons we can open and close the sidebar. RESOURCES for better understanding: HTML Tutorial: https://youtu.be/cv2hzyO3X48 CSS Tutorial: https://youtu.be/Dfj0B6aL7Hs FLEXBOX Tutorial: https://youtu.be/bbaKrRU4MVk GLASS Effect: https://youtu.be/n77yqF5fdBE like and subscribe if you read this 👍 [U8smiWQ8Seg] |
| Category | Education |
| Tags | responsive | navbar | navigation bar | html | css | javascript | hamburger menu | sidebar | glass effect | media queries | icons |
