How to create an animated toggle menu with pure CSS

Traditionally, developers would use JS to achieve a toggle menu, did anyone have a thought to design the toggle menu with pure CSS? There we go! Here is the solution.

Every website will have a menu that holds the data of the entire website navigation. Now, will take one menu in the header part and design the toggle functionality only with CSS. First will start with building HTML and then followed by CSS

HTML for the functionality

The approach I have chosen for this toggle functionality is taking the help of the input type checkbox so that we can write the functionality by taking whether the input is checked or not.

Here is my HTML.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Avoid white space caused by CSS</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <header>
      <div class="side-1">
        <h1>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequatur
        </h1>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos
          autem quis eligendi perferendis, consectetur tenetur temporibus vero,
          blanditiis minima officiis amet quod iste dolor error, commodi
          expedita! Numquam, molestiae inventore.
        </p>
      </div>
      <div class="navigation">
        <input type="checkbox" class="navigation__checkbox" id="navi-toggle" />

        <label for="navi-toggle" class="navigation__button">
          <span class="navigation__icon">&nbsp;</span>
        </label>

        <div class="navigation__background">&nbsp;</div>

        <nav class="navigation__nav">
          <ul class="navigation__list">
            <li class="navigation__item">
              <a href="#" class="navigation__link"><span>01</span>About</a>
            </li>
            <li class="navigation__item">
              <a href="#" class="navigation__link"
                ><span>02</span>Lorem ipsum</a
              >
            </li>
            <li class="navigation__item">
              <a href="#" class="navigation__link"
                ><span>03</span>Lorem ipsum</a
              >
            </li>
            <li class="navigation__item">
              <a href="#" class="navigation__link"
                ><span>04</span>Lorem ipsum</a
              >
            </li>
            <li class="navigation__item">
              <a href="#" class="navigation__link"
                ><span>05</span>Lorem ipsum</a
              >
            </li>
          </ul>
        </nav>
      </div>
    </header>
    <main>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum
        dolorem neque ut! Hic ipsum saepe facere repellendus cum obcaecati
        possimus eveniet molestiae, architecto error asperiores eum nobis nisi
        ea earum! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
        Nostrum dolorem neque ut! Hic ipsum saepe facere repellendus cum
        obcaecati possimus eveniet molestiae, architecto error asperiores eum
        nobis nisi ea earum!
      </p>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum
        dolorem neque ut! Hic ipsum saepe facere repellendus cum obcaecati
        possimus eveniet molestiae, architecto error asperiores eum nobis nisi
        ea earum! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
        Nostrum dolorem neque ut! Hic ipsum saepe facere repellendus cum
        obcaecati possimus eveniet molestiae, architecto error asperiores eum
        nobis nisi ea earum!
      </p>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum
        dolorem neque ut! Hic ipsum saepe facere repellendus cum obcaecati
        possimus eveniet molestiae, architecto error asperiores eum nobis nisi
        ea earum! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
        Nostrum dolorem neque ut! Hic ipsum saepe facere repellendus cum
        obcaecati possimus eveniet molestiae, architecto error asperiores eum
        nobis nisi ea earum!
      </p>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum
        dolorem neque ut! Hic ipsum saepe facere repellendus cum obcaecati
        possimus eveniet molestiae, architecto error asperiores eum nobis nisi
        ea earum! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
        Nostrum dolorem neque ut! Hic ipsum saepe facere repellendus cum
        obcaecati possimus eveniet molestiae, architecto error asperiores eum
        nobis nisi ea earum!
      </p>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum
        dolorem neque ut! Hic ipsum saepe facere repellendus cum obcaecati
        possimus eveniet molestiae, architecto error asperiores eum nobis nisi
        ea earum! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
        Nostrum dolorem neque ut! Hic ipsum saepe facere repellendus cum
        obcaecati possimus eveniet molestiae, architecto error asperiores eum
        nobis nisi ea earum!
      </p>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum
        dolorem neque ut! Hic ipsum saepe facere repellendus cum obcaecati
        possimus eveniet molestiae, architecto error asperiores eum nobis nisi
        ea earum! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
        Nostrum dolorem neque ut! Hic ipsum saepe facere repellendus cum
        obcaecati possimus eveniet molestiae, architecto error asperiores eum
        nobis nisi ea earum!
      </p>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum
        dolorem neque ut! Hic ipsum saepe facere repellendus cum obcaecati
        possimus eveniet molestiae, architecto error asperiores eum nobis nisi
        ea earum! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
        Nostrum dolorem neque ut! Hic ipsum saepe facere repellendus cum
        obcaecati possimus eveniet molestiae, architecto error asperiores eum
        nobis nisi ea earum!
      </p>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum
        dolorem neque ut! Hic ipsum saepe facere repellendus cum obcaecati
        possimus eveniet molestiae, architecto error asperiores eum nobis nisi
        ea earum! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
        Nostrum dolorem neque ut! Hic ipsum saepe facere repellendus cum
        obcaecati possimus eveniet molestiae, architecto error asperiores eum
        nobis nisi ea earum!
      </p>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum
        dolorem neque ut! Hic ipsum saepe facere repellendus cum obcaecati
        possimus eveniet molestiae, architecto error asperiores eum nobis nisi
        ea earum! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
        Nostrum dolorem neque ut! Hic ipsum saepe facere repellendus cum
        obcaecati possimus eveniet molestiae, architecto error asperiores eum
        nobis nisi ea earum!
      </p>
    </main>
    <footer>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Error rerum,
        dolorum dolor, dolores doloremque deserunt itaque molestiae aliquam at
        cum, beatae odit repellat suscipit amet corporis! Officia sequi totam
        quisquam.
      </p>
    </footer>
  </body>
