Slide-down menu for Titanium Alloy

index.xml

<Alloy>
  <Window>
    <Require src="menu" />
  </Window>
</Alloy>

menu.js

var args = arguments[0] || {},
  isVisible = false,
  barHeight,
  optionsHeight;

function toggle() {
	return isVisible ? hide() : show();
}

function hide() {
	isVisible = false;
	
	$.options.animate({
		top: barHeight - optionsHeight,
		curve: Ti.UI.ANIMATION_CURVE_EASE_IN
	}, function () {
		$.container.height = Ti.UI.SIZE;
	});

	return;
}

function mayHide(e) {
	
	if (e.direction === 'up') {
		hide();
	}
	
	return;
}

function show() {
	isVisible = true;
	
	$.container.height = Ti.UI.FILL;
	$.options.animate({
		top: barHeight,
		curve: Ti.UI.ANIMATION_CURVE_EASE_OUT
	});
	
	return;
}

optionsHeight = $.options.children.length * $.options.children[0].height;
barHeight = $.bar.height;

$.options.applyProperties({
	top: barHeight - optionsHeight
});

menu.tss

"#container": {
	top: 0, right: 0, left: 0,
	height: Ti.UI.SIZE
}

"#bar": {
	top: 0, right: 0, left: 0,
	height: 44,
	
	bubbleParent: false, // Stop taps from bubbling to container, causing hide
		
	backgroundColor: 'red'
}

"#toggle": {
	left: 0
}

"#options": {
	top: 0, right: 0, left: 0,
	height: Ti.UI.SIZE,
	layout: 'vertical',
	
	bubbleParent: false, // Stop taps from bubbling to container, causing hide
	
	backgroundColor: '#5f00'
}

".option": {
	top: 0, right: 0, left: 0,
	height: 44,
	
	backgroundColor: 'yellow'
}

menu.xml

<Alloy>
 	<!-- Tapping the mask hides the options -->
 	<View id="container" onClick="hide">
		
		<!-- Swiping the options up hides them -->
		<View id="options" onSwipe="mayHide">
			<View class="option"><Label>One</Label></View>
			<View class="option"><Label>Two</Label></View>
			<View class="option"><Label>Three</Label></View>
		</View>
		
		<!-- Bar comes after options so they slide in from under the bar -->
		<View id="bar">
			<Button id="toggle" onClick="toggle">M</Button>
		</View>
	</View>
</Alloy>

SLIDE-DOWN.md

This gist shows you how to do a slide-down menu in Titanium.

Features:

• Toggle using a menu button in the ever-visible navigation bar on the top of the screen
• Menu options animating down from under the navigation bar
• Hide by swiping the menu options up
• Hide by tapping the area below the menu options (being the view covered by the slide-down menu

Images:

Great code, how would you modify this to grab and pull the menu down for a trigger to open. Similar to iphones notification pulldown except you start at pulling the button (not start off screen like iPhone).

How can I change the animation so that it slides from left to right, instead of from top to bottom?

@otherjohn not 100% sure what you mean but instead of listening to the tap on the M-button you can listen for a swipe even on the red toolbar and trigger the animation when it's a swipe down.

@arbindbhagat in menu.js pretty much replace every top with left.