Как реализовать юзабильное hover меню?

Question

[Максим Воронков]

Как реализовать юзабильное hover меню, как на сайте: www.only.ru На данном сайте есть дополнительная задержка, когда мышка в черной полосе, а при клике вне черной полосы субменю скрывается.

$('.navigation li').hover(function() {
      $(this).find(".sub-catalog").clearQueue().delay(50).slideDown();
    }, function() {
      $(this).find(".sub-catalog").clearQueue().delay(800).slideUp();
});

Comments

[Николай Чуприк]

Ну так, в чём вопрос, вы же всё сами написали.

[Максим Воронков]

Николай Чуприк: В данном коде, задержка происходит только на элементе .sub-catalog. А хотелось бы дополнить условиями:
1. Если мышка находится на черной полосе (как на www.only.ru)
2. При клике вне черной полосы, суб меню сразу скрывалось
3. При наведении на другой элемент li задержка не работала

[Николай Чуприк]

Я вижу тут два дела:

1. Надо просто правильно расписать селекторы и развесить события по элементам. Есть в этом у вас затруднения или вопрос или же именно в:

2. Реализовать задержку. Если так, то лучше реализовывать задержку и анимацию не в коде. На мой взгляд, лучше такую анимацию перенести в CSS, т.к. это относится скорее к стилю, а не к поведению элементов. В CSS есть все возможности для этого (см. transition). А в коде только добавлять/убирать классы, соответствующие видимости/невидимости субменю.