Collapsible Sidebar Menu | + Source Code | Dropdown Transitions | Bottom Navigation Bar on Mobile Devices | HTML, CSS, JavaScript Project
👉 Get our HTML & CSS Course on Udemy: https://www.udemy.com/course/learn-html-and-css-in-7-days-web-developer-bootcamp/?referralCode=8054BF2C4D86FC75DB00
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.
🫡 Source Code on our Website: https://coding2go.com
👉 Download the Icons: https://fonts.google.com/icons
👉 Find Logo Icons on https://simpleicons.org
😎 Become a Member to Support our Channel: https://www.youtube.com/channel/UCGpoeEhUBQBaaKZ_a8HB67Q/join
👉 Get our HTML & CSS Course on Udemy: https://www.udemy.com/course/learn-html-and-css-in-7-days-web-developer-bootcamp/?referralCode=8054BF2C4D86FC75DB00
Host Your Own Website With Hostinger:
🚀 https://www.hostinger.com/coding2go
✌️ 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
source
