My initial solution involved toggling the visibility on and off when hovering. However, this approach is not optimal as the menu should smoothly transition into view. When the visibility is toggled, the user does not experience the intended transition effect when approaching the "hover element" from below.
Based on my testing, it appears that the issue is primarily related to CSS. Nevertheless, I have included the JavaScript code for reference. The visibility toggle function that was previously mentioned has been commented out.
let items = document.getElementsByClassName('items');
let menuBtn = document.getElementById('menuBtn');
let menuList = document.getElementById('menuList');
let menuClass = document.getElementsByClassName('menu');
menuBtn.addEventListener('mouseenter', func, false);
menuList.addEventListener('mouseleave',func2, false);
//visibilityToggle('hidden', 'none');
function func() {
console.log('out');
//visibilityToggle('visible', 'visible');
}
function func2() {
//visibilityToggle('hidden', 'none');
console.log('in');
}
function visibilityToggle(vis, point) {
for (let i = 0; i < items.length; i++){
items[i].style.visibility = vis;
items[i].style.pointerEvents = point;
}
}.trigger {
width: 200px;
height: 53px;
/*
border: 1px solid black;
background: green;
*/
}
.menu {
width: 200px;
pointer-events: visible;
}
.menu a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
}
.menu a:hover {
background-color: #ccc;
}
.menu a.active {
background-color: #04AA6D;
color: white;
}
.items {
font-size: 50px;
opacity: 0;
position: relative;
top: -20px;
cursor: pointer;
pointer-events: none;
transition: opacity 400ms ease-in-out, transform 400ms ease-in-out;
}
.trigger:hover .items {
opacity: 1;
cursor: pointer;
transform: translate(0px, 20px);
}
#menuBtn {
border: 5px solid black;
}<p>I am lost</p>
<div class="trigger">
<div class="menu" id="menuList">
<a href="#" id="menuBtn">Menu</a>
<div class="items">
<a href="#" class="items">One</a>
<a href="#" class="items">Two</a>
<a href="#" class="items">Three</a>
<a href="#" class="items">Four</a>
</div>
</div>
</div>