0

https://codepen.io/Dasha_Novikova/pen/mdyOwXN

Добрый вечер. У меня есть выпадающее меню при hover. Как правильно сделать выпадающее меню на всю ширину?(как на фото). Если его делать, так как и предыдущие, то проблема в том что нужно будет ему задавать большую ширину, а оно на позиционировании и при адаптации будут большие проблемы (или нет?)).

введите сюда описание изображения

Я решила вынести его к обертке, чтобы не нужно было указывать ширину в пикселях, а указать в процентах и оно без проблем позиционировалось бы так как нужно.

Но теперь проблема, как сделать его активным при hover?

Нашла что-то на js, но оно меню отображает, но когда пытаюсь навести мышку на область меню, оно пропадает.

$('.class').hover(
    function(){
        $('.drop-down__mega-menu').css('display','block');
    }
);

Подскажите как правильно и лучше все это делают?

2 ответа 2

1

Вы с выпадашкой потеряли связь, когда вывели её из родителя. Теперь лучше так (через opacity будет без скачков всяких):

<li class="drop__down-menu" id="page-link">
    <a class="drop__down-link" href="#">Pages</a>
</li>

.drop-down__mega-menu{
  opacity: 0;
  pointer-events: none
}


$('#page-link').mouseover(function () {
  $('.drop-down__mega-menu').css({
    'opacity': 1,
    'pointer-events': 'auto'
  });
});

$('.drop-down__mega-menu').mouseleave(function () {
  $(this).css({
    'opacity': 0,
    'pointer-events': 'none'
  });
});

$('.menu__header-list li:not(#page-link)').mouseover(function () {
  $('.drop-down__mega-menu').css({
    'opacity': 0,
    'pointer-events': 'none'
  });
});
1

Основная проблема в том что у вас селектор .top-search-form input из-за паддингов вылазит за пределы родительского контейнера ширина которого равна 1170px. Чтобы применить падинги для селектора .top-search-form input и избежать данной проблемы вам нужно использовать свойство box-sizing: border box (по умолчанию content-box).

border box - изменяет режим расчёта ширины элемента на описанный выше: теперь ширина элемента включает и рамку, и внутренние отступы и, собственно, ширину содержания самого элемента.

  .top-search-form input {box-sizing: border-box;}

Что касается ховера для выпадающего меню вы можете ставить задержку через css свойство transition.

  .drop__down-list:hover { transition-delay: 0s; }
  .drop__down-list { transition-delay: 0.3s; }

Ваш ответ

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

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