Sometimes the screen of mobile devices is too small to fit all the controls, menus and options of your application. One solution is to create a slide in menu that the user can pull to access additional functions.
Project info
Project state: ACTIVE (code is actively updated)
Last code update: 2010.05.28 – v0.1 beta 1
Device compatibility: iPhone/Ipod touch >=2.0, Android >1.6, iPad.
QR Code opens demo page. (On Android you may need to refresh the page once loaded, I’m looking into this issue with QR links).
Support development
If this script saved your day or you wish to support future developments you may consider sending some funds via PayPal.
Overview
Sometimes the screen of mobile devices is too small to fit all the controls, menus and options of your application. One solution is to create a slide in menu that the user can pull to access additional functions.
The menu is opened both by tapping and pulling the handle.
This widget is ridiculously simple, all it does is to slide in a hidden div on user’s request. Please note that the script is just a draft, I’ll keep developing it if there’s enough interest (see below).
How to use
Initialize the slide in menu on DOMContentLoaded:
menu = new slideInMenu('slidedownmenu');
slidedownmenu is the ID of the element to be slided.
The slider has to be absolutely positioned and the top:
#slidedownmenu {
position:absolute;
width:100%;
height:115px;
top:-115px;
left:0;
z-index:999;
}
The the example I set the top property to -115px so the menu is hidden while the page loads, but it’s not mandatory. The slideInMenu() function takes care of placing the div in the right position.
The handle is positioned to the bottom of the sliding layer. To make it stick out the initially closed menu you just need to set the bottom property equal to the negative value of the handle height:
#slidedownmenu .handle {
-webkit-user-select:none; /* user can't select */
position:absolute;
width:100%;
height:20px;
bottom:-20px;
left:0;
}
Look at the source code of the online demo for details.
Syntax
The function accepts two parameters at startup:
slideInMenu(string ID, bool openAtStartup);
ID is the menu identifier. If you set openAtStartup to TRUE the menu will be in opened when initialized.
You can also open, close and toggle the menu programmatically.
var menu = new slideInMenu('slidedownmenu', true); // Initialize the menu and open it right away
menu.open(); // Open the menu
menu.close(); // Close the menu
menu.toggle(); // Toggle the menu open/close state
Future developments
Add Android compatibilityProgrammatically open/close the menu- Should be possible to place the menu anywhere (ie: slide down/up/left/right)
Revisions history
v0.1 beta 1, 2010.05.28 – Added Android compatibility
v0.1 alpha 1, 2010.05.25 – Initial release
Really Awesome!
This is so great !
Thanks a lot for sharing Matteo…
I think I will use it in my next project : because It will work both in iPhone and Android, and it’s good for small screen device…
Would be great to memorize the last position (provide a function to set it initially open or close at startup).
Good point, I’ll add that feature to the to-do list.
It’s nice but pretty buggy as a iPhone Web Apps because the whole touchable area is hidden behind the upper bar. It’s exactly the same size so you just can’t touch anything….
Nice, but you cannot scroll the page with this?
Would be cool if you can combine this and iscroll, and have this menu fixed at the bottom or top.
Love the idea but fails when u pinch zoom the page. Knicks your sub out of sync.
Keep up the good work though
Great concept. Doesn’t work on HTC Magic though.
Nevertheless, I’ll probably look at implementing it in some sites I build somehow.
To have it work on Android <1.6 change
‘translate3d(0,’ + pos + ‘px,0)’to
'translate(0,' + pos + 'px)'(but no HW acceleration)
This is a cool component. Unfortunate that you can not scroll the page though.
I’ll try to make a demo page with both widgets working peacefully together
Have you set up a demo with both iScroll and SlideInMenu working together? I don’t seem to see it.
not yet, sorry. Will do asap
i found a bug. when in safari you add a bookmark on your homescreen and you open it in fullscreen mode the menu goes under the topbar
(it happens in iscroll too)
AWESOME components. I agree with Max regarding the menu goes under the topbar.
Is page scrolling possible under the slide-menu?
Or is it possible to combine iScroll function and slide-in-menu function together?
Yes it works. A little tricky but works great.
I was able to get it to work in iPhone simulator WITH iScroll. Wan’t able to get it to work on Droid. Some kind of width issue. Working on it.
Great work.
Great work Matteo, please keep up your efforts developing UI components for mobile!
I added preventDefault/stopPropagation to the touchMove and touchEnd events as well, otherwise the events would bubble up to the other touch events in my document.
Line #29 this.handle.addEventListener(‘touchstart’, this);
Is that right?? it seems to work fine, but shouldn’t ‘this’ be a function you want to bind to?
In FF this causes:
uncaught exception: [Exception... "Not enough arguments" nsresult: "0x80570001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS)" location: "JS frame :: http://domain.com/js/slideinmenu.js :: slideInMenu :: line 29" data: no]
adding a callback for open/close using the webkitTransitionEnd event would be a nice feature to have.
very good advice. I’ll add it to the to-do
I love u (in a man-ly way)
Brilliant work!!!
So many great projects!!
great work!! keep it up
good job, what do I have to change in order for me to put in the bottom without a scrollbar
thanks
I could not get to run this great plugin on first generation of iPhone (e.g. 2G). On simulator it works great.
Are you aweare of this problem?
Forget to mention that I run iPhone OS 3.1…
Weird, it works on my old ipod touch (v3.1.2).
Yeah, it’s really wierd. I will on another iPhone.
I have done this way:
var menu;
function loaded() {
document.addEventListener(‘touchmove’, function(e){ e.preventDefault(); e.stopPropagation(); });
alert(“before”);
menu = new slideInMenu(‘slidedownmenu’, true);
alert(“after”);
}
document.addEventListener(‘DOMContentLoaded’, loaded);
A load this with Safari on Mac but still no go. It comes to the “before” alert but not to the “after”.
What could be wrong?
It loaded now ok. The problem was in JS path.
Sory for this misunderstanding.
By the way, this is great script. Go on like that!
I can’t seem to get this to work with the JQTouch framework, seems the JQTouch CSS conflicts with the slide in menu…. any ideas?
Would it be possible to combine this with your rotating wheel, so I could use it to navigate a site? Best would be from left to right and back.
Morning
All your examples are great.
My question on the Slidein code is:
Does it work on the actual iPhone itself?
I have tried and only get the page, but with no action.
Iain
Works for me. Try to refresh a couple of times. Also what iphone/OS version?
Hi Matteo,
Great work. One question. Is it currently possible to have the menu slide in from the left? If not, what needs to be done to implement this?
Cheers,
Steve.
not yet, but it’s in my to-do
That can be a great feature, im waiting for it.
Thanks Matteo!
I second this feature. Whats the eta on a menu sliding in from the left or right?
As soon as I get some spare time… very busy period, sorry.