Как организовать скрытие меню?

192

02 декабря 2018, 07:30

Имеем 2 уровневое меню

Блок1 и Блок2 на скриншоте http://prntscr.com/kp2tvi независимые, Блок2 находится вне Блока1.

Код примерно такой:

$('.bl-1').hover(function() { 
  var childBlock = $('[data-parent="' + $(this).data('children') + '"]'); 
  $(this).addClass('hover'); 
  $(childBlock).css({ 
    'display': 'block' 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="bl-1" data-children="vanny">Ванны</div> 
<div class="bl-2" data-parent="vanny" style="display: none"> 
  <ul> 
    <li>Акриловые</li> 
    ... 
  </ul> 
</div>

Т.е. по ховеру на .bl-1 ему присваивается класс .hover и меняется свойство display у .bl-2

Не могу придумать, как правильно закрыть эти блоки. Нужно, чтобы они закрывлись в случае если курсор покидает .bl-1 в направлениях право/лево/верх (см. скриншот), либо если курсор покидает .bl-2.

Немного запутано объяснил, но надеюсь, что можно понять суть вопроса.

Answer 1

Дичайщий говнокод, но работает.

$('.menu a').bind('mouseenter',function(){ 
  $('.menu a.active').removeClass('active'); 
  $('.item.active').removeClass('active'); 
   
  var dataDropname = $(this).data('dropname'); 
  var posLeft = $(this).offset().left; 
  $('.item[data-drop="'+dataDropname+'"], .menu a[data-dropname="'+dataDropname+'"]').addClass('active'); 
  $('.item[data-drop="'+dataDropname+'"]').css('left',posLeft); 
 
 
  $('.item.active').bind('mouseleave',function(){ 
    $('.menu a.active').removeClass('active'); 
    $(this).removeClass('active'); 
  }); 
});

a { 
  color: #000; 
  text-decoration: none !important; 
} 
 
.nav, .drop { 
  display: block; 
  width: 100%; 
  position: absolute; 
  left: 0; 
  top: 0; 
  right: 0; 
} 
 
.menu { 
  display: block; 
  width: 100%; 
  height: 50px; 
  background: #ddd; 
} 
 
.menu a { 
  display: inline-block; 
  padding: 0 5px; 
  height: 50px; 
  line-height: 50px; 
} 
 
.menu a:hover, .item a:hover { 
  color: red; 
} 
 
.menu a.active { 
  background: #999; 
} 
 
.item { 
  display: none; 
  padding: 10px; 
  background: #999; 
  position: absolute; 
  top: 50px; 
  left: 0; 
} 
 
.item.active { 
  display: inline-block; 
} 
 
.item a { 
  display: block; 
  margin-bottom: 10px; 
} 
 
.item a:last-child { 
  margin-bottom: 0; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="nav"> 
  <div class="menu"> 
    <a href="#" data-dropname="vanny">Ванные</a> 
    <a href="#" data-dropname="nevanny">Не ванные</a> 
    <a href="#">Тут тоже не ванные</a> 
  </div> 
   
  <div class="item" data-drop="vanny"> 
    <a href="#">Обычные</a> 
    <a href="#">Такие</a> 
    <a href="#">Сякие</a> 
    <a href="#">Никакие</a> 
  </div> 
 
  <div class="item" data-drop="nevanny"> 
    <a href="#">Я же</a> 
    <a href="#">Сказал</a> 
    <a href="#">Тут</a> 
    <a href="#">Не ванные</a> 
  </div> 
</div>

А вообще, я бы сделал так, на чистом CSS)

a { 
  text-decoration: none !important; 
} 
 
.menu { 
  display: block; 
  width: 100%; 
  height: 50px; 
  background: #ddd; 
  position: absolute; 
  left: 0; 
  top: 0; 
  right: 0; 
} 
 
.menu a:hover { 
  color: red; 
} 
 
.menu .hover { 
  display: inline-block; 
  position: relative; 
} 
 
.menu .menu-item { 
  display: inline-block; 
  padding: 0 10px; 
  height: 50px; 
  line-height: 50px; 
  color: #000; 
} 
 
.menu .item { 
  display: none; 
  padding: 10px; 
  background: #999; 
  position: absolute; 
  top: 50px; 
  z-index: 1; 
} 
 
.menu .hover:hover .menu-item { 
  background: #999; 
} 
 
.menu .hover:hover .item { 
  display: block; 
} 
 
.menu .item a { 
  display: block; 
  width: 100%; 
  margin-bottom: 10px; 
  color: #000; 
} 
 
.menu .item a:last-child { 
  margin-bottom: 0; 
} 
 
.menu .item a:hover { 
  color: red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="menu"> 
  <div class="hover"> 
    <a class="menu-item" href="#">Ванные</a> 
 
    <div class="item"> 
      <a href="#">Обычные</a> 
      <a href="#">Такие</a> 
      <a href="#">Сякие</a> 
      <a href="#">Никакие</a> 
    </div> 
  </div> 
 
  <div class="hover"> 
    <a class="menu-item" href="#">Не ванные</a> 
     
    <div class="item"> 
      <a href="#">Я же</a> 
      <a href="#">Сказал</a> 
      <a href="#">Тут</a> 
      <a href="#">Не ванные</a> 
    </div> 
  </div> 
   
  <a class="menu-item" href="#">Тут тоже не ванные</a> 
</div>