Skip to content
Submitted almost 2 years ago

News homepage (SASS)

tyVespA•280
@tyVespA
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...News homepage
  • HTML
  • CSS
  • JS
2junior

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
    @tyVespAPosted almost 2 years ago

    @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

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