Submitted over 1 year ago

Intro Section with dropdown navigation in HTML/CSS/Javascript

Deborah Robbiano• 600

@debriks

Preview site View code

This is a solution for...

Intro section with dropdown navigation

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi Guys! Here’s my solution to this challenge. My JS is still very poor and even something as easy as a dropdown navigation is still hard for me. So I checked around on Frontend for a JS Code I could almost understand and I found the one of Adarsh (@adram3l3ch) that seemed to be quite efficient. I really want to learn new concepts in JS and I was very interested by the fact that he was using the ‘scrollHeight’ JS property to solve this challenge.

For the CSS part, it’s getting better I think :)

As usual, any feedback is more than welcome ✨

Community feedback

Lucas 👾• 104,580

@correlucas

Posted over 1 year ago

Nice solution Deborah! Perfect design and super responsive. I liked a lots how smooth is the interaction/transition with the dropdown menu.

I think the dropdown box shadow is a bit too hard (maybe its the exact file from the Figma file, I don't know). Something I like to do for this kind of shadows to have it smoother is to decrease the opacity, increase the blur and use a color tone near blue instead of black. Like this value: box-shadow: 0 0 5rem 0px rgb(24 50 67 / 16%);. This is only a small detail, you don't really need to change it 🤓

Keep it up =)

Marked as helpful

Deborah Robbiano• 600

@debriks

Posted over 1 year ago

@correlucas Hi Lucas! I will check it out once I’m back on the computer. I also don’t like when the box-shadow is too hard. Thank you! Have a nice day ✨

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord