How to develop Navigation drawer in Titanium Alloy

Question

I am developing mobile application using Titanium alloy. In That I have to develop Navigation drawer activity just like in facebook app. So that there is a button at the top header and when user click on it then sliding view come from left side which contain various setting option on it.

for that it have refers this Link but it not enough for me.

i have did the fallowing code

XML file

<Alloy>
    <Window class="container">
        <Require type="widget" src="com.appcelerator.drawer" id="widget"/>
        <View >
            <Button id="Text_Order" onClick="TextOrder">Text Order</Button>
            <Button id="Voice_Order">Voice Order</Button>
            <Button id="Call_Me_Back">Call Me Back</Button>
            <Button id="Place_Order">Place Order</Button>
        </View>
    </Window>
</Alloy>

on JS file

function webviewLoad(e) {
    $.widget.checkEnabled();
};
 $.widget.addEventListener('Click',function (){
    alert('Hi');
 });

I got the result as

Result

I wand drawer button should be at the left corner of the header (Like in facebook app) and eventlistener is also not working.

I am very new for mobile app development please help me to get this done.

Rene Pot Rene Pot · Accepted Answer · 2014-09-03T12:39:04

The drawer menu you linked to is actually deprecated, so you might not want to use that.

I struggled with the same thing, but there is actually a pretty neat library out there you can use to create a drawer menu, or hamburger menu.

It is hosted on GitHub: https://github.com/ricardoalcocer/alloy-widget-drawermenu

How to develop Navigation drawer in Titanium Alloy

1 Answers