Swipe side menu

Has anyone managed to create a side menu that is initially hidden and then swiped in as in the menu in the Facebook app?


you can use Multiview for swipe menu:
It can be Multiview with two cells: 1) list with menu options, 2) main view. You can show menu (list view) by tapping a list button in the navigation bar for example. And hide menu on swipe or on button tap. Here is how to set swipe event handler for some view:

$$("viewId").attachEvent("onSwipeX",function(prevState,curState){ if(prevState.x>curState.x){ // drag left } else{ // drag right } })

Thanks Alexandra, I’ll have a go and let you know how I get on.

This works ok but doesn’t give quite the look and feel that my customer requires - ie, they want the menu to slide in half way across the screen pushing the screen contents off to the right. Would the layout component be a better option?


they want the menu to slide in half way across the screen pushing the screen contents off to the right

Unfortunately, there is not such a ready solution (

Would the layout component be a better option?

Layout with hidden view won’t allow to use animation.

Thanks, it works fine but the lack of animation is disappointing - are there any plans to add this in the future?


“Swipe side” menu is very interesting feature. Therefore, we are going to add it.


Is this issue solved?

I need to use it on my app…

Until now, i did what you said to groobie but it is not enough for a confortable navigation…



I almost get it!!

In my opinion is that the onswipex is attached to the list and it should be attached to a layout to if possible…that should be great!!


To a layout cell i meant…


Layout does not provide Event support. However, you may to use the following approach:

  • create a new view based on “layout” view with dhx.EventSystem module added:

dhx.protoUI({ name:"eventlayout", },dhx.EventSystem,dhx.ui.layout);

  • then set view: “eventlayout” for the layouts that you want to attach an event to.

dhx.ui({ view: "eventlayout", id: "swipeLayout", cols:[...] }); $$("swipeLayout").attachEvent("onSwipeX",function(start,end){ /* your code here */ });

hi Alexandra,

it does not work for me…unless the view inside the cell layout was a list…

the event attached to a layout is not fired…

here it goes my code…hope it helps…

test.rar (118 KB)


onSwipe happens only for views with scroll.

You may try to put the main layout into “scrollview”:

_indexUI.configMobile = { type:"clean", view: "scrollview", body: { id: "indexLayOut", cols: [...] } };

But again, there will be an issue with iframes. The library does not listen to events inside iframes.

Perfect!! thanks Alexandra!