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/
