Animate height of menu bar in CSS

Question

What I really want is to have the same effect on the website of www.ditto.com by the menu, if anyone can figure that out, it would be really great, but if not this is what I have and please if anyone can answer this question, I'm in the middle of making a website for someone and I need this info fast!!

This code waits 0.8s when going up but it doesn't wait when it goes down, it just pops down.

Thanks in advance!!

You can see the full code here here: http://jsfiddle.net/zZPPR/

CSS

         .one
            {
                max-height: 0;
                overflow: hidden;
                -webkit-transition: max-height 0.8s;
            }
            .two
            {
                max-height: 200px;
                 overflow:visible;
            }

score 2 · Answer 1 · answered Mar 16 '14 at 21:53

2

What's happening is that you're not transitioning the overflow property. So as soon as the class two is applied, the overflow is set to visible and the content shows immediately.

answered Mar 16 '14 at 21:53

Stephen Thomas

13,843
2
32
53

score 2 · Accepted Answer · edited May 23 '17 at 12:24

2

Here is a solution that target the second animation in the link. Still a draft though.

http://jsfiddle.net/NicoO/T4Nbk/5/

Update: Max-height is causing speed issues, making the feeling the transition too fast or slow. Here is an alternative solution using transforms: http://jsfiddle.net/NicoO/T4Nbk/7/ same version with Chrome vendor prefixes: http://jsfiddle.net/T4Nbk/9/

CSS:

ul
{
    margin: 0;
    padding: 0;
}

ul > li 
{
    display: inline-block;
    position: relative;
}

ul > li li
{
    display: block;
}

ul > li:before
{
    background-color:gray;
    top: 100%;
    bottom:0;
    left: 0;
    right: 0;
    position: absolute;
    content: "";
    transition-duration: 0.4s;
    z-index:-1;
}

ul > li a
{
    display: block;
    position: relative;
}
ul > li ul
{
    max-height: 0;
    overflow: hidden;
    position: absolute;
    left:0;
    width: 300px;
    background-color: gray;
    transition-duration: 0.4s;
    transition-property: max-height;
}

ul > li:hover:before
{
    top:0;
}

ul > li:hover ul
{
    max-height: 400px;
}

HTML:

   <nav>
        <ul>
            <li>Home</li>
            <li>News & Events</li>
            <li>
                Discover
                <ul>
                    <li>Jordan</li>
                    <li>Jordan</li>

                </ul>
            </li>
        </ul>
    </nav>

CSS of the solution using transforms: Inspired by: How can I transition height: 0; to height: auto; using CSS?

ul
{
    margin: 0;
    padding: 0;
}

ul > li 
{
    display: inline-block;
    position: relative;
}

ul > li li
{
    display: block;
}

ul > li:before
{
    background-color:gray;
    top: 100%;
    bottom:0;
    left: 0;
    right: 0;
    position: absolute;
    content: "";
    transition-duration: 0.4s;
    z-index:-1;
}

ul > li a
{
    display: block;
    position: relative;
}
ul > li ul
{
    transform: scaleY(0);
    transition: transform 0.4s;
    transform-origin: top;
    overflow: hidden;
    position: absolute;
    left:0;
    width: 300px;
    background-color: gray;
}

ul > li:hover:before
{
    top:0;
}

ul > li:hover ul
{
    transform: scaleY(1);
}

edited May 23 '17 at 12:24

Community

1
1

answered Mar 16 '14 at 22:02

Nico O

13,762
9
54
69

This is turning out GREAT!! Just one last thing, can you please make the same effect supported on other browsers? – Mar 16 '14 at 22:13
here is a bug-fix: http://jsfiddle.net/NicoO/T4Nbk/3/ have to use max-height. Should be pretty cross browser by now. There are no prefixes, but i don't think that will be required here. – Nico O Mar 16 '14 at 22:17
for some reason when i put it in dreamweaver the effect doesn't work, but in chrome it does? – Mar 16 '14 at 22:23
+1 @NicoO Good answer pal. It would be sweet if we were able to animate the height decreasing too. – Jack Mar 16 '14 at 22:23
Thank you @JackWilliams see updated answer. There is second fiddle linked that feels better: http://jsfiddle.net/NicoO/T4Nbk/7/ – Nico O Mar 16 '14 at 22:26
if i add a background color to nav, the top menu dosn't turn grey on hover? – Mar 16 '14 at 22:50
z-index issue. Just add links or spans to fix it: http://jsfiddle.net/NicoO/T4Nbk/8/ – Nico O Mar 16 '14 at 22:55
There is a problem with the jsfiddle.net/NicoO/T4Nbk/8 code. The "Jordan" is displayed before hovered? – Mar 16 '14 at 23:05
The 1st time was good, idk what changed? Also is it possible to add another
to "jordan"?

Mar 16 '14 at 23:13

i mean, you can wait more than 8 minutes ... Last fix: http://jsfiddle.net/T4Nbk/9/ vendor prefix for chrome. the rest can be figured out. – Nico O Mar 16 '14 at 23:15

let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/49855/discussion-between-user2356557-and-nico-o) – Mar 16 '14 at 23:22

score 0 · Answer 3 · answered Mar 16 '14 at 21:52

0

Remove the overflow:visible from the class .two and it will work

JSFIDDLE

answered Mar 16 '14 at 21:52

anurupr

2,294
2
20
28

You can probably increase the time from `0.8s` to a larger value in `.two` for a smoother transition – anurupr Mar 16 '14 at 21:53
ur not right. if i add the "smooth" transition to the .two, nothing happens. – Mar 16 '14 at 22:02
how are you adding the "smooth" transition? – anurupr Mar 16 '14 at 22:11

score 0 · Answer 4 · answered Mar 16 '14 at 21:56

0

You should remove overflow:visible;

answered Mar 16 '14 at 21:56

Ripaz

100
5

Animate height of menu bar in CSS

4 Answers4