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

News homepage (SASS)

tyVespA 280

@tyVespA

Desktop design screenshot for the News homepage coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


In the mobile view, when the side menu opens, the background becomes darker.

I obtained this effect with a ::after element that gets applied to the body when the menu button is pressed (and gave the side menu and the button a higher z-index). Is this the correct way of achieving the desired affect?

Also if i wanted to add a transition (ex. make the darker background fade in and fade out), how would i do that? Do i need another class and attach it to the ::after element or i can do it all throuh js or is there other ways? I tried but could not figure it out

Any other feedback is appreciated, thanks!

Community feedback

Account Deleted

Hi, the menu is nice; instead of change the image of the button, add two, one in the nav bar and another inside the menu, also add position: fixed to avoid it disappear when scrolling.

You can achieve a vanish effect adding a transition to the opacity property of the element and change it with javascript in every click. If you have more question let me know.

Marked as helpful

1

tyVespA 280

@tyVespA

Posted

@FakeAstronauta Hi thank you for looking at my code! I don't think i'm changing the image, there are already two buttons in the nav.

I never thought about the scrolling when the menu is opened so thank you for making me notice! I fixed it by disabling scrolling when the menu is opened

I tried what you said about the opacity but is it possible to target a ::after element trough javascript? I wasn't able to do it

0

Account Deleted

@tyVespA As I know all the pseudo elements like ::after are not reachable, so you have to use an absolute div to darken the background

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