Build a Responsive Sidebar Menu with Animated Dropdowns | HTML CSS JavaScript Project

Collapsible Sidebar Menu | + Source Code | Dropdown Transitions | Bottom Navigation Bar on Mobile Devices | HTML, CSS, JavaScript Project

In this video you will learn how to use modern css and javascript concepts by building an html, css and javascript project. The js project is a responsive and collapsible sidebar navigation menu that has dropdown menus that can transition to height auto using a css pro tip that requires a css grid layout. On Smartphone screens the sidebar navigation will turn into a bottom navigation bar so that mobile users have the navbar at the bottom of their screen just like any common app design. In the bottom navbar the dropdowns will drop-up using fixed positioning and a media query.

Host Your Own Website With Hostinger:
✌️ And get a huge discount with our code: CODING2GO

Concepts you will learn in this web dev project:
✔ HTML, CSS, JavaScript
✔ Sidebar Menu HTML, CSS, JS
✔ Sidebar Navbar Grid Layout
✔ Smooth Transitions to height auto
✔ Sidebar with Dropdown Menu
✔ How to animate dropdown menus in css
✔ How to add transition to dropdown menu in css
✔ How to animate to height auto in css
✔ How to collapse a sidebar with css and javascript
✔ Toggle Sidebar Menu
✔ How to close sidebar menu with javascript
✔ How to create a bottom navigation bar with html and css
✔ Modern Icons Sidebar Design HTML, CSS
✔ Dark Mode Sidebar Design HTMl, CSS, JavaScript
✔ Sidebar Dashboard Design HTML, CSS
✔ Admin Dashboard Layout HTML CSS
✔ Dashboard Grid Layout HTML CSS

[azzido]

I used it at my job (not related to web dev) and got a salary raise!

I bought your course on Udemy.

Thanks so much!

[DanielUdechukwu]

This grid method of handling drop down will help my development a lot. So much easier.

Thanks Fabian!

[lanzpppp]

My new favorite channel when it comes to web development :)

[p_o_z_e]

I've been a frontend dev for around 3.5years and am always looking for good channels too learn new things or get familiar with stuff i've not done in a long time and i gotta say this channel is amazing!

[sharpshooter--]

the way you explain things is just what kept me until the end, this channel is gonna blow up and reach millions pretty fast

[omardaanoun]

favorite coding channel
thank you, Fabian,
i really need a page reveal animation tuto pls

[God_Overall]

This is the best teaching style on YouTube. More of this please.

[leonardigweokolo]

I don't know if it was the JS but this tutorial was too advanced for me to understand. Great work your doing mate!!!

[radeveloper]

Before watching this informative video, I would say that you have a great 👍 😃 experience Fabian Sir ...
Love from Pakistan...

[champx]

I love that you made this video. I have been trying to make one myself for almost a year but in vain. Thanks a lot!

[Modernty]

every thing go right before i get to the js. i can not see any kind of dropdown, but i really love you videos

[masahamed]

Following Angela Yu for web design but your class seems much of real time 🔥

[OZTutoh]

Great tutorial. It's awesome have an animated responsive website working on my phone. I tuned the media width from 800 to 700 so the desktop layout would appear on my phone in landscape.
The active hi-lights do not work on the Create and Todo-Lists sub-menu icons and headings, only on their sub-menus themselves, but I bet you knew that. It looks amazing all the same!

[mustasinbillah-ud]

my favorite coding channel
thank you Fabian

[waleedbinshabbir]

in the drop down menu, you could also use calc-size(auto) in height to make it transition automatically.

edit: it's a experimental feature for now. so it was awesome seeing a solution.

[gilbertsenyonjo]

Woww. This is great content. Thank you very much!

[Silverdagger]

Great video - only a very minor observation Since there is only 1 nav bar, I would simply use "nav" as the css selector and not a class

[allethu]

I didn't read all the comments, but a lil opti' would be to reuse the toggleSidebar function inside the if statement when toggleSubMenu is called, nothing that crazy but it was on my mind ^^, luv tha vid!

[mustafaabobaker]

Wow, Fantastic this video, Excellent explanation that solves all the problems we encounter.

[learnpropath]

Best of the Best Coolest Pro Tip @10:55, thank you for sharing, God Bless.