Create Cool Navigation Hover Effect Using jQuery - HoverSlippery

File Size: 10.4 KB
Views Total: 4267
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Create Cool Navigation Hover Effect Using jQuery - HoverSlippery

HoverSlippery is a lightweight jQuery plugin which adds cool, animated, customizable hover effects to anchor links of your navigation menu.

See also:

How to use it:

1. Place the jQuery HoverSlippery plugin after jQuery library but before the closing body tag.

<script src="//"></script>
<script src="hoverSlippery.js"></script>

2. Create an inline navigation menu using html unordered list as follows:

<nav class="nav demo">
    <li class="nav__item active"><a href="#">Home</a></li>
    <li class="nav__item"><a href="#">Fashion</a></li>
    <li class="nav__item"><a href="#">Lifestyles</a></li>
    <li class="nav__item"><a href="#">Travels</a></li>
    <li class="nav__item"><a href="#">Music</a></li>
    <li class="nav__item"><a href="#">About us</a></li>
    <li class="nav__item"><a href="#">Contact</a></li>

3. Call the function on the top nav to apply a default hover effect.


4. Customize the hover effect.

  bgColor: '#394264',
  speed: 300,
  radius: '5px',
  border: false,
  borderColor: '#efefef',
  borderTop: 0,
  borderStyle: 'solid',
  borderWidth: '1px',
  borderTopLine: false,
  twiceBorder: false

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