Okay 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. This is the button which will trigger the side menu to open.

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.

4. 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