How to create a Responsive Navigation Bar (for beginners)
👉 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/coding2g...
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: • Learn HTML in 15 Minutes
CSS Tutorial: • Learn CSS Basics in 10 Minutes (for b...
FLEXBOX Tutorial: • CSS Flexbox Tutorial for beginners
GLASS Effect: • Create a glass effect in CSS (Glassmo...
like and subscribe if you read this 👍
Watch video How to create a Responsive Navigation Bar (for beginners) online without registration, duration hours minute second in high quality. This video was added by user Coding2GO 04 June 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 417,489 once and liked it 11 thousand people.