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: http://www.cphrecmedia.dk/musikdk/mobile/index.php
And download the project here: http://cl.ly/401o0c0v3m1S

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 5 years ago
its this one: http://codepen.io/oknoblich/pen/klnjw Maybe you can see if I can leave out HammerJS? Dont need it
CPHREC 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 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 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 :
http://jsfiddle.net/JQ3CY/3/

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 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 5 years ago
folder css/style.less
http://pastebin.com/sMpD7QpG the less file is the source code and must be compiled into .css file: http://pastebin.com/K2QgQqJJ Save the css as style.css in css folder and edit includes.php like this: http://pastebin.com/k7ukVLim
Stefano Balzarotti 5 years ago
Winning solution
Tipped

try http://198.199.72.134/tmp/menu/

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

source (only changed files) http://198.199.72.134/tmp/menu/menu.zip

View Timeline