Why my CSS animation doesn't work? .rightbox part (menu) in @media part does not appear after c-CodePudding

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap');
:root {
  --background-color: rgb(129, 19, 159);
  --font-color: rgb(250, 248, 225);
  --font-color-hover: rgb(32, 221, 63);
  --menu-icon-color: rgb(245, 245, 245);
  --white-color: rgb(255, 255, 255);
  --black-color: rgb(0, 0, 0);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Raleway', sans-serif;
  color: var(--font-color);
}

.navbar {
  background-color: var(--background-color);
  display: flex;
  justify-content: space-around;
  align-items: center;
  /* position: fixed; */
  width: 100%;
  padding: 10px;
  box-shadow: 0px 3px 4px 0px rgba(130, 121, 121, 0.5);
  -webkit-box-shadow: 0px 3px 4px 0px rgba(130, 121, 121, 0.5);
  -moz-box-shadow: 0px 3px 4px 0px rgba(130, 121, 121, 0.5);
}


/* LEFT PART */

.leftbox-logo h1,
.leftbox-logo p {
  line-height: 1.8rem;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

.leftbox-logo h1 {
  font-weight: 900;
  font-size: 2rem;
}

.leftbox-logo p {
  font-size: 1rem;
  padding-left: 30px;
}

.leftbox-logo h1:hover,
.leftbox-logo p:hover {
  color: var(--font-color-hover);
}


/* HIDDEN NOW */

.menu-button {
  display: none;
}


/* RIGHT PART */

.rightbox ul {
  display: flex;
  list-style: none;
}

.rightbox ul li a {
  padding: 10px;
  text-decoration: none;
  width: max-content;
}

.rightbox ul li a:hover {
  background-color: var(--white-color);
  border-radius: 7px;
  color: var(--black-color);
}


/* MEDIA */

@media screen and (max-width: 800px) {
  .navbar {
    display: flex;
    flex-direction: column;
  }
  .leftbox {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .menu-button {
    background-color: transparent;
    border: none;
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .menu-icon,
  .menu-icon::before,
  .menu-icon::after {
    background-color: var(--menu-icon-color);
    width: 40px;
    height: 5px;
    border-radius: 5px;
    position: absolute;
    transition: all 1.3s;
  }
  .menu-icon::before,
  .menu-icon::after {
    content: "";
  }
  .menu-icon::before {
    transform: translate(-20px, -12px);
  }
  .menu-icon::after {
    transform: translate(-20px, 12px);
  }
   :is(.menu-button:active,
  .menu-button:focus-within) .menu-icon {
    background-color: transparent;
    transform: rotate(720deg)
  }
   :is(.menu-button:active,
  .menu-button:focus-within) .menu-icon::before {
    transform: translateX(-20px) rotate(45deg);
  }
   :is(.menu-button:active,
  .menu-button:focus-within) .menu-icon::after {
    transform: translateX(-20px) rotate(-45deg);
  }
  **HERE,
  WHY IT DOESTN'T WORK 
 :is(.menu-button:active,
  .menu-button:focus-within) .rightbox {
    *display: block;
    *
  }
  .rightbox {
    background-color: var(--background-color);
    * display: none;
    * transform-origin: top center;
    animation: showMenu 0.5s ease-in-out forwards;
  }
  ** @keyframes showMenu {
    0% {
      transform: scaleY(0);
    }
    80% {
      transform: scaleY(0.8);
    }
    100% {
      transform: scaleY(1);
    }
  }
  .rightbox ul {
    list-style-type: none;
    display: flex;
    flex-flow: column nowrap;
  }
  .rightbox li {
    padding: 0.4rem;
  }
  .rightbox a {
    display: block;
    text-align: center;
    width: 80%;
    margin: auto;
  }
}

<nav >
  <div >
    <div >
      <h1>Navbar</h1>
      <p>Pet Project's / Day1</p>
    </div>
    <button >
      <div ></div>
    </button>
  </div>
  <div >
    <ul >
      <li><a href="#">Home</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </div>
</nav>

Why my CSS animation doesn't work? .rightbox part (menu) in @media part does not appear after click on menu-button.

I try to exchange the navbar menu to hide it in the button and call when clicked the button. Menu icon is work, but rightbox doesn't. DISPLAY: NONE doesn't change to DISPLAY: BLOCK in that part :is(.menu-button:active, .menu-button:focus-within) .rightbox {}

CodePudding user response：

It doesn't work because

 :is(.menu-button:active, .menu-button:focus-within) .rightbox {
   display: block;
  }

requires .rightbox to be a child of .menu-button as this rule uses the descendant combinator

To fix this you can use the :has() pseudo class but be aware it's not currently supported across all browsers (yet!). Kevin Powell does a short video on this.

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap');
:root {
  --background-color: rgb(129, 19, 159);
  --font-color: rgb(250, 248, 225);
  --font-color-hover: rgb(32, 221, 63);
  --menu-icon-color: rgb(245, 245, 245);
  --white-color: rgb(255, 255, 255);
  --black-color: rgb(0, 0, 0);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Raleway', sans-serif;
  color: var(--font-color);
}

.navbar {
  background-color: var(--background-color);
  display: flex;
  justify-content: space-around;
  align-items: center;
  /* position: fixed; */
  width: 100%;
  padding: 10px;
  box-shadow: 0px 3px 4px 0px rgba(130, 121, 121, 0.5);
  -webkit-box-shadow: 0px 3px 4px 0px rgba(130, 121, 121, 0.5);
  -moz-box-shadow: 0px 3px 4px 0px rgba(130, 121, 121, 0.5);
}


/* LEFT PART */

.leftbox-logo h1,
.leftbox-logo p {
  line-height: 1.8rem;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

.leftbox-logo h1 {
  font-weight: 900;
  font-size: 2rem;
}

.leftbox-logo p {
  font-size: 1rem;
  padding-left: 30px;
}

.leftbox-logo h1:hover,
.leftbox-logo p:hover {
  color: var(--font-color-hover);
}


/* HIDDEN NOW */

.menu-button {
  display: none;
}


/* RIGHT PART */

.rightbox ul {
  display: flex;
  list-style: none;
}

.rightbox ul li a {
  padding: 10px;
  text-decoration: none;
  width: max-content;
}

.rightbox ul li a:hover {
  background-color: var(--white-color);
  border-radius: 7px;
  color: var(--black-color);
}


/* MEDIA */

@media screen and (max-width: 800px) {
  .navbar {
    display: flex;
    flex-direction: column;
  }
  .leftbox {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .menu-button {
    background-color: transparent;
    border: none;
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .menu-icon,
  .menu-icon::before,
  .menu-icon::after {
    background-color: var(--menu-icon-color);
    width: 40px;
    height: 5px;
    border-radius: 5px;
    position: absolute;
    transition: all 1.3s;
  }
  .menu-icon::before,
  .menu-icon::after {
    content: "";
  }
  .menu-icon::before {
    transform: translate(-20px, -12px);
  }
  .menu-icon::after {
    transform: translate(-20px, 12px);
  }
   :is(.menu-button:active,
  .menu-button:focus-within) .menu-icon {
    background-color: transparent;
    transform: rotate(720deg)
  }
   :is(.menu-button:active,
  .menu-button:focus-within) .menu-icon::before {
    transform: translateX(-20px) rotate(45deg);
  }
   :is(.menu-button:active,
  .menu-button:focus-within) .menu-icon::after {
    transform: translateX(-20px) rotate(-45deg);
  }
  .rightbox {
    background-color: var(--background-color);
    display: none;
    transform-origin: top center;
    animation: showMenu 0.5s ease-in-out forwards;
  }
  .navbar:has(:is(.menu-button:active, .menu-button:focus-within)) .rightbox {
    display: block;
  }
  ** @keyframes showMenu {
    0% {
      transform: scaleY(0);
    }
    80% {
      transform: scaleY(0.8);
    }
    100% {
      transform: scaleY(1);
    }
  }
  .rightbox ul {
    list-style-type: none;
    display: flex;
    flex-flow: column nowrap;
  }
  .rightbox li {
    padding: 0.4rem;
  }
  .rightbox a {
    display: block;
    text-align: center;
    width: 80%;
    margin: auto;
  }
}

<nav >
  <div >
    <div >
      <h1>Navbar</h1>
      <p>Pet Project's / Day1</p>
    </div>
    <button >
      <div ></div>
    </button>
  </div>
  <div >
    <ul >
      <li><a href="#">Home</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </div>
</nav>