Jquery выпадающее меню с эффектами анимации

Прочитать статью Jquery DropDown меню или работа с API

Скачать пакет файлов

Протестировано в

Простое меню

// скрываем все подуровни
$('li ul').hide ();
$('#simple li').hover (
// over
function () {
// отображаем скрытый список
$('ul:first', this).show ();
},
// out
function () {
// скрываем список
$('ul:first', this).hide ();
}
);

Простое меню (1000мс) + стилизация (добавление классов путем jquery)

// скрываем все подуровни
$('li ul').hide ();
// во всех пунктах с подпунктами ищем и добавляем к нему класс arrow (стрелочку)
$('#simpleclass li li:has(li)').find('a:first').addClass ('arrow');
$('#simpleclass li').hover (
// over
function () {
// для красоты li добавим класс с другим фоном
$(this).addClass('active');
// отображаем скрытый список
$('ul:first', this).show (1000);
},
// out
function () {
// нужно убрать добавлений класс
$(this).removeClass('active');
// скрываем список
$('ul:first', this).hide (1000);
}
);

Fade эффект
$('#fade li').hover (
// over
function () {
// отображаем скрытый список
$('ul:first', this).fadeIn ();
},
// out
function () {
// скрываем список
$('ul:first', this).fadeOut();
}
);

Slide эффект

$('#slide li').hover (
// over
function () {
// отображаем скрытый список
$('ul:first', this).slideDown ();
},
// out
function () {
// скрываем список
$('ul:first', this).slideUp ();
}
);

animate и реализация fade эффекта ним

$('#custom li').hover (
function () {
$('ul:first', this).animate ({opacity: "show",duration: 1000});
},
function () {
$('ul:first', this).animate ({opacity: "hide",duration: 1000});
}
);
Сайт управляется системой uCoz