👉 Get the best web hosting to deploy your websites: [ Ссылка ]
✌️ 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: [ Ссылка ]

Source code on our website 👉 [ Ссылка ]

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: [ Ссылка ]
google 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: [ Ссылка ]
CSS Tutorial: [ Ссылка ]
FLEXBOX Tutorial: [ Ссылка ]
GLASS Effect: [ Ссылка ]

like and subscribe if you read this 👍

свернуть