Skip to main content

Collapse / Expand Sidebar Menu Using JavaScript, HTML, & CSS - #93


Published: July 25, 2022 | DevDrawer


Estimated Reading Time
1 minutes
Video Duration
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