Sidebar Menu using HTML CSS JS | Figma Design to Code | Expandable Side Navigation Bar Explained

Подписаться 46 тыс.

Просмотров 18 тыс.

50% 1

New to CSS Grid? Watch the full Crash Course here: • CSS Grid Crash Course ...
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: / @angeladesign737
Codepen: codepen.io/angeladelise/pen/V...
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: www.youtube.com/watch?v=D3ZF2...
--
Gear
Microphone - amzn.to/34bDTxH
Hard Drive - amzn.to/30m5E5M
--
Let's Connect
Dribbble: dribbble.com/angeladelise
Blog: / 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!

Наука

Опубликовано:

13 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 60

@HateAcceptedButThinkAgain 3 года назад

Hey, thanks for short and concise tutorials. I never felt like I'm wasting my time while watching these.

@angeladesign737 3 года назад

Glad you like them!

@NomadJoe 3 года назад

You do a great job of explaining the logic to how you create sophisticated concepts.

@angeladesign737 3 года назад

Thanks Joe!

@nantiyachomtee2998 3 года назад

I am so glad I found your channel, keep up the great work! Thanks for these tutorials🙏

@angeladesign737 3 года назад

Thank you so much! Happy they have been helpful

@vinaybabu2635 3 года назад

This channel will explode soon! Love your approach of project based learning

@angeladesign737 3 года назад

Thank you so much!

@ke6944 3 года назад

I'm glad you're incorporating more JavaScript in your tutorials.

@angeladesign737 3 года назад

Glad to hear that!

@mateuszb4387 3 года назад

codepen! Allellujah! I can see the future! I can see this channel to explode in numbers! Great content, great pacing and explenantions and your voice is very nice!

@luistavarez2883 3 года назад

Hehehe

@nguyenquocduong8978 2 года назад

Awesome Angela.

@lucasluizeDev 3 года назад

This is really great content @Angela Delise , I predict many subscribers, congrats!!!

@angeladesign737 3 года назад

Thank you!

@Anonymous-en2jv 3 года назад

i like how you explained things. keep it up!

@angeladesign737 3 года назад

Thanks!

@moalatakhtdar3725 Год назад

you are so good at teaching

@ShahnewazTameem 3 года назад

Stunning!😍

@angeladesign737 3 года назад

Thank you! 😊

@rizalramadan97 3 года назад

realy glad found this chanel, keep up.

@angeladesign737 3 года назад

Thank you!

@mininusequeci Год назад

Thanks!

@keil89able 3 года назад

Just discovered your channel yesterday, im loving it so far. Such a fresh way of teaching. Would love for you to show making other UI components such as as Carousell and a dialog modal, just a suggestion tho :D

@angeladesign737 3 года назад

Great suggestions, thank you so much!

@geryardmon7523 3 года назад

Fabulous !

@angeladesign737 3 года назад

Thanks Gery!

@95tbf 3 года назад

Awesome content!

@angeladesign737 3 года назад

Glad you enjoyed it!

@elllpoly 3 года назад

Good job. Thanks for sharing it with us.

@angeladesign737 3 года назад

Thank you! Happy it was helpful!

@johncooter6483 3 года назад

Thanks

@kalahari8295 3 года назад

Kinda miss the usual intro. It's like, your thing: in this video 😌 Oh and the videos are pretty much alike, always awesome 👍

@heinsenberg4839 3 года назад

great job , thank u :)

@angeladesign737 3 года назад

Glad it was helpful!

@summankumari7644 3 года назад

You have greate teaching skills

@angeladesign737 3 года назад

Thank you!

@dascouser1 2 года назад

Hey love ur content and videos. I'm looking to develop and up skill skills myself. Would like to see a tutorial on design to code of a UI dashboard ( HTMLl and CSS)

@FreLee54 2 года назад

Hi Angela! Very nice video you did a great job! I tried to do something similar but instead of tapping on an icon to open the sidebar you can just hover it Tried to start with your solution as a base but could not get the transitions to work. More exactly the transition-all property I gues thats because you are using the display-property and as I understand that wont trigger the transition. What is triggering the transition all in your example? Can it be the menu transition that triggers the second transition? I ended up using width and max-width. Max-width triggered the transition for me.

@MyGeorge1964 3 года назад

Hey Angela, here's something I'd like to see: a sidebar that comes like a tray underbeath the mainsheet. No squashing just a translateX of the main page. Cheers.

@angeladesign737 3 года назад

Thank you for the video suggestion!

@johnrobson550 2 года назад

Where can I get those SVG Icons??? Or maybe something just similar to those?

@goplay5936 Год назад

Could you please say how did you get the icons from figma?

@pyshorts315 3 года назад

Mam your teaching style is awesome. Thank you a lot by heart ❤️. Mam please make video on webpage design. And my question is: how to place content in our design to look awesome. My design is boring when i place my content. Please mam. Make on video on it. Please please and reply.

@angeladesign737 3 года назад

Great topic suggestion, thank you!

@Fanaro Год назад

But how do I add other content to the rest of the page? It seems like this layout is blocking the rest of the page.

@granolasoos 3 года назад

more JS, please :)

@angeladesign737 3 года назад

I have some more JavaScript tutorials coming up!

@syediqbalahmed3176 3 года назад

good ... ok ...

@truthteachers 3 года назад

Hi Angela, sounds a bit rushy. I had to slow down the video. Would be great if you could slow down and explain each of the element that you included. This will great for many of us.