5
Having an expandable menu like using the CSS transition to open/close at the same time the part that is open and the part that is closing?
The problem does not arise if the menus are the same size (example), but when the size is different it gives idea that the CSS reads the max-height
as the actual value and not as a maximum...
Example of the problem here: 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;
}
Vinicius, thanks, I know how to do using Javascript (Mootools in my case), but I wanted to use only CSS3.
– Sergio