JQuery mobile pageslide, new facebook menu

Question

Here my story:

I want something like the new facebook menu on the left side of the screen. It's really nice and I hope to add this to my webapp, but the problem is, I am really not good in css and even worse in css3.

After few hours searching I found out this link:

https://github.com/perezd/jquery-pageslide

It is exactly what i want, it's perfect. But it doesn't work (not yet) for mobile. When the link is pressed, it opens a whole new page, instead of the div sliding into the view.

Any ideas how to get this working?

Solution 1

I also wanted to implement this new FaceBook style menu and this is what I came up with. Hope it helps. I am sure this could be done better but this was my attempt.

Solution 2

This topic is old but here is a working solution for mobile devices :

it's working on Windows phone, iOs and Android Devices.

I've tried to keep the code as simple as possible, it's easy to understand and modifiy.

http://apptitudes.github.com/SlidingMenuJS/

Check the file menu_nav.js it's less than 100 lines.

Solution 3

Not fully working but should point you in the right direction:

• http://jsfiddle.net/LwrqY/5/
• http://jsfiddle.net/LwrqY/5/embedded/result/ (for mobile testing)

The slide pages don't load the text but the slide transition works, Also you might have to tweak the close transition as well.

Hope this help