I wanted to create a JQuery Mobile menu that can be used similar to how the Facebook, Path, and Highlight apps work. Full code available on my github here.

Demo here.

Please note: It’s not perfect, but it does allow swiping left and right to hide/show menu.

Mobile Sliding Split Menu
Mobile Sliding Split Menu
  • joan

    Hi Tegan

    great work!! I really like this slide menu.
    Just one comment: have u tested the menu with multipage ? it seems is not working properly. If u add the menu in all the pages, since the link to show the menu points to href=”#”, if u are in the second page and click on it, u go to the homepage.
    Gosh, it’s more difficult to explain than it really is. The problem is with multipages in JQM and this slide menu, do u know what I mean?
    How can this be solved?
    Thanks in advance.
    Joan

    • joan

      Ok, I found a solution.
      Add this line:

      event.preventDefault();

      in the click event to stop the link action.
      Cheers!!
      Joan

  • Jose M

    Hi Tegan,

    Great plugin!!!

    Just noticed that in the Samsung Galaxy S (Android Froyo 2.2) the menu does not scroll up and down. Any idea on how to fix it?
    Also does the plugin allow to add a second menu on the right position?

    Thanks in advance.
    Jose

  • Shalinga

    I add it to rails site. it’s working good.. but i got an issue while scrolling. some time menu come with out clicking menu button. I checked it with demo site too “http://www.tegdesign.com/tegansnyder-JQuery-Mobile-Slide-Menu/” when you drag page to right, it show the menu. how can i fix it.

    • tegan

      Shalinga I have noticed that on occasion as well, but haven’t had the time to fix it. I imagine you can remove the swipe event handler entirely.

  • Erik Trip

    Hello
    I’m trying to use this slidemenu. It works fine in chrome and firefox. It doesn’t in safari
    Any idea how I could fix this?

    Regards Erik

    • tegan

      Erik,

      I’m sorry bud. I don’t have any pointers right now. I built it a year ago for a Phonegap application I was writing and never intended it to be used via a browser.

  • Javier Enrique Posada Muñoz

    Hi everyone for the people who has problems with the scroll, the solution that i have used was modify the file “jqm.slidemenu.js” , i have modified this function
    $(window).scroll(function() {
    //if (sm.data(‘slideopen’)) {
    sm.css(‘top’, getPageScroll()[1] + ‘px’);
    //}
    });
    coment the “if”