super cool easing and hoverIntent navigation with jQuery

Make your navigation a bit more flashy with this plugin… using easing and hoverIntent, customise the rollover colours, easing method and duration…
View the demo for an example…

 

 

Include in the head of your document:

HTML:

CSS:

ul.nav {list-style:none; margin:20px; width:300px; font-size:10px; font-family:Arial, Helvetica, sans-serif; font-weight:bold}
ul.nav li {position:relative; border-bottom:1px solid #333; display:block; height:30px; overflow:hidden}
ul.nav li a {position:relative; color:#fff; text-decoration:none; display:block; height:20px; padding:10px 0 0 10px; z-index:100; text-transform:uppercase}

Initialise the Plugin:


$(function(){

$('.nav1').flashyNav({
rolloverColor: '#5400ff',   //the default color of the rollover element
rolloverDuration: 1000, //the default duration for the rollover
easingMethod: 'easeInOutQuint'  //easing method used for animation
});

});



Leave a comment