Cool Nav Hover Interaction With jQuery - Navimation

Navimation is a jQuery plugin that adds an animated, interactive underline effect to menu items when hovering. 

How to use it:

1. Load the Navimation plugin after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/navimation.js"></script>

2. Initialize the Navimation on the nav menu and create your own animations as follows:

<ul class="parent">
  <li class="item">ITEM A</li>
  <li class="item">ITEM B</li>
  <li class="item">ITEM C</li>
  <li class="item">ITEM D</li>
</ul>

navimation({
  parent: $("ul"),
  item: $("li"),
  event : "mouseenter" ,
  navimationTag: {
    background: "unset",
    id: "navimation",
    height: "2px",
    timeTranslate: "0.5s",
    timeFunctionTranslate: "ease-out",
    timeHide: "0.5s",
    timeFunctionHide: "linear",
    css: {
      "background-image": "linear-gradient(90deg, rgba(36,0,0,0) 0%, rgba(142,8,8,1) 30%, rgba(147,8,8,1) 70%, rgba(255,0,0,0) 100%)",
    },
    attr: {
      "data-id": "1234",
    },
  },
});

---

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