Estou tentando criar um efeito usando css
e jquery
para um menu onde o mesmo tera o efeito de "slidedown" quando clicado em um determinado link, porém mesmo que eu coloque a lista dentro de uma div
com height: 0
ela continua aparecendo.
Já tentei colocar overflow: auto
hidden
na ul
e na li
porém sem sucesso.
$('.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>
Gostaria de saber também como posso efetuar a animação e não "zera-la" e sim manter o estado final após a animação.