DEV Community

Cover image for Make a WebApp Slider Menu in 2 mins - All JS frameworks
Ahmad
Ahmad

Posted on • Edited on

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

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; }
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)