2

Добрый день. Пытаюсь изобразить меню, при наведении на div вниз выпадает другой div (подменю).

$(document).ready(function() {   
    $('.nav__cli').hover(function() {
      $('.nav__sub_cli').show(); 
          });
    $('.nav__cli').mouseleave(function() {
        $('.nav__sub_cli').hide(); 
        });
 });

Само собой, когда курсор уходит с пункта меню, подменю исчезает. Меню горизонтальное, то есть если мы уводим курсор на соседний пункт или вверх, подменю должно исчезнуть, а если переходим на него - естественно, остаться и исчезнуть, если курсор в сторону уходит уже с блока подменю. Как можно это реализовать?

1
  • вложить nav__sub_cli в nav__cli 15 сен 2016 в 12:06

1 ответ 1

2

На мой взгляд, в идеале делать так, чтобы пункт меню и подменю были внутри одного элемента, на котором в css вешать :hover https://jsfiddle.net/skywave/3kqovnaf/1/

HTML:

<div class="parent">
 <a href="#" class="menu-item">Пункт меню с выпадалкой</a>
 <div class="undermenu">
   <a href="#" class="undermenu-item">Подпункт 1</a>
   <a href="#" class="undermenu-item">Подпункт 2</a>
   <a href="#" class="undermenu-item">Подпункт 3</a>
 </div>
</div>

CSS:

.undermenu {
  display: none;
}
.parent:hover .undermenu {
  display: block;
}

Но если такой возможности нет, то идет как у вас, только при mouseleave надо делать небольшую задержку перед закрытием подменю https://jsfiddle.net/skywave/f5wh52qy/1/

$(document).ready(function(){
    var timeout;
    $(document).on('mouseover', '.menu-item, .undermenu', function(){
    clearTimeout(timeout); // при наведении чистим timeout, чтобы не закрылся
    $('.undermenu').addClass('show');
  });
  $(document).on('mouseleave', '.menu-item, .undermenu', function(){
    timeout = setTimeout(function(){
        $('.undermenu').removeClass('show');
    }, 500);
  });
});
0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.