Simple jQuery Mobile Menu

62 thoughts on “Simple jQuery Mobile Menu”

1. Thank you very simple and nice.

2. Thanks for that short tutorial

3. This was exactly what I was looking for!
   Quick question: I’m using WordPress and set my dropdown with a fixed height/width due to needing a background image behind each menu item. Got everything to work, however, the text for the menu items is pushed to the top of the “button”. I’ve tried adjusting padding, etc. but to no avail. Any help would be appreciated.

   1. Hi Stacy, glad you like the menu. Try setting the link line-height to the same height as your background image. That’s a great way of vertically centering text. If that doesn’t work, feel free to post a link and I will check… Feel free to post a link regardless. I wouldn’t mind seeing your modifications (assuming it’s a public site).

      1. Thanks for the reply!! It actually ended up being an issue with padding and height. I think I looked at so much I wasn’t seeing it. Hate when it’s something simple…on the other hand that can be a good thing – even if it makes you feel like an idiot 😉
         Oh well, you learn from your mistakes. Thanks again!!!

         1. Looks good! Glad you got it working.

4. Pingback: Simple Navicon CSS

5. Thank you very simple and nice. I just tweaked to make more easier for other users. The below code will make the menu list to close once any list item is clicked (best works for one page sites):

   jQuery(document).ready(function($) {
   $(“#mmenu”).hide();
   $(“.mtoggle”).click(function() {
   $(“#mmenu”).slideToggle(500);
   $(“#mmenu li”).click(function(){
   $(“#mmenu”).slideUp(500);
   });
   });
   });

6. What a great instruction. Thank you for your help.
   I added it to wordpress. The menu scroll down but scroll up immediately, user can’t click the button. Do you know what happen?

   1. Hi Manson – the menu toggle script is in your page twice. So the first script is opening the menu and the second one is closing it back. Remove lines 241-247 (right after the #wrapper div opening) and you will be good to go.

7. Interesting. However, you often state “if you are using WordPress”. I am not. i want to build a jquery mobile site from scratch. Can you provide step by step mobile menu creation/insertion instructions with that scenario? Thank you.

   1. Hi Dennis, you can just skip over the WordPress parts. Be sure to check out the demo. That’s exactly how you would implement the menu outside of WordPress.

8. If I understand correctly, I need two menus, one for desktop, one for mobile, right?

   1. That’s normally what people do. You would use CSS media queries to hide and show the correct menus.

      Depending on your website design, it might be possible to get away with only using one menu. You would use CSS media queries to style it as needed for desktop/mobile. It’s a lot more work to pull that off, but you would have cleaner HTML.

9. Is there a way to hide a logo or push down a header image when the menu opens?

   1. Yes, that’s how it’s setup by default. Everything below the menu gets pushed down.
      However, if your logo is absolutely positioned on the page, it’s not going to get pushed down.

10. Another question, is there a way to open a sub menu list instead of it displaying right away?

    1. Yes, you can use css to hide the child ul menus. Normally you would use CSS for displaying them on hover, but you are dealing with mobile devices, so you would want to use a jQuery click function to toggle the sub menus.

       1. Ok I did, but the menus bounce up and down sometimes.

          1. Do you have a link where I can see it?

             1. m.cabinetconnect.net,
                It seems to work on the computer, but when I test it out on some phones it does it sometimes.

                1. Move your sub menu toggle code outside the .mtoggle click function and you should be good to go.

                   $(“.mtoggle”).click(function() {
                   $(“#mmenu, #logo, #s1”).slideToggle(500);
                   });
                   $(“.ntoggle”).click(function() {
                   $(“#nmenu”).slideToggle(500);
                   });

                   1. Thanks alot! I think that did it!

11. I only have one menu which is restyled depending on screen size; however, your Jquery code hides the navigation by default. How do I implement media queries with your code to open my menu on large screens and hide it on mobile size? By the way two thumbs up for the fluidity of your code. Very efficient, Bravo!

    1. For all those who may be in need of what I was looking for, the following resolved it pain free. The purpose of this script is to keep a responsive menu closed at a maximum pixel size of 600 (only opens with a trigger button) while allowing it to be opened and active without the use of the trigger button above that size.

       jQuery(document).ready(function ($) {
       var smallWindow = false;
       $(window).on(‘resize’, function () {
       var windowsize = $(window).width();

       if (windowsize 600 && smallWindow) {

       smallWindow = false;
       }
       }).trigger(‘resize’);
       });

       This script is credited to: http://stackoverflow.com/questions/15229628/jquery-unable-to-trigger-function-under-two-conditions

12. I apologize for the abbreviated script. This is the full script as intended:

    jQuery(document).ready(function ($) {
    var smallWindow = false;
    $(window).on(‘resize’, function () {
    var windowsize = $(window).width();

    if (windowsize 600 && !smallWindow) {
    $(“#main-menu”).show();
    }

    }).trigger(‘resize’);
    });

13. Thank you so much for this short and straightforward tutorial.

14. Great tutorial, but how is the mobile menu icon displayed? (I.e. the three lines.)

    1. It’s the “nav#mobile .navicon” css that create the navicon.

15. Exactly what I was looking for 🙂 Simple effective and beautifully styled. I am trying to get the menu to close on click but am a jquery appi. Could you please assist?

    With thanks 🙂

16. Used Sunil’s code. Working with many thanks to you and the community!

17. Many, many thanks for sharing this simple menu option. I almost spent a day looking for a simple responsive menu. Finally, it solved all my problems…Thanks again…

18. hey,
    please help me.. how do I set the width of the menu that opens?!
    thx

    1. It should already be 100% width. If not, try adding #mmenu {width: 100%} to your css. Leave a link if you still have trouble.

19. This is working great! Thanks so much for the solution, am loving it. However, having two small problems – I tried doing the submenu click-function you mentioned in the comments – however, it isn’t working (it just goes to the link instead of opening the child links). Is this possible with WordPress? (I’m thinking that’s probably the issue somehow).

    Second, the menu shows a strange “2192” number before every link. Has anyone else encountered this, and how does it get removed?

    Thanks!

    1. Try adding “event.preventDefault();” line inside your submenu’s click function. That will prevent the parent page from loading and allow your function to continue with expanding the menu.

       http://api.jquery.com/event.preventdefault/

       $(“.open-sub-menu”).click(function() {
       event.preventDefault();
       $(“.sub-menu”).slideToggle(500);
       });

20. Nevermind on the 2192, found it! 🙂

21. Can be set, to close the menu, when you click on a link from the menu, or by pressing the ESC button to close the menu, or click on the video to close that menu?

    1. Sunil Kumar has the “close menu on item click” function in the comments above.
       To close the menu when clicking outside, something like this would work: http://stackoverflow.com/questions/2868582/click-outside-menu-to-close-in-jquery
       For escape key to close, use a keydown function like this: http://stackoverflow.com/questions/9333531/hiding-a-div-with-esc-key-and-off-click-in-jquery | https://api.jquery.com/keydown/

       1. thanks, but how do I implement this script .. can you help me?

          1. Do you have a link so you can show me what you have tried to far?

22. Your tutorial is nice, simple and highly recomendable. 2 minor suggestions: 1. Leave a downloadble copy at your homepage and 2. Maybe you should point out that you have to narrow to a screenwith lower that 980 pixels to make it work. That could save sleepy monday morning programmers like me for a little time. But again: Your tutorial is really excellent. Thank you!

    1. Thanks for the feedback! I’ll try to update the tutorial as soon as I can.

23. Hi, I love this menu, and I’m trying to implement it on my site. But I’m having trouble as the menu appears behind the elements below it. Have you seen that before? Is it possible it’s because the elements below are elements created using hype?

    1. Try adding a high z-index value to nav#mobile so it stacks in front. Something like this:

       
nav#mobile {
/* Your other css rules... */
z-index:9999;
}


       1. I actually realized I put the menu within another div, so there was nothing below it to push. Thanks!

24. Very Nice and Simple to use! Thanks for your time!

25. Hello,

    Very nice and simple to use.

    Is there a way to make the navigation slide from the left instead of below, pushing the main content area to the side?
    e.g. hertsshow.com (mobile view)

    Thanks

26. Thank you. Found this via Google search. I used this technique upto yesterday where I suddenly had to add jquery 1.10.2 in stead of 1.7.1 that I used before. I also had to add 1.10.2 twice, one in body too, to get a keyboard menu working. Gonna test the extra code at the bottom. – Thank you for providing.

27. I have a question. I’m using your Jquery fixed nav and it works great. I have a minor problem with it though (a preference). I would rather have the content of the navigation overlap the page instead of pushing the page down along with it (when the menu button is pushed).

    I read your documentation and it tells me to use position:absolute if I want it to overlay the page instead of pushing it down. However, you did not specify which class to add position absolute to.
    I tried it on the mmenu class and also the toggle, but it messes up with the navigation. It doesnt overlay it it still brings me to the top of the page when I scroll down and click the menu button.

    Any help?

    1. You will need to add it to the navigation ul (#mmenu). You might need to do some extra styling once you make it absolute:

       #mmenu {
       position: absolute;
       width: 100%;
       z-index: 9999;
       background-color: #000000;
       }

28. Having some troubles making this work. The toggle icon is shown on my page, but nothing happens when clicking on it. I have jquery loaded in header of the page.

    This is the menu:

    {snip}

    This is the Javascript, placed within body:

    /* mobile menu */
    jQuery(document).ready(function($) {
    $(“#mmenu”).hide();
    $(“#mobile-toggle”).click(function() {
    $(“#mmenu”).slideToggle(500);
    });
    });

    Any idea what could be wrong?

    1. Could you post a link to it? Or copy your code into a JS fiddle link?

       1. Thanks for your post, Brandon. Yes, I see, my code code changed in my post. Here is the page I am working on: http://tinyurl.com/qf33veq

          regards
          Thom

          1. Your mobile menu html is using #mmobile instead of #mmenu. Swap out #mmenu with #mmobile in your javascript so it matches up.

29. How dumb of me. Thank you. Seems I switched things around so often until I did not see the forrest anymore within all those trees.

    Now its opening, but its not switching back. I suppose using two times the same id=”mobile-toggle” does not work as I intended.

    Thanks again
    Thom

    1. Yes, delete the second #mobile-toggle and add “z-index: 9999” to your #mobile-toggle css to keep it visible.

30. You are great! Thanks. Now it works. I would have gone a much more complicated way to solve that. Greetings, Thom

31. Hello. This worked great for me and was exactly what I was looking for. Having one issue though.

    I was wondering how you could close the menu after clicking on one of the list items.

    Right now I click on a list item and it takes me to the section but the menu stays open. When I click my toggle menu icon to close the menu it takes me back to the top of my site.

    Let me know! Thanks!

    1. If you are not loading a new page when a menu item is clicked, you could add some extra jquery to make the menu toggle closed whenever a link is clicked. Something like this: $(“#mmenu a”).click(function() { $(“#mmenu”).slideToggle(500); });

       To stop a page from jumping to top when a link is clicked, use “event.preventDefault()” in the click function.

32. Hi,

    I love the code you provided. With a few tweaks in styling, the menu looks superb on my site. Nice and simple and fast to load.

    But I’m having one strange problem.

    During page load, the menu seems to default to “open.” Then, as the page load, the menu “closes.” The result is that when you browse from page to page, the menu seems to “jump around” – at the beginning of page load it appears open but as the page continues loading, the menu snaps closed again. Makes for a rather jarring effect.

    Any thoughts to what that might be?

33. hey thanks for that nice menu.
    You need to update the style in yout tutorial to your actual style:
    view-source:http://bhoover.com/demo/mobile-menu/style.css

Comments are closed.