Как сделать так что бы когда двигаемся по диагонали активное меню не закрывалось?

Question

[Ruslan Danilov]

Здравствуйте!
Можете помочь пожалуйста сделать такую задачу.
Есть меню, и при наведении открывается с права под меню. Но нам нужно вести мишку строго по горизонтали что бы оставаться на том меню что мы открыли.

Но вот когда мы хотим быстро переместится на под меню в самый низ по диагонали, то он открывает другое главное меню

Comments

[Froggyweb]

Использовать js. для выставления класса show. при потере hovera делать сеттаймаут и убирать класс show

[Ruslan Danilov]

Froggyweb, Спасибо за направление. Сейчас попробую

[maxim]

над стилями не старался(время нема) сделай сам пж

<div id="menu-l">
  <div id="hover-menu">
    <h1>Препараты</h1>
    <img src="arrow.png" id="img-menu">
  </div>
<div id="meni-list">
  <h4>23232</h4>
  <h4>23232</h4>
  <h4>23232</h4>
  <h4>23232</h4>
</div>
</div>

стили:

#menu-l {
display: block;
height: 250px;
width: 300px;
}
#hover-menu {
float: left;
font-family: Arial, Helvetica, sans-serif;
display: flex;
border-style: solid;
border-width: 3px;
width: 300px;
height: 80px;
}
#hover-menu:hover {
cursor: pointer;
}
#img-menu {
max-width: 50px;
max-height: 50px;
margin-bottom: auto;
margin-left: auto;
margin-top: auto;
margin-right: 10px;
}
#meni-list {
display: none;
position: relative;
}

js:

let menuh = document.getElementById('hover-menu');
let menul = document.getElementById('meni-list');
let menua = document.getElementById('img-menu');

menuh.addEventListener("mouseenter",function(e) {
menul.style.display = "block";

}); 
menuh.addEventListener('mouseout',function(e) {
    menul.style.display = "none";
    });

всё

Answer 1

[Alex]

Тут два варианта. Простой и сложный.
Простой заключается в том, что вы делаете небольшую задержку перед тем как закрыть под меню.

Сложный — определять направление движения курсора. И если он двигается в сторону подменю — не закрывать его.

Ссылки по теме:
https://habr.com/ru/post/171905/
https://webformyself.com/uluchshennoe-peremeshheni...

Comments

[Ruslan Danilov]

Спасибо! То что нужно!)