Simple jQuery Mobile Menu

A mobile friendly jQuery and CSS3 menu that’s simple, image-free, and pretty.

View jQuery Mobile Menu System Demo

Screenshot_2013-03-16-23-29-24

There are a number of great scrips and plugins out there for adding fancy mobile menus, but they normally take awhile to configure and perfect. For the do-it-yourself type, this is a light and simple jQuery mobile menu system that will get you up and running in no time and within budget.

#1 Load jQuery

If you are using WordPress, copy this into your theme’s functions.php file. If you already have the jQuery library hard coded into your theme’s header or footer, remove it and use this. WP_Enqueue_Script will make sure that jQuery is loaded (at wp_head) and that only one copy of jQuery gets loaded.

If you want to load jQuery in the footer (wp_footer), add an extra TRUE parameter to the end of the function.

#2 Add your mobile menu HTML

I’ve included two menu toggle (open/close) styles. The navicon (3 bar button) at the top right of the demo is becoming the mobile standard icon for menu toggling. If you are using Chrome, look to the top right of your browser and you will see it. The other menu toggle button to the left spells out what it is for. This style can be of assistance to those who are new to tablet/smartphone browsing and old people.

You could also turn the entire black bar into a menu toggle bar by adding class=”mtoggle” to the nav tag.

This jQuery mobile menu was designed to be flush with the top of the screen.

If you are using WordPress, use your WordPress theme’s menu code in place of the unordered list. Something like this:

#3 Add your jQuery toggle code

Make sure the jQuery library loads before this script:

 #4 Add your responsive CSS:

If you add position:fixed styling rule to the nav tag css, the menu bar will stay fixed at the top of the screen as the user scroll down your page. It’s convienent having the menu bar always available, but it takes away from screen real estate. If you do make the menu bar fixed, make sure you add enough top padding to the first item in the page to be sure it doesn’t try to go behind the bar and dissapear.

You will want to hide this mobile menu on large screen devices and use your primary menu system instead. Use the reponsive CSS below to achive this. For your large screen CSS, set nav#mobile to display:none. In your mobile CSS, set nav#primary-navigation-id to display:none.

View jQuery Mobile Menu System Demo

41 thoughts on “Simple jQuery Mobile Menu

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

  2. Pingback: Simple Navicon CSS
  3. 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);
    });
    });
    });

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

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

    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.

    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.

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

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

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

  8. 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 :)

  9. 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…

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

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

Leave a Reply