Skip to content

Instantly share code, notes, and snippets.

@Xaynder
Created November 5, 2012 12:35
Show Gist options
  • Star 7 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save Xaynder/4016971 to your computer and use it in GitHub Desktop.
Save Xaynder/4016971 to your computer and use it in GitHub Desktop.
Titanium iOS Sliding Menu
//// ---- Menu window, positioned on the left
var menuWindow = Ti.UI.createWindow({
top:0,
left:0,
width:150
});
menuWindow.open();
//// ---- Menu Table
// Menu Titles
var menuTitles = [
{title: 'Menu 1'},
{title: 'Menu 2'},
{title: 'Menu 3'},
{title: 'Menu 4'},
{title: 'Menu 5'},
{title: 'Menu 6'}
];
// Tableview
var tableView = Ti.UI.createTableView({
data:menuTitles
});
menuWindow.add(tableView);
//// ---- Window with navigationGroup
var navWindow = Ti.UI.createWindow({
width:320 // Set the width of the sliding window to avoid cut out from animation
});
navWindow.open();
// Main window
var win = Ti.UI.createWindow({
title:'Main Window',
backgroundColor:'#28292c',
barColor:'#28292c',
moving:false, // Custom property for movement
axis:0 // Custom property for X axis
});
// NavigationGroup
var navGroup = Ti.UI.iPhone.createNavigationGroup({
window:win
});
navWindow.add(navGroup);
// Top left button
var menuButton = Ti.UI.createButton({
title:'Menu',
toggle:false // Custom property for menu toggle
});
win.setLeftNavButton(menuButton);
menuButton.addEventListener('click', function(e){
// If the menu is opened
if(e.source.toggle == true){
navWindow.animate({
left:0,
duration:300,
curve:Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
});
e.source.toggle = false;
}
// If the menu isn't opened
else{
navWindow.animate({
left:150,
duration:300,
curve:Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
});
e.source.toggle = true;
}
});
win.addEventListener('touchstart', function(e){
// Get starting horizontal position
e.source.axis = parseInt(e.x);
});
win.addEventListener('touchmove', function(e){
// Subtracting current position to starting horizontal position
var coordinates = parseInt(e.globalPoint.x) - e.source.axis;
// Detecting movement after a 20px shift
if(coordinates > 20 || coordinates < -20){
e.source.moving = true;
}
// Locks the window so it doesn't move further than allowed
if(e.source.moving == true && coordinates <= 150 && coordinates >= 0){
// This will smooth the animation and make it less jumpy
navWindow.animate({
left:coordinates,
duration:20
});
// Defining coordinates as the final left position
navWindow.left = coordinates;
}
});
win.addEventListener('touchend', function(e){
// No longer moving the window
e.source.moving = false;
if(navWindow.left >= 75 && navWindow.left < 150){
// Repositioning the window to the right
navWindow.animate({
left:150,
duration:300
});
menuButton.toggle = true;
}else{
// Repositioning the window to the left
navWindow.animate({
left:0,
duration:300
});
menuButton.toggle = false;
}
});
@dilmerv
Copy link

dilmerv commented Aug 14, 2013

It will be nice if this will work for Android.

@farhadNascenia
Copy link

can you help me to work it for android?

@MotiurRahman
Copy link

how can i do this for android or Cross platform

@connect-m
Copy link

Does not work here. I paste the code into app.js and get the following error:

'undifined' is not a function (evaluating 'Ti.UI.iPhone.createNavigationgroup({window:win}) at app.js (line 40)

What is wrong?
(OS X, Titanium 3.2.0, iOS Simulator)

@8bitninjaturtle
Copy link

@connect-m It's most likely due to the function in question being deprecated. I believe it would be Titanium.UI.iOS.createNavigationWindow now but check the documentation to be sure.

@Franck22
Copy link

Franck22 commented Jun 6, 2015

Just test it but big problem when building it
There is a black window with the menu but cannot use it... and the log is :
[WARN] : Can not add a window as a child of a view. Returning

Does anyone has the solution ? Please ?

Titanium SDK 4.0
iOS 8
Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment