0

Имеем 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.

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

1 ответ 1

0

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

$('.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>

Ваш ответ

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

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