Slide-in 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

126 thoughts on “Slide-in menu”

  1. 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).

  2. 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…. 🙁

    1. Would be cool if you can combine this and iscroll, and have this menu fixed at the bottom or top.

      1. I’ve combined the two plus ‘Add to home screen’; all by Matteo for a webapp i’m running. works like a charm. Thanks Matteo.

  3. Love the idea but fails when u pinch zoom the page. Knicks your sub out of sync.
    Keep up the good work though

  4. Great concept. Doesn’t work on HTC Magic though.

    Nevertheless, I’ll probably look at implementing it in some sites I build somehow.

    1. Have you set up a demo with both iScroll and SlideInMenu working together? I don’t seem to see it.

      1. HI there!
        Matteo thanks for this cool scripts. You will be my hero if you can provide an example of MenuSlider & iScroll working together.

        Thanks again.

  5. 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)

    1. AWESOME components. I agree with Max regarding the menu goes under the topbar.

      Is page scrolling possible under the slide-menu?

  6. 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.

    1. @Matteo: iscroll and slide-in both work great but I can not get them to work together? Do you have an example of a “carousel” in a slide-in menu?

      @David: you were able to get it to work on the iPhone simulator? Do you have example code available?

      Thx. E.

  7. 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]

  8. adding a callback for open/close using the webkitTransitionEnd event would be a nice feature to have. 🙂

  9. good job, what do I have to change in order for me to put in the bottom without a scrollbar

    thanks

  10. 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?

    1. 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?

    2. 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!

  11. 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?

  12. 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.

  13. 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

  14. 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.

    1. Sliding in from the left is not that difficult to achieve. Simply make some changes to the javascript and to the css. Basically it is changing widths with heigths and pageY becomes pageX. Below changes that should to the trick.

      #slidedownmenu {
      position:absolute;
      height:100%;
      width:200px;
      top:0px;
      left:-200px;
      }

      #slidedownmenu .handle {
      position:absolute;
      left:200px;
      top:0;
      width:28px;
      height:100%;
      }

      And in the javascript (only part with the required changes):

      function slideInMenu (el, opened) {
      this.container = document.getElementById(el);
      this.handle = this.container.querySelector(‘.handle’);

      this.openedPosition = this.container.clientWidth;

      this.container.style.opacity = ‘1’;
      this.container.style.left = ‘-‘ + this.openedPosition + ‘px’;
      this.container.style.webkitTransitionProperty = ‘-webkit-transform’;
      this.container.style.webkitTransitionDuration = ‘400ms’;

      if ( opened===true ) {
      this.open();
      }

      this.handle.addEventListener(‘touchstart’, this);
      }

      slideInMenu.prototype = {
      pos: 0,
      opened: false,

      handleEvent: function(e) {
      switch (e.type) {
      case ‘touchstart’: this.touchStart(e); break;
      case ‘touchmove’: this.touchMove(e); break;
      case ‘touchend’: this.touchEnd(e); break;
      }
      },

      setPosition: function(pos) {
      this.pos = pos;
      this.container.style.webkitTransform = ‘translate3d(‘ + pos + ‘px,0,0)’;

      if (this.pos == this.openedPosition) {
      this.opened = true;
      } else if (this.pos == 0) {
      this.opened = false;
      }
      },

      touchStart: function(e) {
      e.preventDefault();
      e.stopPropagation();

      this.container.style.webkitTransitionDuration = ‘0’;
      this.startPos = this.pos;
      this.startDelta = e.touches[0].pageX – this.pos;

      this.handle.addEventListener(‘touchmove’, this);
      this.handle.addEventListener(‘touchend’, this);
      },

      touchMove: function(e) {
      var delta = e.touches[0].pageX – this.startDelta;

      if (delta this.openedPosition) {
      delta = this.openedPosition;
      }

      this.setPosition(delta);
      },

    2. Slide from left or right would be really nice since at least on ipad, when you are holding it its much more confortable to have menus on the sides because of the position of the hands.

  15. Congratulations for your work !!

    I’m using for a Ipad version of a website, slide-in menu AND iScroll in the same script.
    Sometimes, when the page loads, the menu is locked and not reverse its position in “closed”.

    Have you any idea?

    My code :
    var myScroll;
    var menu;
    function loaded() {
    menu = new slideInMenu(‘slidedownmenu’, false);
    menu.close();
    myScroll = new iScroll(‘scroller’, {
    snap:true,
    momentum:false,
    hScrollbar:false,
    onScrollEnd: function () {
    document.querySelector(‘#indicator > li.active’).className = ”;
    document.querySelector(‘#indicator > li:nth-child(‘ + (this.pageX+1) + ‘)’).className = ‘active’;
    //alert(this.pageX);
    //if (this.pageX == 4) document.location=’de.php’;
    }
    });
    document.addEventListener(‘touchmove’, function(e){ e.preventDefault(); e.stopPropagation(); });

    }

    document.addEventListener(‘DOMContentLoaded’, loaded, false);

    Thank you very much.

  16. Hi thx for the great script!

    Q: Is there a way to use more than one slide in menu? I’m having problems with my second one. First works perfect but second slide in menu (different ID of course) is not slideable and open by default.

    1. Not quite. I noticed that the push each other down so only the first is functioning. The second is pushed by its size (notice that all slideinmenu-divs have the same size) and the third by twice its sice. Is there a way to position the div layer so that each they don’t push each other down but are still functioning.

      Info:
      I’m using jQTouch to switch between panels (main div layers) in a single html file.

      I appreciate your help.

  17. This is great!

    Is there a way at present to get it to slide up from the bottom rather than the top of the screen?

    1. With few modifications you can get a bottom bar version.

      css:
      #footerToolbar {
      position:absolute; z-index:40;
      height:80px;
      bottom:-80px;
      }
      #footerToolbar .handle {
      position:absolute;
      z-index:90;
      height:40px;
      top:-40px;
      }

      this.openedPosition = -this.container.clientHeight;
      this.container.style.top = iModel.screenHeight + 'px';

      touchMove: function(e) {
      var delta = e.touches[0].pageY - this.startDelta;
      if (delta > 0) {
      delta = 0;
      } else if (delta < this.openedPosition) {
      delta = this.openedPosition;
      }
      this.setPosition(delta);
      }

      1. Hello,
        trying to fix it at the bottom with no luck, what’s iModel in
        this.container.style.top = iModel.screenHeight + 'px';

        vs the original

        this.container.style.top = '-' + this.openedPosition + 'px';

      1. Did anyone get this working from the bottom properly? I can get it working to some extent, however it breaks the sliding functionality and you simply tap it and it moves upwards.
        Would be great to see a working pull up from bottom version :/

  18. Does this prevent safari from being able to scroll?

    I think there’s been a couple of comments addressing this, but they’ve been confused for requesting the iscroll functionality.

    I personally can’t figure out what’s going wrong and why I can’t scroll my site after installing this.

    1. Thanks for your quick answer! Thought I was going to wake up and have to find a new solution.

      Love your work Matteo!

      And really appreciate your response time, I’ll definitely be referring people to your great site.

  19. Based on Moses comment, it would be nice to have the menu on the footer. I will like to incorporate something like this in my app.

  20. Thanks a lot for sharing. You have done a brilliant job. Your article is truly relevant to my study at this moment, and I am really happy I discovered your website. However, I would like to see more details about this topic.

  21. Hi there,

    i love this works here.
    unfortunable i dont find a right way to include iscroll in slide in 🙁
    is there a demo anywhere ? 🙂

    cheers Jerry

  22. Hi, this is great, I would love to use this in my footer.
    Also just a note about iOS5 compatibility. If you install this to your home screen you are then unable to make the pull down work as every time you make the pull down gesture from the top of your screen the new notifications pull down is triggered.
    As said, I cant wait for bottom positioning. Keep up the good work. Thanks!

  23. Love this… Thanks for making it Matteo!

    I have a quick question… Has anyone had any luck putting jquerymobile content on the slider? I’m able to use the slider on jquerymobile pages, however if I put a jqm element such as a nav bar, which I might add would be ideal, it freaks out and doesn’t place nice together…

    Anyone that might have a tip… Getting these two to play nicely together would be a huge help…

    Thanks,

    AlexJ

    1. Hi Alex, Did you ever find out how to implement this with jQuery mobile? Would love to have a dynamic sidebar like this (sort of like the current facebook mobile app) integrated with jqm.

      1. Hi,

        I’m also trying to get this to “work with JQuery Mobile”, more precisely to have JQM widgets (accordion containing menu items) sit inside the slide-in div block.

        It seems to require some investigating 🙂 Which I’m quite happy to try and carry out… although I’m not sure I have the skills to get anywhere in a reasonnable time.

        Anyway, would anyone have by any chance an example of JQM and Matteo’s script working in harmony ?

        Cheers,

        – G

  24. Great code. Thank you!
    Is there any way I can get the slide menu not to automatically open when the page loads? I’d rather the user toggle it open if they wish.

    Cheers,

    JOn

  25. I’m using this as a menu in conjunction with the iScroll snap and snap to elements.

    I’d love for the ability to click one of the menu items and have it auto-scroll to that LI

    Anyone know how to do this?

  26. First off all, you did (and still do) an excellent job!!!

    If have made a “pseudo” app for ipad´s. I have a basic apple/app/frame with an external website to load in it. So I can open the app by a click on my ipad´s desktop.

    I´m using iSroll(4) with two scroll areas, a fix header and footer and a slideinmenu in the right top bar. I have put a simple link inside that menu, but its not clickable (???)

    Another question: I have a navbar on the left (iscroll) and a content on the right (iscroll and ajax). When I have scrolled down this content, how can I move to the top by clicking one of the next entries on the left?

    By the way: I have found a question from somebody who had problems with scolling in 2 bars. I solved the problem by increasing the value from 0 to 1000.


    function onCompletion () {
    setTimeout(function () { scroll1.refresh(); }, 1000);
    setTimeout(function () { scroll2.refresh(); }, 1000);
    }

    excuse my english 😉

  27. 2-way-iScroll and Slide in Menu ? I see a lot of people saying this can be done ?

    Any ideas how it can be done with the 2-way-iScroll ?

  28. It works well on iPhone and Android, but i wanted to try on Opera Mobile and it doesn’t seems to run. Do you think it is easy to adapt the menu on it, or on Windows Phone (i’ve have not tested it yet)

  29. Really cool script.

    I tried to see if it could act as a hideable navigation for a traditional full-screen menu by changing the height to:

    #slidedownmenu {
    height:315px;
    top:-315px;
    }

    but then when you turn the phone to landscape mode, the handle falls to far below the frame.

    Similarly, when you use a percentage height like 90%, the effect still doesn’t translate to landscape mode because it remembers the old state.

    I would love to see the functionality of scalable menu heights introduced in a later version.

  30. Matteo,
    I adapted your code a bit to make the menu slide in from the left. Thinking it might be a nice part of an options object to allow one to put the menu on any side. Would you be alright with me putting this on github, with your attribution still in the code?

    –J Gonzales

    1. Hi Jason, would love to get that code. Looking to use this as a left sidebar for a mobile app I’m working on.

      Would really appreciate if you could link your github account here, or the source code directly.

  31. would this ever toggle properly in a regular browser? If so, it would be a miracle to incorporate into responsive sites.

  32. This is fantastic. Has there been any headway on making it work from the footer? Would love this as a slideup menu. Thanks for your great work.

  33. 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?

  34. 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!!

  35. 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

  36. 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.

  37. 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!

  38. 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.

  39. 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

  40. 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.

  41. 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

  42. 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.

  43. 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

    1. 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(); });

  44. 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?

  45. Dear Gurus,

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

    best regards: Andreas

  46. 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(); });

  47. 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.

  48. 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

  49. 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.

  50. 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

  51. Hey nice job done but It is not at all working on firefox,However it an important thing to note,but worked smooth on chrome,safari.else it is not supported on firefox.

  52. Now those who are facing the problem in firefox with this awesome plugin just modify the script with standard transition syntax and as well as webkit syntax,I believe that firefox browser supports standard syntax.
    for example in java script just change 3 lines
    replace
    this.container.style.webkitTransitionProperty = ‘-webkit-transform’;
    with
    this.container.style.transitionProperty = ‘transform’;
    replace
    this.container.style.webkitTransitionDuration = ‘400ms’;
    with
    this.container.style.transitionDuration = ‘400ms’;
    and replace
    this.container.style.webkitTransform = ‘translate(0,’ + pos + ‘px)’;
    with
    this.container.style.transform = ‘translate(0,’ + pos + ‘px)’;
    and thats it this code will work with firefox browser
    And even you can keep all the above line in script which will support all the browsers.

Leave a Reply

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