Responsive Navigation Menu

Great and easy to use responsive and multi-level navigation menu
Responsive navigation menu plugin helps you to create menu which transforms on defined resolution to mobile menu.
The Responsive menu can contain multi level dropdown menus. This plugin is suitable for use in different web projects. With the existing options you can configure the menu according to your needs with minimal effort. The menu can be positioned horizontally (e.g. top full width menu) or vertically like a sidebar menu. By default the dropdown menu is activated on hover, but if you want you can set it to open on click too. You can define different resolution on which the mobile menu will be activated. You can also put many responsive menus in one page.
For the whole functionality of Responsive Navigation Menu, see documentation.

How To Use

1. Load jQuery and include Responsive Navigation Menu plugin files
<link href="dist/responsive-nav.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery.js" type="text/javascript"></script>
<script src="dist/responsive-nav.min.js" type="text/javascript"></script>
2. Set up your HTML
<nav id="nav-menu">
    <div class="label-menu">menu</div>
    <div>
        <ul>
            <li class="dropdown">
                <a href="#"><span>item First Level 1</span></a>
                <div>
                    <ul>
                        <li><a href=""><span>item Second Level 1.1</span></a></li>
                        <li><a href=""><span>item Second Level 1.2</span></a></li>
                        <li><a href=""><span>item Second Level 1.3</span></a></li>
                    </ul>
                </div>
            </li>
            <li><a href="#"><span>item First Level 2 </span></a></li>
            <li><a href="#"><span>item First Level 3 </span></a></li>
            <li><a href="#"><span>item First Level 4 </span></a></li>
        </ul>
    </div>
</nav>
3. Call the plugin
<script type="text/javascript">
    $(document).ready(function() {
        $("#nav-menu").responsiveNav();
    });
</script>

Browser Support

 
9+
 
 
3.5+
 
10+
 
4+
 
7+

Dependecies

Get the latest jQuery library. Minumum compatibile jQuery version is 1.7.0 version.

Examples

Multi level dropdown menu
Add a 
dropdown
class to the list item that has a dropdown menu.
<nav id="nav-menu">
    <div class="label-menu">menu</div>
    <div>
        <ul>
            <li class="dropdown">
                <a href=""><span>item First Level 1</span></a>
                <div>
                    <ul>
                        <li class="dropdown">
                            <a href="javascript:void(0)"><span>item Second Level 1.1</span></a>
                            <div>
                                <ul>
                                    <li class="dropdown">
                                        <a href="javascript:void(0)"><span>item 1.1.1</span></a>
                                        <div>
                                            <ul>
                                                <li><a href=""><span>item 1.1.1.1</span></a></li>
                                                <li><a href=""><span>item 1.1.1.2</span></a></li>
                                                <li><a href=""><span>item 1.1.1.3</span></a></li>
                                            </ul>
                                        </div>
                                    </li>
                                    <li><a href=""><span>item 1.1.2</span></a></li>
                                    <li><a href=""><span>item 1.1.3</span></a></li>
                                </ul>
                            </div>
                        </li>
                        <li><a href="#"><span>item Second Level 1.2</span></a></li>
                        <li><a href="#"><span>item Second Level 1.3</span></a></li>
                    </ul>
                </div>
            </li>
            <li><a href="#"><span>item First Level 2 </span></a></li>
            <li><a href="#"><span>item First Level 3 </span></a></li>
        </ul>
    </div>
</nav>
Call the Responsive navigation menu plugin
<script type="text/javascript">
    $(document).ready(function() {
        $("#nav-menu").responsiveNav();
    });
</script>
View demo - Multi level dropdown menu
Activate on custom resolution
By default mobile menu activates at 767px viewport width
<script type="text/javascript">
    $(document).ready(function() {
        $("#nav-menu").responsiveNav({
            activateOnWidth:500
        });
    });
</script>
View demo - Activate on custom resolution
Open dropdown menu on click
Default is false
true - dropdown menu opens on click
false - dropdown menu opens on hover
<script type="text/javascript">
    $(document).ready(function() {
        $("#nav-menu").responsiveNav({
            openSubmenuOnClick: true,
        });
    });
</script>
View demo - Open dropdown menu on click
Layout - horizontal, vertical
Default is horizonal
<script type="text/javascript">
    $(document).ready(function() {
        $("#nav-menu").responsiveNav({
            type: 'horizontal',
        });
    });
</script>
or for vertical
<script type="text/javascript">
    $(document).ready(function() {
        $("#nav-menu").responsiveNav({
            type: 'vertical',
        });
    });
</script>
View demo - Layout - horizontal, vertical
Off canvas mobile menu
<script type="text/javascript"> 
    $(document).ready(function() { 
        $("#nav-menu").responsiveNav({ 
            offCanvas: true, 
        });
    });
</script>
View demo - Off canvas mobile menu
Github Download Documentation