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

Dropdown navigation with HTML5, CSS3 & Javascript

Erick 270

@d3bu6m3

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


I used two different approach to achieve the dropdown on the navigation bar, On Desktop I used CSS:hover effect while on mobile I used Javascript Click event.

Feedbacks are welcome and appreciated, Thank you!

Community feedback

enochlee 600

@iamenochlee

Posted

Hey there, congratulations on your solution, its actually an onclick even for desktop also, you should also make sure when outside of the dropdown is clicked it closes, you might also want to align the dropdown icon and the text properly, also from 500px to 750px, your layout breaks, the image expecially, you can use a media query to fix this, i'd advice you start making use of clamp for fontsizes, it makes for responsive text.

0
Hyron 5,870

@hyrongennike

Posted

HI @d3bu6m3

Hope you are well an congrats on finishing the challenge just something you might want to look into it's quite difficult to hover over the dropdown items once you hover on the main menu item and move then the dropdown goes away.

0

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