CSS Dropdown menu with animation (no js)

Question

Trying to create an animated dropdown menu using CSS animation, without any JS. Thought I've been barking up the right tree but can't see where I'm going wrong, for this simplified menu item...

<div class="menu">Menu Item
    <ul>
        <li>Dropdown 1</li>
        <li>Dropdown 2</li>
        <li>Dropdown 3</li>
        <li>Dropdown 4</li>
        <li>Dropdown 5</li>
    </ul>
</div>

And the following CSS;

.menu ul {
    height: 0px;
    overflow: hidden;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.menu:hover ul {
    height: auto;
}

Thought that should successfully result in a scroll down of the div, but it just keeps appearing. Any thoughts? Cheers

possible duplicate of CSS transition height: 0; to height: auto; — Blazemonger
– Blazemonger, Commented May 7, 2013 at 14:39

Community · Accepted Answer · 2017-05-23 12:18:02Z

11

See this topic for reference: How can I transition height: 0; to height: auto; using CSS?

To put it simply, you can not animate to height: auto;. It is not supported. If you have a pre-determined, fixed height, you can do it by animating to that specific value. 0px to 100px for instance. Auto however is not supported.

The first answer in the link above links to another article in which a sort of work-around is given. You may explore that for implementation on your site.

Can you use CSS3 to transition from height:0 to the variable height of content?

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered May 7, 2013 at 14:38

Michael

7,1022 gold badges31 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

raininglemons Over a year ago

Ah didn't realise that, want to steer away from js to reduce the sort of shuddering effect you get on old computers and mobile devices. Guess I'll probably stick to transforming to a pre-calculated height, which to be fair shouldn't be hard to calculate given each li have a fixed height. Cheers for that!

Michael Over a year ago

Not hard at all, and certainly an adequate thing to do. Calculating that height gets hairy if you are loading your navigation dynamically, which would then mess up your calculation once you modify the nav. Ideally you don't have to change the value manually. But if your nav isnt expected to change much if at all, I reckon most people can live with the issue.

Blazemonger · Accepted Answer · 2013-05-07 14:39:02Z

4

You can't use CSS transitions with height:auto, only with specific values.

.menu:hover ul {
    height: 100px;
}

http://jsfiddle.net/mblase75/cWZMu/

answered May 7, 2013 at 14:39

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

1 Comment

raininglemons Over a year ago

Cheers for that, as I said above, probably just going to follow that advice

artecher · Accepted Answer · 2016-09-05 03:32:35Z

4

The animation for a dropdown can be implemented with pure CSS:

ul {
  overflow: hidden;
  transition: all .3s ease;
}

ul.folded {
  max-height: 0;
}

ul.unfolded {
  max-height: 300px; //value of max-height should always bigger than actual sum of all li's height
}

answered Sep 5, 2016 at 3:32

artecher

3493 silver badges9 bronze badges

Comments

BananaNeil · Accepted Answer · 2021-03-26 18:56:35Z

-1

I was able to build a solution similar to @artcher, but instead I used max-height: 100%; and that worked perfectly:

ul.submenu {
  overflow: hidden;
  transition: all .3s ease;
  max-height: 0;
}

.top-level-item:hover {
  .submenu {
    max-height: 100%;
  }
}

answered Mar 26, 2021 at 18:56

BananaNeil

10.8k9 gold badges52 silver badges69 bronze badges

1 Comment

Touk Over a year ago

Nop you can't animate 0 -> 100% with max height. You were sure of this answer ? Can you provide a Codepen or assimilated ?

Collectives™ on Stack Overflow

CSS Dropdown menu with animation (no js)

4 Answers 4

2 Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related