Simple jQuery Mobile Menu

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

View jQuery Mobile Menu System Demo


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

62 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($) {
    $(“.mtoggle”).click(function() {
    $(“#mmenu li”).click(function(){

  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() {

  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;

      This script is credited to:

  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) {


  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?


  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?

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

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

  14. 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. (mobile view)


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

  16. 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;

  17. 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:


    This is the Javascript, placed within body:

    /* mobile menu */
    jQuery(document).ready(function($) {
    $(“#mobile-toggle”).click(function() {

    Any idea what could be wrong?

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

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

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

Leave a Reply

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