Learn how to create a responsive side navigation menu using HTML and CSS. This tutorial is perfect for beginners and will show you how to create a simple yet effective sidebar menu that will make your website or application more user-friendly.
In today's video, I have created a Side Navigation Bar in HTML CSS, and JavaScript.
I hope you will like this Dashboard Sidebar Menu Design…
______________________________________________________________
⏱️Chapters:
00:00 Intro
00:37 Creating our Boilerplate
02:05 HTML - Creating Main Div and Menu list using EMMET
04:01 HTML - Nav_Expand Element (Icon)
04:34 CSS - Importing Fonts from Google Fonts
05:10 CSS - CSS Reset (Same Page Across Different Browsers)
05:34 CSS - Styling the Body Tag
06:08 CSS - Styling the Main Div Nav
06:46 CSS - Applying Some Style to the Expandable Icons
08:49 CSS - Still on our Button Increase its Size and Apply Hover Effect
09:33 CSS - Creating our NavList from our LIs
11:49 CSS - Set Some CSS Rules to A tags
13:08 CSS - Creating Active State for the Menus
14:33 CSS - Creating the Closed State Class
15:17 JS - Getting Reference to the DOM Elements
16:19 JS - Add EventListener to the Icon
