-2

On my website I want to animate when a menu opens. I do that by changing the max-height of the <div> that is the menu (and also changing display).

max-height is changed from 4em to none. It used to be that it was changed to 500px instead of none and then the animation did work, however it doesn't work with none.

What am I doing wrong?

Here is my website

niklassc
  • 597
  • 1
  • 9
  • 24

1 Answers1

-1

None is not valid for max-height. I would change it to 0.

Reuben
  • 2,701
  • 6
  • 31
  • 47
  • What I want is that if I click the button to open the menu it should be able to get as much height as it needs to display all the content so I want to remove the limit of the maximal height. Setting it to 0 would mean that it has no height at all. – niklassc Nov 16 '17 at 19:29
  • 1
    **A few things:** 1) You'll get down-voted for sure if you don't post actual code. 2) None isn't a valid max-height property like @Reuben stated. 3) The CSS display property isn't animatable. A better way to do this might be with visibility (https://stackoverflow.com/questions/3331353/transitions-on-the-display-property) – intrepid_em Nov 16 '17 at 19:49
  • I did post the actual code, it is right at the bottom of the question. And I am also not trying to animate the display property, I'm trying to animate `max-height`. And it did work to animate when I set the `max-height` to `500px` instead of `none` but what I want to do now is to remove that limit completely so that it gets as much height as the content needs, like it would if `max-height` wasn't set. – niklassc Nov 16 '17 at 20:01
  • Here is the version where it is `500px` instead of `none` like that in the link in my question. However, I want to make the `max-height` infinity or not set so that the height is not limited anymore by the `max-height`. https://jsfiddle.net/x84n04pa/2/ – niklassc Nov 16 '17 at 20:04
  • @kauffee000 @Reuben The reason why I set it to `none` is that on the w3schools website it states that that is the default value. And I wanted to have it as if it wasn't set, and the height did change correctly but simply the animation does not work. https://www.w3schools.com/cssref/pr_dim_max-height.asp – niklassc Nov 16 '17 at 20:20
  • You should be able to use 'unset' for that requirement. – Reuben Nov 27 '17 at 17:51