en la barra de navegación, el nombre de la clase del submenú es submenú, tenemos 7 submenús. Estoy tratando de hacer algo como pasar el mouse por encima pero sin usar el evento del mouse , quiero mostrarlos uno por uno (mostrar el primero y ocultarlo, mostrar el segundo y ocultar it), ¿cuál es la mejor manera de hacerlo con JavaScript ?
aquí está mi código, pero los muestra una vez uno sobre el otro:
function changestyle(){ var els = document.getElementsByClassName("submenu"); for(var i = 0; i < els.length-1; i++) { els[i].style.display = 'block'; } }Probé con otro código pero no funciona:
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); } }este es el CÓDIGO HTML del submenú:
<div class="submenu"> <ul class="linkmenu"> <li class="d-md-none"> <div class="nav-item standalone-nav"><span><a href="/wines/_/Nn" 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>Creé una var en cada .sub-menu
el primero tiene --detail: 1; el último --delay: 7;
ahora usando calc(); en css, podemos hacer un pequeño retraso en el primero, más vamos más el retraso
.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>