Sidebar Menu using HTML CSS JS | Figma Design to Code | Expandable Side Navigation Bar Explained
1.8万 次观看 · 2020-10-26
UI 设计
New to CSS Grid? Watch the full Crash Course here: https://www.youtube.com/watch?v=yOPCQ5nD1Vs&t=214s
In this video I go over how to create this Sidebar Menu using only HTML CSS and Vanilla JavaScript. I show you the full front end coding tutorial, where I create the structure of the elements in HTML and then write all of the styling and effects with CSS. I use Vanilla JavaScript to add functionality to make the navigation bar expand and to add an active state to the selected link.
Enjoying this tutorial? Subscribe to stay up to date with my latest content: https://www.youtube.com/channel/UC_TjoSnaI3CTgIgmSn3rruA?sub_confirmation=1
Codepen: https://codepen.io/angeladelise/pen/VwaNeab
In this video I show you:
0:00 - Intro
0:35 - Starting Code
1:01 - Figma Design
2:11 - HTML Code
4:10 - CSS Code
10:49 - Vanilla JavaScript Code
Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: https://www.youtube.com/watch?v=D3ZF2...
--
Gear
Microphone - https://amzn.to/34bDTxH
Hard Drive - https://amzn.to/30m5E5M
--
Let's Connect
Dribbble: https://dribbble.com/angeladelise
Blog: https://medium.com/@angeladelise
--
DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week!
In this video I go over how to create this Sidebar Menu using only HTML CSS and Vanilla JavaScript. I show you the full front end coding tutorial, where I create the structure of the elements in HTML and then write all of the styling and effects with CSS. I use Vanilla JavaScript to add functionality to make the navigation bar expand and to add an active state to the selected link.
Enjoying this tutorial? Subscribe to stay up to date with my latest content: https://www.youtube.com/channel/UC_TjoSnaI3CTgIgmSn3rruA?sub_confirmation=1
Codepen: https://codepen.io/angeladelise/pen/VwaNeab
In this video I show you:
0:00 - Intro
0:35 - Starting Code
1:01 - Figma Design
2:11 - HTML Code
4:10 - CSS Code
10:49 - Vanilla JavaScript Code
Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: https://www.youtube.com/watch?v=D3ZF2...
--
Gear
Microphone - https://amzn.to/34bDTxH
Hard Drive - https://amzn.to/30m5E5M
--
Let's Connect
Dribbble: https://dribbble.com/angeladelise
Blog: https://medium.com/@angeladelise
--
DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week!