Collapse / Expand Sidebar Menu Using JavaScript, HTML, & CSS

Pubblicato il: 01 gennaio 1970
sul canale di: Dev Drawer

17,777

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/colla...

⭐ 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:
   / @devdrawer

⭐ Become a Patreon to show support and get exclusive access to content:   / devdrawer

`````````````````````````````````````````````````````````````````````````````````````````````````````````````````````
Subscribe: https://bit.ly/2Wbsnj9
`````````````````````````````````````````````````````````````````````````````````````````````````````````````````````

Join us on our blog for video recaps and other tutorials: https://thedevdrawer.com
Become a fan on Twitter:   / thedevdrawer

View Project on GitHub: https://github.com/thedevdrawer

In questa pagina del sito puoi guardare il video online Collapse / Expand Sidebar Menu Using JavaScript, HTML, & CSS della durata di ore minuti seconda in buona qualità , che l'utente ha caricato Dev Drawer 01 gennaio 1970, condividi il link con amici e conoscenti, su youtube questo video è già stato visto 17,777 volte e gli è piaciuto 76 spettatori. Buona visione!

994