</html>

CSS for the functionality

header {
  background-color: #050d57;
  color: #fff;
  font-size: 20px;
  padding: 50px;
}
.side-1 {
  max-width: 60%;
}
header ul li {
  list-style-type: none;
  padding-bottom: 15px;
}
.header {
  background-image: linear-gradient(
    to right bottom,
    rgba(56, 215, 236, 0.8),
    rgba(196, 245, 245, 0.8)
  );
  position: relative;
}
.navigation__checkbox {
  display: none;
}
.navigation__button {
  background-color: #fff;
  height: 7rem;
  width: 7rem;
  position: fixed;
  top: 6rem;
  right: 6rem;
  border-radius: 50%;
  z-index: 2000;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
  text-align: center;
  cursor: pointer;
}
.navigation__background {
  height: 6rem;
  width: 6rem;
  border-radius: 50%;
  position: fixed;
  top: 6.5rem;
  right: 6.5rem;
  background-image: radial-gradient(#081692, #061599);
  z-index: 1000;
  transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1);
}
.navigation__nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1500;
  opacity: 0;
  width: 0;
  transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.navigation__list {
  list-style: none;
  text-align: center;
  width: 100%;
}
.navigation__item {
  margin: 1rem;
}
.navigation__link:link,
.navigation__link:visited {
  display: inline-block;
  font-size: 2rem;
  font-weight: 300;
  padding: 1rem 2rem;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    transparent 50%,
    #fff 50%
  );
  background-size: 220%;
  transition: all 0.4s;
}
.navigation__link:link span,
.navigation__link:visited span {
  margin-right: 1.5rem;
  display: inline-block;
}
.navigation__link:hover,
.navigation__link:active {
  background-position: 100%;
  color: #050d57;
  transform: translateX(1rem);
}
.navigation__checkbox:checked ~ .navigation__background {
  transform: scale(80);
}
.navigation__checkbox:checked ~ .navigation__nav {
  opacity: 1;
  width: 100%;
}
.navigation__icon {
  position: relative;
  margin-top: 3.5rem;
}
.navigation__icon,
.navigation__icon::before,
.navigation__icon::after {
  width: 3rem;
  height: 2px;
  background-color: #333;
  display: inline-block;
}
.navigation__icon::before,
.navigation__icon::after {
  content: "";
  position: absolute;
  left: 0;
  transition: all 0.2s;
}
.navigation__icon::before {
  top: -0.8rem;
}
.navigation__icon::after {
  top: 0.8rem;
}
.navigation__button:hover .navigation__icon::before {
  top: -1rem;
}
.navigation__button:hover .navigation__icon::after {
  top: 1rem;
}
//here is the actual logic behind the scenes
.navigation__checkbox:checked + .navigation__button .navigation__icon {
  background-color: transparent;
}
.navigation__checkbox:checked + .navigation__button .navigation__icon::before {
  top: 0;
  transform: rotate(135deg);
}
.navigation__checkbox:checked + .navigation__button .navigation__icon::after {
  top: 0;
  transform: rotate(-135deg);
}

main {
  display: flex;
  padding: 30px 50px;
  background: #faf8f8;
  flex-wrap: wrap;
}
main p {
  margin-right: 32px;
  flex: 0 0 30%;
}
footer {
  background-color: #050d57;
  color: #fff;
  padding: 50px;
}

Here are the final results.