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

Menu toggle with JS

Dusanβ€’ 700

@DEmanderbag

Desktop design screenshot for the Insure landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


After completing my last project that had a mistake with the menu, I've decided to take another approach when creating the mobile menu.

This time a menu is not an image but HTML code that is changed with JS, let me know what you think, I'm still not sure if this is a good approach but I'm looking for your feedback.

Community feedback

P
ApplePieGiraffeβ€’ 30,565

@ApplePieGiraffe

Posted

Hi, DuΕ‘an! πŸ‘‹

Nice to see you complete another challenge! πŸ˜€ Well done on this one! πŸ‘ Your solution looks pretty good and is responsive! πŸ™Œ

A few things I suggest are,

  • Only disabling vertical scrolling when the mobile navigation is clicked in the mobile layout (currently, vertical scrolling is also disabled when any of the navigation links are clicked in the desktop layout).
  • The hover state of the navigation links of the mobile navigation makes them difficult to see against the dark background of the mobile navigation. I suggest changing them in the mobile-friendly layout to make them easier to see.

Also, I think it's totally fine to build your hamburger menu entirely out of HTML and CSS (and some JS, of course). I actually prefer it since it gives you more flexibility when it comes to making animations and stuff. Just remember to add the correct labels to the menu to make it accessible! πŸ˜‰

Keep coding (and happy coding, too)! 😁

1

Dusanβ€’ 700

@DEmanderbag

Posted

Hi @ApplePieGiraffe πŸ‘‹

Regarding the first message you are absolutely right, I've totally overlooked that fact and this was fixed now.

For the second suggestion, I've used @media (hover: hover) and I didn't expect that someone would use mobile view on a desktop and that issue went unnoticed, this has also been resolved.

Thank you for the suggestion (sorry for the delay with reply :D)

1
P
ApplePieGiraffeβ€’ 30,565

@ApplePieGiraffe

Posted

@DEmanderbag

Haha, no problem! πŸ˜€ I just took another look at the updated site, and the changes look great! Good work! πŸ‘

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