I have created a navbar with HTML and selected all of the headers, saving them in a navEl object. After that, I created a function called showNav. This function takes one of the navEl properties as its parameter and shows the content of that navEl element to the user. It also hides it when the user removes their mouse from it.
The problem I am facing is with the last event listener of the function. When I added a mouseleave to the item, it works perfectly when I hover over it the first time. However, the moment I change my navEl to another one, when one is already showing, it stays for 100ms and then disappears again.
I have tried modifying the code slightly and put a clearTimeout function on the item when I am changing the navEl. But the problem, I think, was that my navEl properties and the content are not nested within each other or separated.
Is there any way I could fix this?
HTML code
<header class="navbar navbar-expand-lg d-lg-block d-none ">
<div class="container-fluid">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 d-flex flex-wrap">
<li class="nav-item nav-item-1" id="photo-books">
<a class="nav-link active" href="#">Photo Books</a>
</li>
<li class="nav-item nav-item-1" id="Cards-Stationery">
<a class="nav-link active" href="#">Cards & Stationery</a>
</li>
<li class="nav-item nav-item-1" id="Gifts">
<a class="nav-link active" href="#">Gifts</a>
</li>
<li class="nav-item nav-item-1" id="Wall-Art">
<a class="nav-link active" href="#">Wall Art</a>
</li>
<li class="nav-item nav-item-1" id="Prints">
<a class="nav-link active" href="#">Prints</a>
</li>
<li class="nav-item nav-item-1" id="Home-Decor">
<a class="nav-link active" href="#">Home Decor</a>
</li>
<li class="nav-item nav-item-1" id="Graduation">
<a class="nav-link active" href="#">Graduation</a>
</li>
<li class="nav-item nav-item-1" id="Wedding">
<a class="nav-link active d-xl-block d-none" href="#">Wedding</a>
</li>
<li class="nav-item nav-item-1" id="Calendars">
<a class="nav-link active d-xxl-block d-none" href="#">Calendars</a>
</li>
<li class="nav-item nav-item-1" id="Deals">
<a class="nav-link active" href="#" style="color: #a81719;">Deals</a>
</li>
<li class="nav-item nav-item-1">
<a class="nav-link active d-xxl-block d-none" id="nav-tinyprints" href="#">Tinyprints</a>
</li>
<li class="nav-item nav-item-1 dropdown d-xxl-none d-xl-block">
<a class="nav-link " href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
More +
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li>
<a class="dropdown-item d-xl-none d-block" href="#" id="Wedding2">Wedding</a>
</li>
<li>
<a class="dropdown-item" href="#" id="Calendars2">Calendars</a>
</li>
<li>
<a class="dropdown-item" id="nav-tinyprints" href="#">Tinyprints</a>
</li>
</ul>
</li>
</ul>
<div class="d-xl-none d-block"><i class="fas fa-search"></i></div>
<div class="search-container d-flex align-items-center d-xl-block d-none">
<input class="search-input p-1" type="search" placeholder="Search" aria-label="Search">
<button class="search-button" type="submit" title="search">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</header>
<!-- Start of the Nav Content -->
<div class="nav-content w-100 row">
<div class="col-12 nav-content-header">Photo Books</div>
<div class="col-md-15">
<ul class="navbar-nav me-auto d-flex flex-wrap column-1">
<!-- Column 1 will be added using javascript -->
</ul>
</div>
<div class="col-md-15">
<ul class="navbar-nav me-auto d-flex flex-wrap column-2">
<!-- Column 2 will be added using javascript -->
</ul>
</div>
<div class="col-md-15">
<ul class="navbar-nav me-auto d-flex flex-wrap column-3">
<!-- Column 3 will be added using javascript -->
</ul>
</div>
<div class="col-md-15">
<ul class="navbar-nav me-auto d-flex flex-wrap column-4">
<!-- Column 4 will be added using javascript -->
</ul>
</div>
<div class="col-md-15">
<ul class="navbar-nav me-auto d-flex flex-wrap column-5">
<!-- Column 5 will be added using javascript -->
</ul>
</div>
<div class="d-flex align-items-center justify-content-center gap-5" style="background-color: #fafafb;">
<a class="nav-link" id="nav-tinyprints" href="#">Tinyprints</a>
<a href="#"><img src="./Images/SpoonFlower-logo.png" alt="This is SpoonFlower-logo" width="100px" height="40px"></a>
</div>
</div>
<!-- End of the Nav Content -->
JavaScript code
let navEl = {
'Photo Books' : document.querySelector('#photo-books'),
'Cards & Stationery' : document.querySelector('#Cards-Stationery'),
'Gifts' : document.querySelector('#Gifts'),
'Wall Art' : document.querySelector('#Wall-Art'),
'Prints' : document.querySelector('#Prints'),
'Home Decor' : document.querySelector('#Home-Decor'),
'Graduation' : document.querySelector('#Graduation'),
'Wedding' : document.querySelector('#Wedding'),
'Wedding2' : document.querySelector('#Wedding2'),
'Calendars' : document.querySelector('#Calendars'),
'Calendars2' : document.querySelector('#Calendars2'),
'Deals' : document.querySelector('#Deals'),
}
function showNav(item) {
// Get the corresponding nav-content for each navigation item
let navContent = document.querySelector(".nav-content");
let timeoutId;
item.addEventListener('mouseover', function() {
// Clear any existing timeout
clearTimeout(timeoutId);
// Show the nav-content when mouseover the navigation item
navContent.style.display = "block";
});
navContent.addEventListener('mouseover', function() {
clearTimeout(timeoutId); // Clear the timeout if the mouse moves over the items
const mediumScreenSize = 992;
if (window.innerWidth <= mediumScreenSize) {
navContent.style.display = "none";
} else {
navContent.style.display = "block"; // Keep the items visible
}
});
navContent.addEventListener('mouseout', function() {
// Start a timeout
timeoutId = setTimeout(function() {
// Hide the nav-content when mouseout of the nav-content
navContent.style.display = "none";
}, 100); // Add a small delay before hiding the nav-content
});
item.addEventListener('mouseleave', function(e) {
// Start a timeout
timeoutId = setTimeout(function() {
// Get the mouse position
let x = e.clientX, y = e.clientY;
// Get the bounding rectangle of the current nav-content
let rect = navContent.getBoundingClientRect();
// Check if the mouse is outside the current nav-content
if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) {
// If the mouse is outside the current nav-content, hide it
console.log('');
}
}, 100); // Same delay as the mouseover event
});
}
Object.keys(navEl).forEach(function(key) {
showNav(navEl[key]);
});