This time I will share jQuery Plugin and tutorial about Create Cool Navigation Hover Effect Using jQuery – HoverSlippery, hope it will help you in programming stack.
HoverSlippery is a lightweight jQuery plugin which adds cool, animated, customizable hover effects to anchor links of your navigation menu.
How to use it:
1. Place the jQuery HoverSlippery plugin after jQuery library but before the closing body tag.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="hoverSlippery.js"></script> |
2. Create an inline navigation menu using html unordered list as follows:
01 |
<nav class="nav demo"> |
03 |
<li class="nav__item active"><a href="#">Home</a></li> |
04 |
<li class="nav__item"><a href="#">Fashion</a></li> |
05 |
<li class="nav__item"><a href="#">Lifestyles</a></li> |
06 |
<li class="nav__item"><a href="#">Travels</a></li> |
07 |
<li class="nav__item"><a href="#">Music</a></li> |
08 |
<li class="nav__item"><a href="#">About us</a></li> |
09 |
<li class="nav__item"><a href="#">Contact</a></li> |
3. Call the function on the top nav to apply a default hover effect.
1 |
$('.demo').hoverSlippery(); |
4. Customize the hover effect.
01 |
$('.demo').hoverSlippery({ |
06 |
borderColor: '#efefef', |
This awesome jQuery plugin is developed by Hastalavistababy. For more Advanced Usages, please check the demo page or visit the official website.
