Johann Johann - 6 months ago 57
Linux Question

Fade in and fade out overlay by toggling a hamburger menu

So there's a website I'm working on which uses a hamburger menu. Once is clicked, this hamburger menu shows a a fullscreen overlay with menu options.

I would like this overlay to fade in when the hamburger menu is clicked and fade out once it's clicked again.

At the moment I have being able to make the overlay to fade in by adding an active class to the overlay menu and by adding the following CSS:

.overlay {

visibility: hidden;
opacity: 0;
-webkit-transition: opacity 1s, visibility 1s;
transition: opacity 1s, visibility 1s;

}

.overlay.open {

visibility: visible;
opacity: 1;
z-index: 50;

}


However, I have no clue how I could make the overlay to fade out when the toggle is clicked once again.

Here's the development site if you guys want to check a working example:

http://dev.alvaroching.com/

Thanks!

Answer

The z-index property isn't animatable, and is therefore required on both the open and unopened nav overlay for other animations to be seen. (It's comparable to setting an element to display: none and wondering why animations aren't visible.)

Moving the z-index from the .overlay.open class to the main .overlay class solves this issue.

Comments