As I work on developing a horizontal menu, I encountered an issue with the expanding animation when clicking on the bento menu. Instead of smoothly transitioning to the right, the links are initially stacked up and then eventually align in a single line which looks unappealing. I suspect this is due to setting the width as 0px when the menu is closed. Can someone provide guidance on a better approach to achieve a smooth transition where the links shift to the right without the awkward stacking 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"> ...