Tendo um menu expansível como usar a transição CSS para abrir/fechar ao mesmo tempo a parte que está aberta e a parte que está a fechar?
O problema não se põe no caso de os menus terem o mesmo tamanho (exemplo), mas quando o tamanho é diferente dá ideia que o CSS lê o max-height
como o valor real e não como um máximo...
Exemplo do problema aqui: Fiddle
HTML
<div class="max">
<ul class="menu">Pequena
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<ul class="menu">Pequena
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<ul class="menu">Grande
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten!</li>
</ul>
</div>
CSS
.max ul {
border:2px solid #a5f;
overflow:hidden;
max-height:20px;
transition: all 1s ease-in-out;
}
.max ul.opened {
max-height: 250px;
}