Com o CSS3, a possibilidade de criar simples animações sem a necessidade da utilização de Javascript é notável. O que é espetacular, pois isto significa:
- menos código Javascript/jQuery para embarcar
- menos iterações
- menor tempo de carregamento da ação desta animação
Hoje em dia criar um menu deslizante ou como se costuma dizer em inglês - um "slider menu", é tão fácil quanto isto:
<div id="menu">
<span>hover me</span>
<ul id="list">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
#list {
height: 0;
transition: height 1s ease-in-out;
overflow: hidden;
background: #d5d5d5;
}
#menu:hover #list {
height: 100px;
}
Exemplo online no jsFiddle:
► https://jsfiddle.net/7zp6ok03/
Mas e se nós quiséssemos que a altura desta lista fosse automática conforme a quantidade de itens que temos adicionados dentro dela?
Nós podemos ter uma grande lista no qual não sabemos qual irá ser a sua altura definitiva para sempre. Para deixarmos a altura desta lista automática, teríamos que definir uma altura para este elemento de -
height:auto;, mas ao fazermos isto podemos reparar que esta animação deixará de funcionar, o que é normal, pois para que ela funcione é necessário existir uma altura padrão definida para que os cálculos de até onde esta lista se irá expandir sejam feitos.A solução para resolver este problema
Para fazermos com que esta altura seja automática temos que usar
max-height ao invés de apenas height, e fazer a correção da propriedade para transição apontando igualmente para a nova propriedade max-height:transition: max-height 1s ease-in-out;
Eis um exemplo abaixo:
#list {
max-height: 0;
transition: max-height 1s ease-in-out;
overflow: hidden;
background: #d5d5d5;
}
#menu:hover #list {
max-height: 500px;
}
Define um valor grande para a
max-height, maior do que o valor que pensas que a altura da lista irá ser para evitar com que ela fique demasiado curta.Exemplo online no jsFiddle:
► https://jsfiddle.net/afpehgsb/
