Design comparison
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 helpful1@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 it0Account 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 background1
Please log in to post a comment
Log in with GitHubJoin 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