Collapse / Expand Sidebar Menu Using JavaScript, HTML, & CSS - #93
1 minutes
1:29:04 minutes
Learn how to collapse / expand a sidebar menu using JavaScript, HTML, & CSS only. In this tutorial, we will build a fully responsive sidebar menu that can be expanded and collapsed using a button. This is commonly seen on modern administration dashboards.
Using CSS and JS we make our sidebar menu look tremendous and functional with a search bar/popup. I also tested and coded for responsive media queries so not only does it work on desktops, but also on mobile phones so your sidebar panel can look great for your entire project. Keep in mind this is a look-only tutorial but you can use it as the basis for your entire project's navigation.
00:00 Intro
01:04 Setting up the website
02:45 Creating our SASS
15:06 Adding & Styling Our Sidebar Navigation
22:40 Adding a Search Bar
29:24 Adding an Account Section
37:44 Adding JavaScript
39:44 Sidebar Short Styling
43:28 Keep Sidebar Width in Local Storage
51:16 Create Short Sidebar Hover States
58:22 Create Search Popover
01:10:04 Create Mobile Styling
Download tutorial files here: https://github.com/thedevdrawer/collapse-expand-sidebar
⭐ If you would like to buy me a coffee because I created something that helped you, it would be much appreciated! : https://www.buymeacoffee.com/devdrawer
⭐ Join this channel to get access to perks:
https://www.youtube.com/channel/UCcr8eSk5xCfn3AbYy8WOWzg/join
⭐ Become a Patreon to show support and get exclusive access to content: https://www.patreon.com/devdrawer
Like what you see, support the channel.
Get Merch Buy Me A Coffee Join Patreon Watch on YouTube View Projects on GitHub