Expandable menu CSS transitions

Question

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;
}

Answer 1

Defining the height of each <li> as zero by default(default), you can set the height as 20px when you are .opened, even though it doesn’t have exactly the same visual effect

Example

Answer 2

Since you are using Javascript to add the class, why not use a jQuery to do this? You wouldn’t work the fixed size...and then 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(); 
});

Fiddle

Answer 3

You are encountering this delay problem in animation because of property max-height.

Note that in your Fiddle, if you replace the max-height for height the problem does not happen. (Although the layout is different from what you want, probably.)

Delay is caused by the Browser interpolating the property max-height of value 250px at value 20px in the interval of a second. How 250px is greater than the "effective" height of the element, there is a delay until the value of the property max-height is less than the height of the element so that it starts to be "cut".

As far as I know, no browser is currently able to interpolate correctly between a specific value of max-height, as 20px and the automatic value, default. (Google Chrome interpola 20px with 0px, and then displays the height generated by the value default, while Firefox disables the CSS transition completely.)

Unfortunately it will probably be necessary to specify the exact height per element, or use another effect if you want to do this only with CSS.

Answer 4

Hello, I made an example with the Hover event for being more practical!

I don’t know if the inclusion of a new class is ideal, gets 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