Animated menus on jQuery [Part 2]

Based on this translation.

On one of the current projects, we wanted to add an effect to the menu icons - elevating at the moment of mouse hovering. I experimented using the animate effect built into jquery on two types of icons: with reflections and with shadows.


')
Watch the demo
Download

Both HTML and CSS are fairly simple and have a structure similar to regular navigation panels and menus on the Internet (not to litter the topic, I did not include examples of HTML / CSS code here, but you can watch it in the demo or in the downloaded files - link below).

In short, using JS, we add a reflection / shadow to each <li> element. Then we change the position with the animation effect, and also change the transparency of these added elements and the icons themselves from the menu at the time of mouse-over.

I added .stop () to avoid lining up any event queue in the event of a quick mouse move over and over the navigation bar.

// Begin jQuery

$( document ).ready( function () {

/* =Reflection Nav
-------------------------------------------------------------------------- */

// Append span to each LI to add reflection

$( "#nav-reflection li" ).append( "<span></span>" );

// Animate buttons, move reflection and fade

$( "#nav-reflection a" ).hover( function () {
$( this ).stop().animate({ marginTop: "-10px" }, 200);
$( this ).parent().find( "span" ).stop().animate({ marginTop: "18px" , opacity: 0.25 }, 200);
}, function (){
$( this ).stop().animate({ marginTop: "0px" }, 300);
$( this ).parent().find( "span" ).stop().animate({ marginTop: "1px" , opacity: 1 }, 300);
});

/* =Shadow Nav
-------------------------------------------------------------------------- */

// Append shadow image to each LI

$( "#nav-shadow li" ).append( '<img class="shadow" src="images/icons-shadow.jpg" width="81" height="27" alt="" />' );

// Animate buttons, shrink and fade shadow

$( "#nav-shadow li" ).hover( function () {
var e = this ;
$(e).find( "a" ).stop().animate({ marginTop: "-14px" }, 250, function () {
$(e).find( "a" ).animate({ marginTop: "-10px" }, 250);
});
$(e).find( "img.shadow" ).stop().animate({ width: "80%" , height: "20px" , marginLeft: "8px" , opacity: 0.25 }, 250);
}, function (){
var e = this ;
$(e).find( "a" ).stop().animate({ marginTop: "4px" }, 250, function () {
$(e).find( "a" ).animate({ marginTop: "0px" }, 250);
});
$(e).find( "img.shadow" ).stop().animate({ width: "100%" , height: "27px" , marginLeft: "0px" , opacity: 1 }, 250);
});

// End jQuery

});

* This source code was highlighted with Source Code Highlighter .

Please note that for the sake of this quick demo, I did not care about the support in IE6.

PS
This example does not require jQuery UI and will also work on pure jQuery. But in the demo by reference and in the files to download - I left the UI script for those who want to play with an animated change of text, background, borders or the surrounding color .