Cool Nav Hover Interaction With jQuery - Navimation
File Size: | 5.01 KB |
---|---|
Views Total: | 1209 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.