4 Super Cool jQuery Navigation Hover Animation Plugins: HoverSlippery
Usage
Include the jquery and hoverSlippery.js files in your page.
1 2 | <script src="jquery.min.js" type="text/javascript"></script><script src="hoverSlippery.js" type="text/javascript"></script> |
HTML Structure
You can use the <nav> element as the navigation menu and place a group of unordered lists inside it.
1 2 3 4 5 6 7 8 9 10 11 | <nav class="nav demo"> <ul> <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> </ul></nav> |
Initialize the Plugin
After the page DOM elements have finished loading, initialize the navigation mouse-follow effect plugin using the hoverSlippery() method.
1 | $('.demo').hoverSlippery(); |
Configuration Parameters
The default configuration options for the HoverSlippery plugin are as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $('.demo').hoverSlippery({ bgColor: '#394264', speed: 300, radius: '5px', border: false, borderColor: '#efefef', borderTop: 0, borderStyle: 'solid', borderWidth: '1px', borderTopLine: false, twiceBorder: false， underline:false, overline:false}); |
bgColor: The background color of the capsule.
speed: The animation speed.
radius: The capsule's border radius.
border: Whether to use a border.
borderColor: The border color.
borderTop: The width of border-top.
borderStyle: The style of the border.
borderWidth: The width of the border.
twiceBorder: Whether to use a double-line effect.
underline: Whether to use an underline effect.
overline: Whether to use an overline effect.