Here’s a small Javascript function which enables animated highlighting effect on the navigation (lavalamp effect) with the help of jquery easing plugin
$.fn.lavalamb = function(ImgPath){
/* ImgPath: Path of the image which you need to animate when you hover over a navigation link
this can be a shadow png image or a pointer image or underline image which you want to animate with a mouseover / mouseout action on a link
Add css class "Highlight" to the node which is currently active, so the image will always be animated back to this node on mouseout
*/
var LeftPos;
$(this).append('<div id="lavalamp"><img src="'+ImgPath+'" alt="" /></div>'); //Appending lavalamb image to the html, this div can be skinned in the css.
$(this).parent().css({position: "relative"}); //setting the position
$("#lavalamp").css({
position: "absolute",top: $(this).height() // These css values can be edited to vertically position the lavalamb image
});
$(this).find("li").hover( //Link hover function
function(){ //Rollover
LeftPos = $(this).offset().left - $(this).parent().offset().left; //calculating the left position
LeftPos = (LeftPos - ($("#lavalamp").width()/2) + ($(this).width()/2)); //calculating the left position
$("#lavalamp").animate({left: LeftPos},{queue:false,duration:700,easing: "easeInQuart"}); //Animating the image from the start position to the current mouseover position
},
function(){
LeftPos = $(this).parent().find("li.Highlight").offset().left - $(this).parent().offset().left; // Getting the position of the highlighted node
$("#lavalamp").animate({left: LeftPos},{queue:false,duration:700,easing: "easeOutQuart"}); //Animating the image back to the start position from the current mouseover position
});
}
And call this function in the html page
<script type="text/javascript"> $("#Navigation").lavalamb("Images/Background/NavShadow.png"); // Navigation is an id of the <UL> list which has navigation nodes </script>
Here’s an example
Example1
