How can I hide slide menu in appcelerator?

Question

I'm building an app with appcelerator. I'm building also a custom slide menu. So if you click on the button the slide menu appears from left to right.

Now late today I have this menu with fixed width. To hide this menu I set a property left at -width.

Now I want to set a width of menu with a percentage. But I don't know how can I hide a menu.

So this is my css file:

"#main_menu": {
    layout: "vertical",
    scrollType: "vertical",
    showVerticalScrollIndicator: true,
    top: 0,
    left: 0,
    width: "55%",
    height: Ti.UI.FILL,
    backgroundColor: "#70C662",
}

this is my js file

var menu_width = (Ti.Platform.displayCaps.platformWidth/2);
main_menu = Alloy.createController("_main_menu", args).getView();
$.sidebar.left = -menu_width;

But the size of menu_width, is not correct because his value is 180, and it is not possible that my smartphone have 360px has a dimension.

Answer 1

If your menu view has the width set to 55%, you need to store the dp version of that percentage.

"#main_menu": {
    width: "55%"
}

Device width:

var width = Ti.Platform.displayCaps.platformWidth;
//update this on orientation change

Hide the menu:

$.main_menu.left = show ? 0 : -parseInt(width * 0.55));

If the device width is 360, the menu width 198 and the left value when hidden is -198

Don't forget to update the values on orientation change.