CSS transitions in expandable menu
Having an expandable menu how to use 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 CSS reads 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;
}
4 answers
By setting the height of each <li> to zero by default( default), you can set the height to 20px when it is .opened, even if it does not have the exact same visual effect
Example
Hello, I made an example with the hover event for being more practical!
I do not know if the inclusion of a new class is ideal, it becomes less dynamic.
HTML:
<ul class="max">
<li class="menu">Pequena
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li class="menu">Pequena
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li class="menu gr">Grande
<ul>
<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>
</li>
CSS:
.max{
width: 250px;
height: 400px;
overflow:hidden;
}
.max > li{
height: 18px;
width: 200px;
margin-bottom:10px;
padding: 4px;
padding-left: 20px;
border:2px solid #a5f;
float:left;
overflow:hidden;
-moz-transition:all 0.2s ease-out;
-webkit-transition:all 0.2s ease-out;
-o-transition:all 0.2s ease-out;
transition:all 0.2s ease-out;
-moz-transition-delay:0.15s;
-webkit-transition-delay:0.15s;
-o-transition-delay:0.15s;
transition-delay:0.15s;
}
.max > li:hover{
height: 80px;
}
.max > li.gr:hover{
height: 215px;
}
.max > li ul li{
width: 100px;
text-align: left;
}
See the Fiddle
Since you are using Javascript to add the class, why not use a jQuery for example to do this? You would not work the fixed size...and then they would behave like an accordion..
HTML:
<ul>
<li>
Pequeno
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>
Grande
<ul>
<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>
</li>
</ul>
JQuery
$("ul li").click(function(){
//Quando clica esconde QUALQUER que estiver aberta
$("ul li ul:visible").slideUp();
//Abre a que possui hierarquia com a que você clicou:
$(this).children("ul").slideToggle();
});
You are encountering this animation delay issue because of the max-height property.
Note that in your Fiddle, if you replace max-height with height the problem does not happen. (Although the layout looks different from what you want, probably.)
The delay is caused by the Browser interpolating the property max-height from the value 250px to the value 20px in the interval of one second. Since 250px is greater than the "effective" height of the element, there is a delay until the value the max-height property is smaller than the height of the element so that it begins to be "cut".
As far as I know, no browser is currently able to correctly interpolate between a specific value of max-height, such as 20px and the automatic value, default. (Google Chrome interpolates 20px with 0px, and then displays the height generated by the value default, while Firefox disables CSS transition entirely.)
Unfortunately it will probably be necessary to specify the exact height by Element, or use another effect if you want to do this with CSS only.