Pullable Left Menu

app.js

var win = Ti.UI.createWindow({
    backgroundColor: '#333'
});

var menuWidth = 200;

var container = Ti.UI.createScrollView({
    disableBounce: false,
    horizontalBounce: true,
    contentWidth: Ti.Platform.displayCaps.platformWidth + menuWidth
});
container.contentOffset = { x: menuWidth, y: 0 };

var startX;
container.addEventListener('dragStart', function (evt) {
    if (evt.source == container) {
        startX = evt.source.contentOffset.x;
    }
});
container.addEventListener('dragEnd', function (evt) {
    if (evt.source != container) {
        return;
    }
    var endX = evt.source.contentOffset.x;
    if (endX < 0 || endX > menuWidth) {
        // The scroll view itself will handle it.
        return;
    }
    var delta = startX - endX;
    Ti.API.info(endX);
    if (delta > 10) {
        openMenu();
    }
    else if (delta < -10) {
        closeMenu();
    }
    startX = null;
});

function openMenu() {
    container.contentOffset = { x: 0, y: 0 };
}

function closeMenu() {
    container.contentOffset = { x: menuWidth, y: 0 };
}

var menu = Ti.UI.createScrollView({
    backgroundColor: '#123',
    left: 0,
    width: menuWidth,
    disableBounce: false,
    verticalBounce: true
});
menu.add(Ti.UI.createLabel({
    text: 'This is the super sexy menu.', textAlign: 'center',
    color: '#fff'
}));
container.add(menu);

var content = Ti.UI.createScrollView({
    backgroundColor: '#246',
    left: menuWidth,
    width: Ti.Platform.displayCaps.platformWidth,
    disableBounce: false,
    verticalBounce: true
});
content.add(Ti.UI.createLabel({
    text: 'This is the main content area.', textAlign: 'center',
    color: '#fff'
}));
var button = Ti.UI.createButton({
    title: 'Open Menu',
    top: 20, left: 20,
    width: 200, height: 40
});
button.addEventListener('click', openMenu);
content.add(button);
container.add(content);

win.add(container);

win.open();