2хуровневое меню

by Nat_Lilit

HTML

<div id="dl-menu" class="dl-menuwrapper">
  <button>Открыть меню</button>
  <ul class="dl-menu">
    <li>
      <a href="#">Пункт 1</a>
      <ul class="dl-submenu">
        <li><a href="#">Под-пункт 1</a></li>
        <li><a href="#">Под-пункт 2</a></li>
        <li><a href="#">Под-пункт 3</a></li>
        <li>
          <a href="#">Под-пункт 4</a>
          <ul class="dl-submenu">
            <li><a href="#">Под-под-пункт 1</a></li>
            <li><a href="#">Под-под-пункт 2</a></li>
            <li><a href="#">Под-под-пункт 3</a></li>
          </ul>
        </li>
        <li>
          <!-- ... -->
        </li>
        <!-- ... -->
      </ul>
    </li>
    <li>
      <!-- ... -->
    </li>
    <li>
      <!-- ... -->
    </li>
    <!-- ... -->
  </ul>
</div>
<!-- /dl-menuwrapper -->

CSS

.dl-menu.dl-animate-out-1 {
  animation: MenuAnimOut1 0.4s linear forwards;
}

@keyframes MenuAnimOut1 {
  50% {
    transform: translateZ(-250px) rotateY(30deg);
  }
  75% {
    transform: translateZ(-372.5px) rotateY(15deg);
    opacity: .5;
  }
  100% {
    transform: translateZ(-500px) rotateY(0deg);
    opacity: 0;
  }
}

.dl-menu.dl-animate-in-1 {
  animation: MenuAnimIn1 0.3s linear forwards;
}

@keyframes MenuAnimIn1 {
  0% {
    transform: translateZ(-500px) rotateY(0deg);
    opacity: 0;
  }
  20% {
    transform: translateZ(-250px) rotateY(30deg);
    opacity: 0.5;
  }
  100% {
    transform: translateZ(0px) rotateY(0deg);
    opacity: 1;
  }
}