in the Navbar the submenu's class name is submenu , we have 7 submenus ' im trying to make something like mouse hover but without using mouse event , i want to show them one by one (show the first and hide it, show the second and hide it) , what is the better way to do that with JavaScript
here is the my code but it show them once one on the other :
function changestyle(){
var els = document.getElementsByClassName("submenu");
for(var i = 0; i < els.length-1; i++)
{
els[i].style.display = 'block';
}
}
i tried another code but it doesn't work :
function changestyle(){
var els = document.getElementsByClassName("submenu");
for(var i = 0; i < els.length-1; i++)
{
const showone = function(){
els[i].style.display = 'block';
};
const hideone = function(){
els[i].style.display = 'none';
};
setTimeout(showone, 2000);
setTimeout(hideone, 2000);
}
}
this is the SubMenu HTML CODE :
<div class="submenu">
<ul class="linkmenu">
<li class="d-md-none">
<div class="nav-item standalone-nav"><span><a href="/wines/_/N-n" data-nav-label="Browse all Offers"><strong>Browse all Offers</strong></a></span></div>
</li>
<li>
<div class="nav-item"> <span>Type</span> <i class="arrow down"></i>
</div>
. . . . .
</a>
</li> -->
</ul>
</div>
I created a var in every .sub-menu
the first have --detail: 1; the last --delay: 7;
now using calc(); in css, we can make a small delay in the first, more we go more the delay
.menu {
display: grid;
grid-auto-flow: column;
place-items: center;
height: 100vh;
}
.submenu {
opacity: 0;
animation: animate 0.5s ease-in-out forwards;
animation-delay: calc(var(--delay) * 0.5s);
}
@keyframes animate {
from {
opacity: 0;
transform: scale(5);
}
to {
opacity: 1;
transform: scale(1);
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="menu">
<div class="submenu" style="--delay: 1;">1</div>
<div class="submenu" style="--delay: 2;">2</div>
<div class="submenu" style="--delay: 3;">3</div>
<div class="submenu" style="--delay: 4;">4</div>
<div class="submenu" style="--delay: 5;">5</div>
<div class="submenu" style="--delay: 6;">6</div>
<div class="submenu" style="--delay: 7;">7</div>
</div>
</body>
</html>