how to drop submenu one by one?

Question

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>

can you give also little of your html, so we can hel you – Laaouatni Anas Dec 25 '21 at 12:56 — Laaouatni Anas, Dec 25 '21 at 12:56
What do you mean by "but without using mouse event"? – Yousef Alaqra Dec 25 '21 at 13:00 — Yousef Alaqra, Dec 25 '21 at 13:00
like onclick/hover... – Ahmed Massalha Dec 25 '21 at 13:13 — Ahmed Massalha, Dec 25 '21 at 13:13
Browse all Offers

Type
. . . . .
-->
– Ahmed Massalha Dec 25 '21 at 13:14 — Ahmed Massalha, Dec 25 '21 at 13:14

score 0 · Answer 1 · answered Dec 25 '21 at 13:15

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>

how to drop submenu one by one?

1 Answers1

Related