> Slide-in menu

slidein-menu

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

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 compatibility
  • Programmatically 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

/Share the joy

/Reactions

    • Author: Joel
    • Posted on: 2012/02/06
    • At: 21:58

    Great plugin, this is really useful. Any suggestions on how to integrate this with jquery mobile?

    Reply
    • Author: steven hyle
    • Posted on: 2012/02/07
    • At: 19:23

    Hi,

    I’m trying to make the bar stay horizontal, however, when “open” it slides left to right.

    I like the bar being at the top with a width of 100%, however, I went the menu to fly in from left to right with a height of 100%.

    Can you please help?

    Reply
  • cool – love your work! simple, solid and useful.

    Reply
  • Hello, i feel that i saw you visited my weblog thus i came to return the desire?.I am trying to in finding issues to improve my web site!I guess its adequate to use some of your concepts!!

    Reply
  • You may want to take this off the Project State: Active, since there hasn’t been an update in almost 2 years :)

    That said, have you thought about modifying this to handle a 2-row menu (the 2nd row being the “dropdown” for the first) ?

    Tom

    Reply
    • Author: tom bee
    • Posted on: 2012/02/19
    • At: 06:30

    Is there anyway to change this to make it a slidein-menu from the bottom?

    Reply
    • Author: Francisco
    • Posted on: 2012/03/06
    • At: 21:39

    Really awesome, it works fine on Chrome and Safari, too bad it ONLY works there… doesn’t work on IE9, Opera or Firefox. :(

    Good job though.

    Reply
      • Author: Jesse
      • Posted on: 2012/03/13
      • At: 02:44

      Meanwhile, this is intended for MOBILE use. Just saying.

      Reply
    • Author: odnel
    • Posted on: 2012/03/26
    • At: 02:19

    This is really awesome, but i have a problem with a android where the website won’t scroll on the mobile page due to the “loaded” function in the file. I take that out and it works fine but obviously the menu bar doesn’t move. How can I fix this, thanks in advance!

    Reply
    • Author: De
    • Posted on: 2012/04/11
    • At: 15:28

    Nice! Works properly on blackberry playbook..

    Reply
    • Author: Hmm..
    • Posted on: 2012/05/06
    • At: 07:55

    It dosen’t work quite well in a web application on iOS 5. It, didn’t worked that well.

    When I tried to pull down the menu (full screen web app), well, on iOS 5, the Notification Center slides down first.

    Well, there should be a way to move the menu to the bottom, instead.

    Reply
    • Author: Rayken
    • Posted on: 2012/05/07
    • At: 13:47

    Great script!

    I only have one problem with it though, it’s when you go from portrait to landscape or vise versa. Once you’ve loaded the page in portrait, open the menu and go landscape the elements inside are misplaced as it seems the top/left values are wrongly interpreted. Closing the menu will simply make it go outside the view area and is no longer accessible unless you reload the page. Once you do, however, switching from landscape to portrait works as intended. I believe some sort of rotation detection needs to be added to deal with the element positions!

    Any input on this would be highly appreciated as it isn’t very user friendly having to reload the page to bring back the menu / make it work as intended.

    Best regards,
    Rayken

    Reply
    • Author: Óscar Taylor
    • Posted on: 2012/06/07
    • At: 09:12

    Hello Matteo, i really need a version of this working from the bottom from the screen, are you interested in charging me to get that done?

    I would really love to pay you for this help.

    Thanks a lot and keep up with the great work.

    Reply
      • Author: Alex
      • Posted on: 2012/07/30
      • At: 00:02

      Have you had any luck with getting it to work from the bottom?

      Reply
    • Author: Kieran
    • Posted on: 2012/06/20
    • At: 21:51

    Hi

    Great script, easy setup and works perfect.

    One question. I have put a box shadow on the bottom of the panel that slides down and wondered if you new of a way of the box shadow only coming in when the menu is active.

    Many Thanks

    Reply
    • Author: Mayank
    • Posted on: 2012/06/29
    • At: 16:48

    Excellent job but one issue. When the size of screen get reduces the icon comes out of the menu bar automatically. Is there any way to fix this.

    Reply
    • Author: cmlopez
    • Posted on: 2012/06/29
    • At: 19:24

    Since I do to forward the buttons?? I have tried with to href and it me does not work

    Reply
      • Author: Peppe
      • Posted on: 2012/07/27
      • At: 18:03

      Same problem

      Reply
  • I am trying to incorporate this menu into an Android/iPhone app I have developed. A few issues I have:
    1. I cannot start the page with menu closed
    2. The page does not scroll below the menu
    3. The rest of the page attributes are changed when using this

    Reply
      • Author: Thiago
      • Posted on: 2012/11/06
      • At: 12:53

      To load page with menu closed you just have to change the value true to false in this line
      menu = new slideInMenu(‘slidedownmenu’, true); //open
      menu = new slideInMenu(‘slidedownmenu’, false); //closed

      To scroll your page content you just have to replace
      document.addEventListener(‘touchmove’, function(e){ e.preventDefault(); e.stopPropagation(); });
      for
      document.getElementById(‘yourID’).addEventListener(‘touchmove’, function(e){ e.preventDefault(); e.stopPropagation(); });

      Reply
    • Author: Edward
    • Posted on: 2012/09/05
    • At: 01:07

    I’m currently working on a web app and implementing the slide-in bar, however, I can’t do custom position. Is there any other way to do that?

    Reply
      • Author: Edward
      • Posted on: 2012/09/05
      • At: 04:17

      basically what I want to do is to move the slide bar down 50px.

      Reply
    • Author: Andreas
    • Posted on: 2012/10/04
    • At: 11:39

    Dear Gurus,

    can you help me in sliding from bottom? Script of Kamila (2011 07 19) doesnt work.

    best regards: Andreas

    Reply
      • Author: Sascha
      • Posted on: 2012/10/17
      • At: 09:44

      Hi,
      do you have a solution for the SLIDING FROM THE BOTTOM?

      Regards,
      Sascha

      Reply
    • Author: Thiago
    • Posted on: 2012/10/25
    • At: 22:11

    To scroll your page content you just have to replace

    document.addEventListener(‘touchmove’, function(e){ e.preventDefault(); e.stopPropagation(); });

    for

    document.getElementById(‘yourID’).addEventListener(‘touchmove’, function(e){ e.preventDefault(); e.stopPropagation(); });

    Reply
    • Author: Thiago
    • Posted on: 2012/11/06
    • At: 12:54

    Did someone find a solution for this plugin to work in horizontal slide?

    Reply
    • Author: Patrick
    • Posted on: 2012/11/06
    • At: 18:36

    I am impressed with this slide in menu for mobile devices. I have more than four items in the menu. I know I can change the height from 75px to 150px or something to make it two rows of menu. However, it depends on the size of mobile and orientation as well. If I am in portrait, it would show two rows. If I am in landscape, it would show two rows but all menu items are in first row. I am not sure how to fix it. Another thing is that I want to make all menu item as center. Example: iPad shows 6 menu items in one row but it starts on left side. I want to make them in center so it would not leave too much space on right side. I did try to make it center by using text-align:center or margin-left:auto; margin-right:auto and it did not work. I suspect maybe it has to do with your javascript that controls the menu item to stay on left side? Thank you.

    Reply
    • Author: Matheus
    • Posted on: 2012/11/11
    • At: 23:56

    Hey,
    Is there a way to use multiple slideInMenu on one page? It seems the secong one wont work is it’s excepted. I mean the second one is unhideable, and starts opened. Basically, like it wouldn’t be a slide-in menu, just a simple div. It’s very important for me.

    Thanks,
    Matheus

    Reply
    • Author: prasad
    • Posted on: 2012/11/30
    • At: 14:37

    Is there any way sliding menu will work for web browsers

    Reply
    • Author: Stan
    • Posted on: 2012/12/04
    • At: 11:23

    Hello, first of all, congratulations for your work. It helped me a lot in my work!

    But still, I have a small problem with the scroll and slide. The problem is that when I combine the two, the scroll does not work on the iPhone but works on Safari web browser on my PC.

    What to do to solve this problem?

    example:

    http://hackidevice.com/app/zzslide

    PS: To lower the slide, click on the apple in the footer.

    Reply
    • Author: Jacob
    • Posted on: 2013/01/09
    • At: 23:08

    i have a problem,i used your script and demo page but i have a little bit more content in that gray section and i cant even scroll,so it shows just something…
    thanks,Holec

    Reply

/Leave a reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>