CODEWITHSUNDEEP
javascriptcsscss-animationscss-transitions
Enmanuel De Los Santos Cruz
Enmanuel De Los Santos Cruz

Reputation: 79

My animation for my navbar button is not working

In this animation when you click the hamburger button, the middle bar is supposed to disappear, which is already happening, and the two remaining lines are not doing anything, they are supposed to rotate 45deg, so they turn into an x. I tried changing the order of the blocks on Javascript, but that is not working. And like I said above, the line in the middle is working, the other two are not.

Here is my code so far:

function toggleNav() {
    document.getElementById("menu").classList.toggle("active"); 
    document.getElementById("menu-button").classList.toggle("open"); 
}
* {
  margin: 0;
  padding: 0;
}

#menu {
  -webkit-transform: translateX(-400px);
          transform: translateX(-400px);
  margin-top: 50px;
  width: 400px;
  height: 100%;
  background: #dcfa71;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

#menu.active {
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
}

#menu ul li {
  list-style-type: none;
  color: #425c45;
  font-size: 2.5rem;
  padding: 18px 28px;
}

#menu ul li:hover {
  color: #1dd820;
  cursor: pointer;
}

#menu .menu-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  top: 35px;
  left: 435px;
  z-index: 1;
  -webkit-transition: all .8s ease-in-out;
  transition: all .8s ease-in-out;
}

#menu-button {
  margin-top: 50px;
  margin-left: 20px;
  width: 70px;
  height: 14px;
  background: black;
  border-radius: 5px;
  -webkit-transition: all .8s ease-in-out;
  transition: all .8s ease-in-out;
}

#menu-button::before, #menu-button::after {
  content: '';
  position: absolute;
  width: 70px;
  height: 14px;
  background: black;
  border-radius: 5px;
  -webkit-transition: all .8s ease-in-out;
  transition: all .8s ease-in-out;
}

#menu-button::before {
  -webkit-transform: translateY(-24px);
          transform: translateY(-24px);
}

#menu-button::after {
  -webkit-transform: translateY(24px);
          transform: translateY(24px);
}

#menu-button.open {
  -webkit-transform: translateX(300px);
          transform: translateX(300px);
  background: transparent;
}

#menu-button.open #menu-button::before {
  -webkit-transform: rotate(45deg) translate(35px, -35px);
          transform: rotate(45deg) translate(35px, -35px);
}

#menu-button.open #menu-button::after {
  -webkit-transform: rotate(-45deg) translate(35px, 35px);
          transform: rotate(-45deg) translate(35px, 35px);
}
/*# sourceMappingURL=style.css.map */
<!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" />
    <link rel="stylesheet" href="style.css" />
    <title>Sliding menu</title>
  </head>
  <body>
    <div class="menu-button" id="menu-button" onclick="toggleNav()">
          
    </div>
    <div id="menu" class="menu" >
    
      <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
      </ul>
    </div>
    <script src="main.js"></script>
  </body>
</html>

Upvotes: 0

Views: 87

Answers (1)

brice
brice

Reputation: 1881

Change your selectors in the CSS to #menu-button.open::before and #menu-button.open::after.

function toggleNav() {
    document.getElementById("menu").classList.toggle("active"); 
    document.getElementById("menu-button").classList.toggle("open"); 
}
* {
  margin: 0;
  padding: 0;
}

#menu {
  -webkit-transform: translateX(-400px);
          transform: translateX(-400px);
  margin-top: 50px;
  width: 400px;
  height: 100%;
  background: #dcfa71;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

#menu.active {
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
}

#menu ul li {
  list-style-type: none;
  color: #425c45;
  font-size: 2.5rem;
  padding: 18px 28px;
}

#menu ul li:hover {
  color: #1dd820;
  cursor: pointer;
}

#menu .menu-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  top: 35px;
  left: 435px;
  z-index: 1;
  -webkit-transition: all .8s ease-in-out;
  transition: all .8s ease-in-out;
}

#menu-button {
  margin-top: 50px;
  margin-left: 20px;
  width: 70px;
  height: 14px;
  background: black;
  border-radius: 5px;
  -webkit-transition: all .8s ease-in-out;
  transition: all .8s ease-in-out;
}

#menu-button::before, #menu-button::after {
  content: '';
  position: absolute;
  width: 70px;
  height: 14px;
  background: black;
  border-radius: 5px;
  -webkit-transition: all .8s ease-in-out;
  transition: all .8s ease-in-out;
}

#menu-button::before {
  -webkit-transform: translateY(-24px);
          transform: translateY(-24px);
}

#menu-button::after {
  -webkit-transform: translateY(24px);
          transform: translateY(24px);
}

#menu-button.open {
  -webkit-transform: translateX(300px);
          transform: translateX(300px);
  background: transparent;
}

#menu-button.open::before {
  -webkit-transform: rotate(45deg) translate(35px, -35px);
          transform: rotate(45deg) translate(35px, -35px);
}

#menu-button.open::after {
  -webkit-transform: rotate(-45deg) translate(35px, 35px);
          transform: rotate(-45deg) translate(35px, 35px);
}
/*# sourceMappingURL=style.css.map */
<!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" />
    <link rel="stylesheet" href="style.css" />
    <title>Sliding menu</title>
  </head>
  <body>
    <div class="menu-button" id="menu-button" onclick="toggleNav()">
          
    </div>
    <div id="menu" class="menu" >
    
      <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
      </ul>
    </div>
    <script src="main.js"></script>
  </body>
</html>

Upvotes: 3

Related Questions