Make a WebApp Slider Menu in 2 mins - All JS frameworks

kay so the title is a little click-baity, but the ease of this blew my mind and I wanted to ring the bells for my fellow devs.

So you're not stuck downloading a full library just to implement it, when all you need is a dozen lines of css for blazing fast perf and compatibility.

There's 3 overall steps which are required , all very simple, to do this. You can use any JavaScript framework or vanilla JS if you would like. Its all in pure CSS.

1.Create a div for your overall page content. In this example lets give it an id of #page, and make sure to assign it a width of 100vw in your .css style. So it will update its width to match the device.

2.Create a button with an onclick handler which sets a variable called "IsMenuVisible" to true , upon click

3.Create a div with id #flyoutMenu, inside the #page div (from step1) anywhere. Add a class of "show" to this div , when "IsMenuVisible" is true , and add a class of "hide" when "IsMenuVisible" is false.

Let the CSS below do the rest of the magic :)
==================
#flyoutMenu {
width: 100vw;
height: 100vh;
background-color: #FFE600;
position: fixed;
top: 0;
left: 0;
transition: transform .3s
cubic-bezier(0, .52, 0, 1);
overflow: scroll;
z-index: 1000;
}

#flyoutMenu.hide {
transform: translate3d(-100vw, 0, 0);
}

#flyoutMenu.show {
transform: translate3d(0vw, 0, 0);
overflow: hidden;
}
==================

If you enjoyed my post I'd really appreciate it if you could check out my new webapp WannaGo. Its meant for developers and designers to come together on a cross-skill platform with built in scheduling and instant WebRTC based peer-to-peer text, audio and video chat in the browser.

WannaGo
==================
Collaboration app for devs, designers and people who just wanna study or watch movies together :p

https://www.iwannagoapp.com/
https://twitter.com/iWannaGoApp

Original reference CSS from:
https://www.kirupa.com/react/smooth_sliding_menu_react_motion.htm