August 5, 2009 at 20:58Animated Menus in jQuery [Part 2]
- Transfer
Based on this translation.
On one of the current projects, we wanted to add an effect to the menu icons - raising at the moment of mouse hover. I experimented using the animate effect built into jquery on two types of icons: with reflections and with shadows.
We watch the demo
Download
Both HTML and CSS are quite simple and have a structure similar to the usual navigation panels and menus on the Internet (in order not to clutter up the topic, I did not include the HTML / CSS code of the examples here, but you can see it in the demo or in the downloaded files - link below).
In short, using JS we add reflection / shadow to each 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 hover.
I added .stop () to avoid building any event queue in case of a quick mouse movement here and there on the navigation bar.
I draw your attention to the fact that for the sake of this quick demo, I did not care about support in IE6.
PS
This example does not require jQuery UI and will also work on pure jQuery. But in the demo by the link and in the files to download - I left the UI script for those who want to play with an animated change in text, background, borders or surrounding color .
On one of the current projects, we wanted to add an effect to the menu icons - raising at the moment of mouse hover. I experimented using the animate effect built into jquery on two types of icons: with reflections and with shadows.
We watch the demo
Download
Both HTML and CSS are quite simple and have a structure similar to the usual navigation panels and menus on the Internet (in order not to clutter up the topic, I did not include the HTML / CSS code of the examples here, but you can see it in the demo or in the downloaded files - link below).
In short, using JS we add reflection / shadow to each element
I added .stop () to avoid building any event queue in case of a quick mouse movement here and there on the navigation bar.
// Begin jQuery
$(document).ready(function() {
/* =Reflection Nav
-------------------------------------------------------------------------- */
// Append span to each LI to add reflection
$("#nav-reflection li").append("");
// 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('
');
// 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.I draw your attention to the fact that for the sake of this quick demo, I did not care about support in IE6.
PS
This example does not require jQuery UI and will also work on pure jQuery. But in the demo by the link and in the files to download - I left the UI script for those who want to play with an animated change in text, background, borders or surrounding color .