A repository of over 1000 quality jQuery plugins

jQuery Hc Mobile Nav

Hc Mobile Nav is a jQuery Responsive & Drawer plugin.

Created by Somewebmedia

jQuery plugin for converting menus to mobile navigations

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

HC-MobileNav

jQuery plugin for converting menus to mobile navigations.

Usage

Call the plugin

<script src="/path/to/jquery.js"></script>
<script src="/path/to/jquery.hc-mobile-nav.js"></script>
<script>
    jQuery(document).ready(function($){
        $('#main-nav').hcMobileNav({
            maxWidth: 730
        });
    });
</script>

Example HTML menu structure

<nav id="main-nav">
    <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li>
            <a href="#">Services</a>
            <ul>
                <li>
                    <a href="#">Hosting</a>
                    <ul>
                        <li><a href="#">Private Server</a></li>
                        <li><a href="#">Managed Hosting</a></li>
                    </ul>
                </li>
                <li><a href="#">Domains</a></li>
                <li><a href="#">Websites</a></li>
            </ul>
        </li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

Options

Property Default Type Description
maxWidth 980 int Resolution on which to show the mobile menu, and hide the regular.
labels {close: 'Close', next: 'Next'} object You can cusomize your own text for close and next links.


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

  • JQuery MobileNav

  • LayerNav

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