My navigation bar has a unique feature - the subnav expands to fullscreen on hover, while all other subnavs close. However, I encountered an issue with the close button functionality. When clicked, the subnav fades out but then immediately fades back in.
I suspect that this behavior is due to the close button being located in the same hover div that triggers the subnav fade-in effect. Is there a way to override this using JavaScript?
$('li.menu-item-has-children').hover(function () {
$('ul.dropdown-menu-main', this).fadeIn('slow');
$(this).parent().children().not(this).find('ul.dropdown-menu-main').fadeOut();
});
$('.close').click(function () {
$('ul.dropdown-menu-main').fadeOut('fast');
});* {
padding:0;
margin:0;
}
ul, ul li {
list-style:none;
padding:0;
margin:0;
}
li {
display: inline-block;
position: relative;
margin-right:20px !important;
}
ul.dropdown-menu-main {
display:none;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100vh;
background:black;
z-index:-1;
padding:30px 0;
}
ul.dropdown-menu-main li {
color:white;
}
.close {
position:absolute;
top:70px;
left:0px;
z-index:99;
color:#aaaaaa;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="menu-item-has-children">
<a href="#">Main 1</a>
<ul class="dropdown-menu-main">
<div class="close">
close
</div>
<li>Sub 1</li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#">Main 2</a>
<ul class="dropdown-menu-main">
<div class="close">
close
</div>
<li>Sub 2</li>
</ul>
</li>
</ul>