Что сделать, чтобы выпадающее меню заработало?

Question

[boga-net]

Здравствуйте. Делаю дропдаун меню. При наведении на одну ссылку - появляется выпадающее меню, но скрывается оно с задержкой, примерно в 1 сек после того, как увести мышь. При наведении на другие ссылки с выпадающем меню, новое выпадающее появляется, а прежнее резко скрывается. Поэтому, если делать его на CSS, то при наведении на другие ссылки, предыдущие не будут скрываться моментально, а с задержкой, вследствие чего наезжают друг на друга.

Вот чисто на css

https://codepen.io/Span4ev/pen/NzEwar
Может здесь что-то допилить на jquery, чтобы ссылки сразу скрывались

Вот с использованием jQuery

https://codepen.io/Span4ev/pen/zaMPEj?editors=1010

Здесь не могу понять, как скрыть выпадающее меню после наведения. Пробовал с сеттаймаутом, но вышла шляпа. То есть всё работает, но после того, как увести мышь, последнее выпадающее меню не скрывается. Или что-то допилить здесь ? Но я пробовал разные варианты и уже обессилел. Может какое-то условие с event.target ? У меня не получилось..

Надеюсь на вашу помощь. Спасибо

Answer 1

[Владимир Проскурин]

Нужно убрать у .menu-wrapper nav ul li.dropdown .dropdown-menu
transition-delay: 1s;
Одна секунда, от того такая задержка.
UPD: Но у вас появится вторая проблема, это то, что если попытаться навести на раскрытые пункты, меню закрывается. Тут нужно сделать так, чтобы dropdown-menu было ближе к ссылке меню, чтобы между ними не было разрыва, в который может попасть мышка и уйти :hover

Comments

[boga-net]

transition-delay: 1s; это как раз для того, чтобы при наведении меню появлялось мгновенно, но скрывалось с задержкой.

Но у вас появится вторая проблема, это то, что если попытаться навести на раскрытые пункты, меню закрывается.

Именно ) Долго с этим борюсь

ут нужно сделать так, чтобы dropdown-menu было ближе к ссылке меню, чтобы между ними не было разрыва

Думал об этом, но не понял, как это реализовать. По идее, если бы у ссылки был padding, достающий до выпадающего меню, то так можно было сделать. Но в примере у ссылки нет padding или line-height
Выпадающее приходится позициниоровать с абсолютом и при наведении, оно съезжает сверху вниз, так что образуется отступ между ними

[Владимир Проскурин]

boga-net, вот так мне кажется круче https://codepen.io/anon/pen/gKQooR

[boga-net]

Владимир Проскурин, Да, так работает, но я учусь и повторяю один шаблон, и там есть эта задержка перед исчезновением меню. И вот не хочу сдаваться, пытаясь добиться такого же эффекта.

Может как-то на jquery соорудить нечто наподобие такого условия :

let menuHoverActive = false;
	let dropMenuHoverActive = false;
	let drop 	= $('.dropdown');
	let dropMenu = $('.dropdown-menu');

drop.on('mouseenter', function() {
  dropMenu.removeClass(active);
  $(this).find(dropMenu).addClass(active);
});

dropMenu.on('mouseenter', function() {
  menuHoverActive = true;
});

dropMenu.on('mouseleave', function() {
  menuHoverActive = false;
});

drop.on('mouseleave', function() {
  if (!menuHoverActive) {
    setTimeout(function() {
      dropMenu.removeClass(active);
    }, 1000)
  }

});

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

[Владимир Проскурин]

boga-net,

Может как-то на jquery соорудить нечто наподобие такого условия :

Но вы же учитесь? Так не надо делать костыли. Посмотрите, как сделано в том шаблоне, с которого вы делаете.

[boga-net]

Владимир Проскурин, https://www.templatemonster.com/demo/64346.html

К сожалению, я не знаю как.

[boga-net]

Владимир Проскурин, не могу понять, почему здесь пропадает выпадающее меню, если водить курсором по ссылке, но не покидать её

drop.on('mouseenter', function() {
  dropMenuHoverActive = true;
  if (dropMenuHoverActive) {
    dropMenu.removeClass(active).not( $(this) );
    $(this).find(dropMenu).addClass(active);
  }  
});

drop.on('mouseleave', function() {
  if (!menuHoverActive) {
    setTimeout(function() {
      dropMenu.removeClass(active);
    }, 1000)
  }
  dropMenuHoverActive = false;

});

dropMenu.on('mouseenter', function() {
  menuHoverActive = true;
});

dropMenu.on('mouseleave', function() {
  menuHoverActive = false;
});

[boga-net]

Владимир Проскурин , не могу понять логику

Заводим две переменных и обоим присваиваем false.

При наведении на ссылку - присваиваем true. Меню появляется.
При наведении на выпадающее меню, второй присваиваем true.

Пока обе true - меню не скрывается. Уводим курсор - переменным присваивается false и меню пропадает с задержкой.

Кажется так просто

[boga-net]

https://codepen.io/Span4ev/pen/zaMPEj?editors=0010

[Владимир Проскурин]

boga-net, во я немного наговнокодил https://codepen.io/anon/pen/oyQEdp?editors=1010

[boga-net]

Владимир Проскурин, спасибо, скоро домой приду, посмотрю. Решил прогуляться в аптеку за анальгином и глицином. Это меню меня добъёт))

[boga-net]

Владимир Проскурин, Шикарный "говнокод" ) Отлично, большое вам спасибо за потраченное время и помощь )