Responsive Push Menu Plugin For jQuery - uNav

File Size: 47.3 KB
Views Total: 4762
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Responsive Push Menu Plugin For jQuery - uNav

uNav is a simple-to-use jQuery responsive menu plugin that automatically transforms the regular dropdown menu into a push menu with off-canvas style on mobile and tablet devices. Smooth animations based on CSS3 transitions and transforms.

How to use it:

1. Load the main stylesheet style.unav.css in the document's head section.

<link rel="stylesheet" href="style.unav.css">

2. Create a normal site navigation as follows:

<div id="navigation">
  <button>
    <span>Toggle menu</span>
  </button>

  <nav>
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <div>
      <a href="#">Link 3</a>
      <div>
        <a href="#">Link 3.1</a>
        <a href="#">Link 3.2</a>
        <a href="#">Link 3.3</a>
        <a href="#">Link 3.4</a>
        <a href="#">Link 3.5</a>
      </div>
    </div>
    <a href="#">Link 4</a>
  </nav>
</div>

3. Load jQuery JavaScript library and the JavaScript file jquery.unav.js at the end of the document.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="jquery.unav.js"></script>

4. Initialize the responsive menu by calling the function on the top container. Done.

$(function(){
  $('#navigation').uNav();
});

This awesome jQuery plugin is developed by Ins-V. For more Advanced Usages, please check the demo page or visit the official website.