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();