По мотивам этого перевода.
На одном из текущих проектов мы хотели добавить эффект на иконки меню — приподнимание в момент наведения мышкой. Я поэкспериментировал, используя встроенный в jquery эффект animate, на иконках двух типов: с отражениями и с тенями.

Смотрим демо
Скачать
Как HTML, так и CSS достаточно просты и имеют структуру, аналогичную обычным навигационным панелям и меню в интернете (чтобы не захламлять топик, я не стал включать сюда HTML/CSS код примеров, но вы можете посмотреть его в демо или в скачанных файлах — ссылка ниже).
Вкратце, с помощью JS добавляем отражение/тень каждому элементу <li>. Потом изменяем позицию с эффектом анимации, а также меняем прозрачность этих добавленных элементов и самих иконок из меню в момент наведения мыши.
Я добавил .stop(), чтобы избежать выстраивания любой очереди событий в случае быстрого перемещения мышки туда сюда по навигационной панели.
Обращаю внимание, что ради данной быстрой демки, я не стал заботиться о поддержке в IE6.
PS
Данный пример не требует jQuery UI и будет также работать на чистом jQuery. Но в демо по ссылке и в файлах к загрузке — я оставил скрипт UI для тех, кто захочет поиграть с анимированным изменением текста, фона, границ или окружающего цвета.
На одном из текущих проектов мы хотели добавить эффект на иконки меню — приподнимание в момент наведения мышкой. Я поэкспериментировал, используя встроенный в jquery эффект animate, на иконках двух типов: с отражениями и с тенями.

Смотрим демо
Скачать
Как HTML, так и CSS достаточно просты и имеют структуру, аналогичную обычным навигационным панелям и меню в интернете (чтобы не захламлять топик, я не стал включать сюда HTML/CSS код примеров, но вы можете посмотреть его в демо или в скачанных файлах — ссылка ниже).
Вкратце, с помощью JS добавляем отражение/тень каждому элементу <li>. Потом изменяем позицию с эффектом анимации, а также меняем прозрачность этих добавленных элементов и самих иконок из меню в момент наведения мыши.
Я добавил .stop(), чтобы избежать выстраивания любой очереди событий в случае быстрого перемещения мышки туда сюда по навигационной панели.
// 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.
Обращаю внимание, что ради данной быстрой демки, я не стал заботиться о поддержке в IE6.
PS
Данный пример не требует jQuery UI и будет также работать на чистом jQuery. Но в демо по ссылке и в файлах к загрузке — я оставил скрипт UI для тех, кто захочет поиграть с анимированным изменением текста, фона, границ или окружающего цвета.