Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

intro-section-with-dropdown-navigation

Opeoluwa 330

@Opeoluwa-Ogunlaja

Desktop design screenshot for the Intro section with dropdown navigation coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


The image was a pain. The rest were okay though. Please feedback/corrections would be very much appreciated 😁😁

Community feedback

Ahmed El_Bald 1,020

@Ahmed-Elbald

Posted

Hey Opeoluwa,

I generally like your solution but I think it could be better with some touches:

  • All the transitions in the page happens all at a sudden. So it would be better if you added some transition-duration to those elements to make the page a little bit smoother .
  • If the dropdown is opened, you can add an option that the dropdown menu closes automatically when the user click outside it. (that's implemented in my solution)
  • In small screens, when the nav gets opened, the body's background-color gets changed while it could be better if you added an overlay that has the a height: 100vh; width: 0; and when the user opens the nav, this overlay's width gets changed to 100%. By doing that, This process will happen smoothly. If you don't know what I mean.. (that's also implemented in my solution).
  • You also have some issues with accessibility. I don't mind helping you solve them

I hope you find my feedback beneficial. Thank You

Marked as helpful

1

Opeoluwa 330

@Opeoluwa-Ogunlaja

Posted

@Ahmed-Elbald Thank you very very much. I'll try and implement them 🙂. Thank you.

0
Opeoluwa 330

@Opeoluwa-Ogunlaja

Posted

@Ahmed-Elbald I can use the same method for my sidenav for the dropdowns right?

0
Ahmed El_Bald 1,020

@Ahmed-Elbald

Posted

@Opeoluwa-Ogunlaja Sorry what method do you mean ?

0
Opeoluwa 330

@Opeoluwa-Ogunlaja

Posted

@Ahmed-Elbald Changing class names and using simple css transitions

0
Ahmed El_Bald 1,020

@Ahmed-Elbald

Posted

@Opeoluwa-Ogunlaja Yeah u can use it anywhere as long as the CSS property is animatable

1
Opeoluwa 330

@Opeoluwa-Ogunlaja

Posted

@Ahmed-Elbald Ok 😁👍. Thanks again!

0
Opeoluwa 330

@Opeoluwa-Ogunlaja

Posted

@Ahmed-Elbald Ok 😁👍. Thanks again!

0
Ahmed El_Bald 1,020

@Ahmed-Elbald

Posted

@Opeoluwa-Ogunlaja You are welcome

1

Please log in to post a comment

Log in with GitHub
Discord logo

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