A repository of over 1000 quality jQuery plugins

jQuery MobileMenu JS

MobileMenu JS is a jQuery Responsive & Drawer plugin.

Created by LukeBallantine

A jQuery plug-in for responsive web sites. Turns an unordered list nav into a dropdown

Not what you're looking for? Click here to view more Responsive & Drawer jQuery plugins

MobileMenu.js

The Mobile Menu plugin scans an existing multi-level navigation menu and dynamically builds a dropdown list which navigates the user to the selected page on the select elements change event. It is true that there are a few other plugins out there that do this already, however most of them don’t seem to handle a menu that is more than 1 level deep.

These are the steps to get it working:

1) Make sure your navigation menu is in the format:

<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/services/">Services</a>
        <ul>
            <li><a href="/services/web-development/">Web Development</a></li>
            <li><a href="/services/online-marketing/">Online Marketing</a></li>
        </ul>
        </li>
        <li><a href="/contact-us/">Contact Us</a></li>
    </ul>
</nav>

2) Add the following scripts to your website:

<script src="/js/jquery.js?x56871"></script>
<script src="/js/jquery-mobilemenu.js?x56871"></script>

3) Invoke the mobileMenu function on the empty dropdown list you wish to have populated:

<script>
jQuery(document).ready(function($) {
    // build select menu (for mobile) from main nav
        $("nav > ul").after("<select id='ddlMobileNav'></select>");
        $("#ddlMobileNav").mobileMenu({ ulsource: "nav > ul", maxlevel: 2 });
});
</script>

The parameters you can specify for the mobileMenu function are: ulsource: The jquery selector referencing your unordered list. maxlevel: The maximum number of levels of the main navigation you wish to traverse.

You should now have a dropdown menu that will navigate the user to the selected page.

Media Queries

And finally, don’t forget to use media queries to hide the main navigation when the screen size is below a certain width, and likewise to hide the select menu when the screen width is larger than mobile.



You might also like these other Responsive & Drawer jQuery Plugins

  • hiraku

    “hiraku” means “open” in Japanese. As you can imagine, “offcanvas-menu” is like a drawer and it is of...

  • LayerNav

    A small, jQuery-powered navigation menu for mobile and up

  • SimpleMobileNav

    jQuery-?????? ??? ?????????? ?????????????? ???? ?? ????????????? ?? ???????? ????