Add a slide-in menu on the right side
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I'm working on the basics of a new mobile template and have a slide-in menu in the left side using flexbox. I would like to have the same kind of menu on the right side (so it opens a right-side menu) using the same technology. The code I used was just copy-paste, so I dont know how to make the right side menu.
If you can just make it work for the index.php thats fine. The look of the right-side menu needs to be the same as the left side menu.

You can see the functionality here:
And download the project here:

If done today I'll ad a extra tip of 10$.

If you can provide me the location from where you copy pasted the original functionality, it would greatly help me with identifying the components of your page that provide this functionality. I've identified much of it, but I think with the original information I would be able to do better than a shitty hackjob.
AlexaDeWit over 5 years ago
its this one: Maybe you can see if I can leave out HammerJS? Dont need it
CPHREC over 5 years ago
From what I can discern at the moment, all your events that trigger this menu are hammer events, and you would need to find alternatives that a mobile friendly if you were to drop the hammer inclusion. Status update as to what I understand: You need a second wrapper for the flexbox framework to use on the right hand side. Since the whole thing is based on IDs, not classes, much of it will basically just need to be copy pasted(again) but with its position and sizing information changed to be appropriate to right hand side stuff. At the moment it uses position:absolute, which isn't exactly compatible for differing resolutions on right-hand screens.
AlexaDeWit over 5 years ago
I did try to get it to work by changing some classes and copypasting some css. But it didnt work. You're not able to do it? Just leave the HammerJS. If was just if it could be excluded I wanted it to be removed.
CPHREC over 5 years ago
awarded to timb

Crowdsource coding tasks.

3 Solutions

May be you can use simple JQuery and Javascript code to do that, I have made a demo here :

I will try to integrate it on your webpage for next thurday, I don't have time before that.

I'll try to see if I can get this flexbox solution to work first, as its the most fluid slide-in I've seen (also in old phones)
CPHREC over 5 years ago

change these css:

#swipe.isOpen {
-webkit-transform: translate3d(-260px, 0, 0);
transform: translate3d(-260px, 0, 0);
-ms-transform: translate3d(-260px, 0, 0);
-moz-transform: translate3d(-260px, 0, 0);
-o-transform: translate3d(-260px, 0, 0);

#sidebar {
position: absolute;
width: 260px;
max-height: 100%;
background: #34495e;
color: #fff;
right: 0;

.header #menubtn, #menubtn-black, #backbtn {
width: 40px;
float: right;

#swipeme {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 40px;
height: 100%;

Change from what to what? Cant I get you to put it into the files I uploaded? Its fine everything is included in just the index.php file
CPHREC over 5 years ago
folder css/style.less the less file is the source code and must be compiled into .css file: Save the css as style.css in css folder and edit includes.php like this:
Stefano Balzarotti over 5 years ago
Winning solution


this only uses the 'click' events on the menu buttons.

source (only changed files)

View Timeline