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

Question

Максим Воронков @Voolyman

Делаю простые сайты за короткие сроки

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

Как реализовать юзабильное 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();
});

Вопрос задан более трёх лет назад
274 просмотра

3 комментария

Подписаться 2 3 комментария

Николай Чуприк @choupa

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

Написано более трёх лет назад
Максим Воронков @Voolyman Автор вопроса

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

Написано более трёх лет назад
Николай Чуприк @choupa

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

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

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

Написано более трёх лет назад

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

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

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

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

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

ilanagrk

Войдите на сайт