При наведении на nav ссылку должен появляться блок с меню, при перемещении курсора с nav на страницу он должен меню должно плавно затухать, но при наведении на него вновь должно быть активным. Не знаю как это называется)).
Подскажите пожалуйста как это называется или как реализуется.
<header>
<!-- <img src="assets/img/header-men.png" alt="" class="header-men"> -->
<!--<div class="ave">AVE</div>-->
<div class="banner-header">
SHOP MEN'S COLLECTION
</div>
<div class="nav-choice">
<div class="nav-choice-content">
<div class="nav-left-menu">
<b style="font-size: 12px;">CASUALS</b>
<li class="nav-content-li" style="margin-top: 34px;"><a href="">Jackets</a></li>
<li class="nav-content-li"><a href="" class="nav-content-a">Hoodies & Sweershirts</a></li>
<li class="nav-content-li"><a href="" class="nav-content-a">Polo shirts</a></li>
<li class="nav-content-li"><a href="" class="nav-content-a">Sportswear</a></li>
<li class="nav-content-li"><a href="" class="nav-content-a">Trousers & Chinos</a></li>
<li class="nav-content-li"><a href="" class="nav-content-a">T-shirts</li></a></div>
<div class="nav-right-menu" style="margin-left: 90px;">
<b style="font-size: 12px;">FORMAL</b>
<li class="nav-content-li" style="margin-top: 34px;"><a href="">Jackets</a></li>
<li class="nav-content-li"><a href="" class="nav-content-a">Shirts</a></li>
<li class="nav-content-li"><a href="" class="nav-content-a">Suits</a></li>
<li class="nav-content-li"><a href="" class="nav-content-a">Trousers</a></li>
</div>
</div>
<div class="nav-choice-block">
<div class="sale">AUTUMN SALE!</div>
<div class="up">UP TO 50% OFF</div>
</div>
</div>
<div class="top-bar">
<div class="top-bar-content">
<div class="GBP dark ">Currently: GBP</div>
<div class="top-bar-content-auto">
<div class="reg dark">Register</div>
<div class="reg dark ">Sign in </div>
</div>
<div class="basket blue"><img src="assets/img/basket.png" style="margin-right: 13px; height: 13px;" alt=""> empty </div></div>
</div>
</div>
<div class="nav-parent">
<nav>
<li class="nav-li">WOMENS </li>
<li class="nav-li">MENS</li>
<li class="nav-li">THE BRAND</li>
<li class="nav-li">LOCAL STORES</li>
<li class="nav-li">LOOK BOOK</li>
</nav>
<div class="search">
<input type="text" class="search-input" placeholder="Search..">
<img src="assets/img/search.png" class="searching" alt="">
</div>
</div>
</header>
-html
.nav-choice{
position: absolute;
height: 549px;
width: 466px;
box-shadow: 0 0 5px 10px rgba(122,122,122,0.04);
background-color: #fff;
display: flex;
flex-direction: column;
padding: 31px;
position: absolute;
opacity: 0;
z-index: -12;
transition: opacity 2s;
}
.nav-choice.opa1{
opacity: 1;
}
let nav = document.querySelector('nav');
let navLi = document.querySelectorAll('.nav-li');
let navBox = document.querySelector('.nav-choice');
const topCoord = nav.getBoundingClientRect().top + nav.clientHeight + 1;
let leftCoord = nav.offsetLeft,
likes = document.querySelectorAll('.like'),
likeParent = document.querySelector('#Items');
function prepare(a){
navBox.style.zIndex = '1';
navBox.classList.add('opa1');
navBox.style.left = `${a}px`;
navBox.style.top = `${topCoord}px`;
}
navBox.addEventListener('mouseover', function(){
navBox.classList.add('opa1');
});
navBox.addEventListener('mouseout', function(e){
navBox.classList.remove('opa1');
if(event.target!=navBox){
setTimeout(function(event){
navBox.style.zIndex = '-12';
},2000);
else{
while(event.target==navBox){
navBox.classList.add('opa1');
navBox.style.zIndex = '1';
}
}
}
;
// while(!(e.target.classList.contains('nav-choice'))){
// setTimeout(function(){navBox.style.display = 'none'},2000);
// }
});
nav.addEventListener('mouseout', function(event){
navBox.classList.remove('opa1');
// setTimeout(function(event){
// if(event.target!=navBox){
// navBox.style.zIndex = '-12';
// }
// },2000);
});
nav.addEventListener('mouseover', function(event){
for(let i = 0; i < navLi.length; i++){
if(event.target==navLi[i]){
prepare(navLi[i].offsetLeft);
}
}
});
Простой
