CODEWITHSUNDEEP
htmlcss
user2356557
user2356557

Reputation:

Animate height of menu bar in CSS

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

Upvotes: 0

Views: 104

Answers (4)

Nico O
Nico O

Reputation: 14102

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

Upvotes: 2

Ripaz
Ripaz

Reputation: 100

You should remove overflow:visible;

Upvotes: 0

Stephen Thomas
Stephen Thomas

Reputation: 14053

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.

Upvotes: 2

anurupr
anurupr

Reputation: 2344

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

JSFIDDLE

Upvotes: 0

Related Questions