Elastic Active Menu Indicator Plugin With jQuery - ElasticMenu

A simple, lightweight jQuery plugin for creating a fancy horizontal or vertical nav menu that comes with an elastic menu indicator as you navigate between menu items. Heavily based on CSS flexbox, transitions and transforms.

How to use it:

1. Put the jQuery ElasticMenu plugin's files in the webpage which has jQuery library loaded.

<link href="elasticmenu.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="elasticmenu.min.js"></script>

2. Create a normal site nav menu from an html list:

<ul id="example" class="elastic-menu">
  <li class=""><a href="#">Home</a></li>
  <li class=""><a href="">About</a></li>
  <li class=""><a href="">Contact</a></li>
  ...
</ul>

3. Initialize the plugin by calling the function on the html list.

$("#example").elasticMenu();

4. You can customize the elastic by passing the following options as an object to each elasticMenu instance.

$("#example").elasticMenu({

  // or 'vertical'
  direction : "horizontal",

  // background color
  background : "#0d47a1",

  // text color
  color : "white"
  
});

---

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