Hello, can anyone point me to a resource that explains and demos a mobile hamburger menu slide out with the website background dimming to black simultaneously? Thanks.
Hi,
This old demo of mine has a slide out menu and dims the background when at a mobile size.
It’s only meant as a basic template and not a full solution or instructional.
Generally apart from the css involved all you need to is trap the click action on the hamburger menu with JS and then add a class or 2 somewhere (the body element is good for this). When the class is applied to the body you can slide the menu out with css and then create a fixed overlay that covers the body content (use body:after and create a fixed element that covers the whole viewport with opacity as required).
Set the z-index of the sidenav greater than the overlay and the nav sits on top and then the overlay covers the rest of the content.
I just googled quickly and there seems to be a tutorial that does what you want here and may be easier for you to follow.
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.