Horizontal collapsible menu where the links are transitioned to the right-CodePudding

I'm trying to create this horizontal menu that when you click on the bento menu, expands the links to the right. However, it does this weird animation where the links are all stacked up and then eventually gets in a single line. I'm assuming it's because I have it as width: 0px when the menu is closed. What would be a better way of accomplishing this wherein during the transition, the links are shifted to the right without that weird unstacking animation?

function navMenu()
{
    var classToggle = document.getElementById("navLinks");
    if (classToggle.className === "navMenuClosed") {
      classToggle.className = "navMenuOpen";
    } else {
      classToggle.className = "navMenuClosed";
    }

}

.bento-menu {
  float: left;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  height: 22px;
  width: 22px;
  cursor: pointer;
}

.bento-dot {
  width: 6px;
  height: 6px;
  background: #ff0000;
  overflow: hidden;
}
#navLinks {
  line-height: 22px;
  background-color: brown;
  float: left;
}

.navMenuOpen {
  width: 500px;
  opacity: 1;

  transition: width 2s;
}
.navMenuClosed {
  width: 0px;
  opacity: 0;
  overflow-x: hidden;
}

#navLinks li {
  display: inline;
  margin-right: 30px;
}

#navLinksUl {
  margin: 0;
  list-style: none;
}

.test {
  border: darkblue solid 10px;
}

<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="/test/navbar.css" />
  </head>
  <body>
    <div id="navbar">
      <div class="bento-menu" onclick="navMenu()">
        <div class="bento-dot"></div>
        <div class="bento-dot"></div>
        <div class="bento-dot"></div>
        <div class="bento-dot"></div>
        <div class="bento-dot"></div>
        <div class="bento-dot"></div>
        <div class="bento-dot"></div>
        <div class="bento-dot"></div>
        <div class="bento-dot"></div>
      </div>

      <div id="navLinks" class="navMenuClosed">

        <ul id="navLinksUl">
          <li>Link 1</li>
          <li>Link 1</li>
          <li>Link 1</li>
          <li>Link 1</li>
        </ul>
      </div>
    </div>
    <script src="/test/navbar.js"></script>
  </body>
</html>

CodePudding user response：

you should be able to add this to the CSS for #navLinks. you should read up on text-overflow and the other properties, i've found it super helpful for all sorts of nav stuff :)

#navLinks {
  text-overflow: clip;
  white-space: nowrap;
  overflow: hidden;
}

hope i helped! :D