У меня получилось настроить navbar на клик, но не получается переписать этот код под onmouseover.
Помогите, пожалуйста, вот код
document.addEventListener('DOMContentLoaded', () => {
const menuBtns = document.querySelectorAll('.header-for-992px__nav__ul__li_span');
const drops = document.querySelectorAll('.header-for-992px__nav__ul-menu');
menuBtns.forEach(el => {
el.addEventListener('click', (e) => {
let currentBtn = e.currentTarget;
let drop = currentBtn.closest('.header-for-992px__nav__ul__li').querySelector('.header-for-992px__nav__ul-menu');
menuBtns.forEach(el => {
if(el !== currentBtn){
el.classList.remove('activee');
}
});
drops.forEach(el => {
if(el !== drop){
el.classList.remove('grid-header')
}
})
drop.classList.toggle('grid-header')
currentBtn.classList.toggle('activee');
})
})
document.addEventListener('click', (e) => {
if(!e.target.closest('.header-for-992px__nav')){
menuBtns.forEach(el => {
el.classList.remove('activee');
});
drops.forEach(el => {
el.classList.remove('grid-header')
})
}
})
});
// я использую scss e - это элемент, m - модификатор
.header-for-992px{
display: block;
left: 0;
top: -100px;
z-index: 10;
@include e(container){
padding: 15px 0;
display: flex;
}
@include e(nav){
width: 40%;
position: relative;
@include e(ul){
display: flex;
justify-content: space-between;
align-items: center;
padding: 0;
padding: 0 15px;
cursor: pointer;
@include e(li){
list-style: none;
@include m(span){
position: relative;
font-size: 17px;
text-transform: uppercase;
text-decoration: none;
color: $colorNav992px;
padding: 8px;
font-weight: $mediumFontWeight;
&:hover {
color:$red;
}
&::after {
position: absolute;
content: "";
border-bottom: 1px solid $red;
left: 0;
bottom: 0;
width: 100%;
transform: scaleX(0);
transform-origin: right;
transition: transform .6s;
}
&:hover::after {
transform: scaleX(1);
transform-origin: left;
}
}
}
}
@include e(ul-menu){
min-width: 100%;
display: none;
padding-bottom: 10px;
background: $white;
position: absolute;
top: 47px;
left: 2px;
z-index: 2;
cursor:auto;
@include e(li){
position: relative;
list-style: none;
padding: 10px;
cursor:pointer;
&::after{
position: absolute;
bottom: 4px;
left: 9px;
content: '';
width: 35px;
height: 1px;
background: $red;
}
@include e(img){
margin-bottom: 10px;
&:hover {
box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
transition: all .2s linear;
}
}
@include e(a){
text-decoration: none;
color: $black;
text-transform: uppercase;
&:hover{
color: $red;
}
}
}
}
}
@include e(logo){
width: 175px;
@include m(img){
width: 100%;
}
}
@include e(right){
display: flex;
align-items: center;
margin-left: auto;
@include m(img){
cursor: pointer;
width: 24px;
height: 24px;
margin-right: 18px;
}
}
}
.grid-header{
padding: 0;
display:grid;
grid-template-areas:
"m1 m2 m3"
"m4 m5 ."
;
}
.first-li {
grid-area: m1;
}
.second-li {
grid-area: m2;
}
.third-li {
grid-area: m3;
}
.fourth-li {
grid-area: m4;
}
.fifth-li {
grid-area: m5;
}
.activee {
color: $red;
}
<nav class="header-for-992px__nav">
<ul id="nav-main-ul" class="header-for-992px__nav__ul">
<li class="header-for-992px__nav__ul__li">
<span class="header-for-992px__nav__ul__li_span" id="click">home</span>
<ul class="header-for-992px__nav__ul-menu">
<li class="header-for-992px__nav__ul-menu__li first-li">
<div class="header-for-992px__nav__ul-menu__li__img">
<img src="i/menu-h1.jpg" alt="">
</div>
<a href="#" class="header-for-992px__nav__ul-menu__li__a">home 1</a>
</li>
<li class="header-for-992px__nav__ul-menu__li second-li">
<div class="header-for-992px__nav__ul-menu__li__img">
<img src="i/menu-h2.jpg" alt="">
</div>
<a href="#" class="header-for-992px__nav__ul-menu__li__a">home 2</a>
</li>
<li class="header-for-992px__nav__ul-menu__li third-li">
<div class="header-for-992px__nav__ul-menu__li__img">
<img src="i/menu-h3.jpg" alt="">
</div>
<a href="#" class="header-for-992px__nav__ul-menu__li__a">home 3</a>
</li>
<li class="header-for-992px__nav__ul-menu__li fourth-li">
<div class="header-for-992px__nav__ul-menu__li__img">
<img src="i/menu-h4.jpg" alt="">
</div>
<a href="#" class="header-for-992px__nav__ul-menu__li__a">home 4</a>
</li>
<li class="header-for-992px__nav__ul-menu__li fifth-li">
<div class="header-for-992px__nav__ul-menu__li__img">
<img src="i/menu-h5.jpg" alt="">
</div>
<a href="#" class="header-for-992px__nav__ul-menu__li__a">home 5</a>
</li>
</ul>
</li>
<li class="header-for-992px__nav__ul__li">
<span class="header-for-992px__nav__ul__li_span">shop</span>
<ul class="header-for-992px__nav__ul-menu p30 left-100">
<li class="header-for-992px__nav__ul-menu__li-second li-one">
<a href="#" class="header-for-992px__nav__ul-menu__li_a">SHOP LAYOUTS</a>
<ul class="header-for-992px__nav__ul-menu__second__ul">
<li class="header-for-992px__nav__ul-menu__second__ul__li ">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Pagination</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Ajax Load More</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">List View</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Fullwidth Layouts</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Sidebar Layouts</a>
</li>
</ul>
</li>
<li class="header-for-992px__nav__ul-menu__li-second">
<a href="#" class="header-for-992px__nav__ul-menu__li_a">SHOP HEADING</a>
<ul class="header-for-992px__nav__ul-menu__second__ul">
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Small Heading</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Banner Heading</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Dark Heading</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Icon Category</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Mini Category</a>
</li>
</ul>
</li>
<li class="header-for-992px__nav__ul-menu__li-second">
<a href="#" class="header-for-992px__nav__ul-menu__li_a">FILTER LAYOUT</a>
<ul class="header-for-992px__nav__ul-menu__second__ul">
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Top Filter</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Drawer Filter</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Off Canvas Filter</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Brand Filter</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Sticky Filter</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="header-for-992px__nav__ul__li">
<span class="header-for-992px__nav__ul__li_span">featured</span>
<ul class="header-for-992px__nav__ul-menu p30 left-190">
<li class="header-for-992px__nav__ul-menu__li-second">
<a href="#" class="header-for-992px__nav__ul-menu__li_a">PRODUCT TYPES</a>
<ul class="header-for-992px__nav__ul-menu__second__ul">
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Simple</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Variable Color</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Variable Image</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Variable Select</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">External / Affiliate</a>
</li>
</ul>
</li>
<li class="header-for-992px__nav__ul-menu__li-second">
<a href="#" class="header-for-992px__nav__ul-menu__li_a">PRODUCT</a>
<ul class="header-for-992px__nav__ul-menu__second__ul">
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Promo Text</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Trust Sale</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Countdown</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Featured Video</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Sidebar Layouts</a>
</li>
</ul>
</li>
<li class="header-for-992px__nav__ul-menu__li-second">
<a href="#" class="header-for-992px__nav__ul-menu__li_a">SHOP LAYOUTS</a>
<ul class="header-for-992px__nav__ul-menu__second__ul">
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Pagination</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Ajax Load More</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">List View</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Fullwidth Layouts</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Sidebar Layouts</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="header-for-992px__nav__ul__li">
<span class="header-for-992px__nav__ul__li_span">pages</span>
<ul class="header-for-992px__nav__ul-menu p30 left-320">
<li class="header-for-992px__nav__ul-menu__li-second">
<a href="#" class="header-for-992px__nav__ul-menu__li_a">PRODUCT TYPES</a>
<ul class="header-for-992px__nav__ul-menu__second__ul">
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Simple</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Variable Color</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Variable Image</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Variable Select</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">External / Affiliate</a>
</li>
</ul>
</li>
<li class="header-for-992px__nav__ul-menu__li-second">
<a href="#" class="header-for-992px__nav__ul-menu__li_a">PRODUCT</a>
<ul class="header-for-992px__nav__ul-menu__second__ul">
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Promo Text</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Trust Sale</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Countdown</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Featured Video</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Sidebar Layouts</a>
</li>
</ul>
</li>
<li class="header-for-992px__nav__ul-menu__li-second">
<a href="#" class="header-for-992px__nav__ul-menu__li_a">SHOP LAYOUTS</a>
<ul class="header-for-992px__nav__ul-menu__second__ul">
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Pagination</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Ajax Load More</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">List View</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Fullwidth Layouts</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Sidebar Layouts</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="header-for-992px__nav__ul__li">
<span class="header-for-992px__nav__ul__li_span">blogs</span>
<ul class="header-for-992px__nav__ul-menu p30 left-410">
<li class="header-for-992px__nav__ul-menu__li-second">
<a href="#" class="header-for-992px__nav__ul-menu__li_a">PRODUCT TYPES</a>
<ul class="header-for-992px__nav__ul-menu__second__ul">
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Simple</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Variable Color</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Variable Image</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Variable Select</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">External / Affiliate</a>
</li>
</ul>
</li>
<li class="header-for-992px__nav__ul-menu__li-second">
<a href="#" class="header-for-992px__nav__ul-menu__li_a">PRODUCT</a>
<ul class="header-for-992px__nav__ul-menu__second__ul">
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Promo Text</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Trust Sale</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Countdown</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Featured Video</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Sidebar Layouts</a>
</li>
</ul>
</li>
<li class="header-for-992px__nav__ul-menu__li-second">
<a href="#" class="header-for-992px__nav__ul-menu__li_a">SHOP LAYOUTS</a>
<ul class="header-for-992px__nav__ul-menu__second__ul">
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Pagination</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Ajax Load More</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">List View</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Fullwidth Layouts</a>
</li>
<li class="header-for-992px__nav__ul-menu__second__ul__li">
<a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Sidebar Layouts</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>