Slidedown effect with menus li

Question

I’m trying to create an effect using css and jquery to a menu where the same will have the effect of "slidedown" when clicked on a given link, but even if I put the list inside a div with height: 0 she keeps showing up.

I’ve tried to put overflow: auto hidden in ul and in the li but to no avail.

$('.open-link').on('click', function() {
  $('.box').toggleClass('open');
});

$('.open-link').on('click', function() {
  $('.box').toggleClass('open');
});

.box {
  width: 200px;
  border: 1px solid blue;
  height: 0;
}

.box ul li {
  overflow: auto;
}

.open {
  animation: open-menu .7s linear;
}

@keyframes open-menu {
  from { height: 0; }
  to { height: 200px; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="box">
  <ul>
    <li>Hello</li>
    <li>World</li>
  </ul>
</div>
<button class="open-link">Abrir</button>

I would also like to know how I can perform the animation and not "Zera it" but keep the final state after the animation.

Answer 1

I think there’s no need for Animation in css. You can do it like this:

$('.open-link').on('click', function() {
  $('.box').toggleClass('open');
});

.box {
  width: 200px;
  border: 1px solid blue;
  max-height: 0;
  overflow: hidden;
  transition: all .7s linear;
}
.box ul li {
  overflow: auto;
}

.open {
  max-height: 500px; /* ajustar aqui para uma altura que saibas que nunca há de chegar */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <ul>
    <li>Hello</li>
    <li>World</li>
  </ul>
</div>
<button class="open-link">Abrir</button>

I also remind you that you can only do it with jQuery:

$('.open-link').on('click', function() {
  $('.box').slideToggle(300);
});

.box {
  width: 200px;
  border: 1px solid blue;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <ul>
    <li>Hello</li>
    <li>World</li>
  </ul>
</div>
<button class="open-link">Abrir</button>