Какой самый легкий способ сделать это с помощью jQuery?

Question

У меня есть простая строка меню с эффектом наведения:

http://www.bridgecitymedical.com/

Теперь я добавляю подменю.Я хотел бы (при наведении курсора на одну вкладку), div скользит вниз со всеми подопциями внутри для этого соответствующего div.Я использую WordPress, так что отображать содержимое так же просто, как использовать встроенную функцию, но как лучше использовать эффект выпадающего меню?

Вот изображение того, что я намереваюсь:

Я подумал, что мог бы создать div такого размера, который вложен в каждую вкладку, а затем использовать jQuery для анимации его размеров наружу, например:

$('.menu').hover(
  function () {
    $(this).animate ... etc
  }, 
  function () {
    $(this).animate ... etc
  }
);

Но я бы закончилс большим количеством глупых дивов вокруг, не будет очень чистым.Есть предложения?

Answer 1

этот способ очень прост и эффективен.

var speed = 130; // milliseconds
$('.menu li').hover(function(e) {
    $(this).find('div').slideDown(speed);
}, function(e) {
    $(this).find('div').slideUp(speed);
});

Если вы хотите, чтобы он скользил вниз и одновременно, тогда вы можете использовать show() и hide() вместо этого, и он автоматически сделает это за вас.

Редактировать: Для вашего выпадающего элемента div попробуйте добавить margin-left, равный ширине изображения логотипа.

Edit 2: Осторожно, поместив div вне ul, потому что теперь, когда вы пытаетесь навести курсор на div, он вызывает событие mouseleave (blur) и заставляет div скользить вверх.

Попробуйте это обходной путь (или что-то в этом роде):

var divEntered = false, open, close;
var closeFunction = function() {
    $('.sti-subitem').slideUp(150, function() {
        // set closed flag
    });
};
$('.sti-menu').hover(function() {
    $('.sti-subitem').slideDown(200);
}, function() {
    close = setTimeout(closeFunction, 600);
});

$('.sti-subitem').mouseenter(function() {
    clearTimeout(close);
});

$('.sti-subitem').mouseleave(function() {
    close = setTimeout(closeFunction, 600);
});