How to use CSS3 to hide and show instead of Javascript for navigation drawer?

Currently my website is using toggleClass to hide and show my menu. I look at the performance and it's kinda bad. When I try this on my mobile phone I feel it's really sluggish.

And I have found this tutorial which talks about doing off-canvas navigation using CSS transition and the performance it's great which everything is in 60 fps.

I'd like to achieve something like this in CSS but not using off-canvas navigation.

Here's my prototype

Once the menu is clicked you see a navigation popup. Simple as that. No animation. But I want the menu to cover the whole page and user can't scroll. So it's just gonna appear to cover the whole page.