CSS transition drop down menu, it should be simple

Question

I have been trying to animate this little pice of code, i know that i cannot animate : display:none; , So i tried to change the height of ul, but it doesn't work...

Please help, me... It should be simple, but i cannot figure it out...

Thanks for every reply! :)

https://jsfiddle.net/qwv2jLpd/1/

document.querySelector(".menu p").onclick = function() {
  let seznam = document.querySelector(".menu ul");
  if (seznam.classList.contains('menu_invisible')) {
    seznam.classList.remove('menu_invisible');
  } else {
    seznam.classList.add('menu_invisible');
  }
}

.menu_invisible {
  display: none;
}

.menu {
  cursor: pointer;
}

<div class="menu">
  <p>>>Show drop down menu
    <<</p>
      <ul style="transition: all 500ms ease;" class="menu_invisible">
        <li><a href="#">whatever</a></li>
        <li><a href="#">I don't know</a></li>
        <li><a href="#">Why it</a></li>
        <li><a href="#">doesn't</a></li>
        <li><a href="k#">work?</a></li>
        <li><a href="#">Help please...</a></li>
      </ul>
</div>

You say that you've attempted to manipulate height and know that you can't animate `display: none;`, however the only attempt I see is you trying to do `transition: all` on a `display: none` - can you share some of your other non-working attempts involving `height`? — Tyler Roper, Nov 14 '18 at 20:39
In order to animate height you're going to want to use `max-height` and the `max-height` values both need to be explicit(IE you can't animate from `max-height:0;` to `max-height:auto;`) — APAD1, Nov 14 '18 at 20:42
Possible duplicate of [How can I transition height: 0; to height: auto; using CSS?](https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css) — Shant Marouti, Nov 14 '18 at 20:43
The other attempts involve: setting heigh of the ul to 0, setting max-height of the ul to 0, setting height of the idividual li's to 0; also i was trying to play with opacity... none of those things really works... I was able to animate the opacity option but the menu still takes up space... at is is clickable...(Which i do not want...) — Atom, Nov 14 '18 at 20:45

score 0 · Accepted Answer · answered Nov 14 '18 at 20:51

This can be achieved with pure CSS if you want to trigger the transition with :hover, but here is an example of how to do it with a click,

document.querySelector(".menu p").onclick = function()
{
    var ul = document.querySelector('.menu_neviditelne').classList.toggle('active--list');
}

.menu_neviditelne {
  max-height: 0;
  overflow: hidden;
  transition: all 400ms ease-in-out;
}

.menu {
  cursor:pointer;
  user-select: none;
}

.active--list {
  max-height: 500px;
}

<div class="menu">
     <p>>>Zobrazit nabídku<<</p>
      <ul class="menu_neviditelne">
        <li><a href="index.html">Úvod</a></li>
        <li><a href="kavarna.html">Kavárna</a></li>
        <li><a href="nabidka.html">Nabídka</a></li>
        <li><a href="kava.html">O kávě</a></li>
        <li><a href="kariera.html">Kariéra</a></li>
      <li><a href="kontakt.html">Kontakt</a></li>
    </ul>
 </div>

One additional feature I might add to this: If you show the menu, grab its height in pixels, and then hide it again, this happens so quickly in JavaScript that it wouldn't actually update the DOM to hide/show it, but you'd have the *actual* height of the menu. Then, you could set the max-height using JavaScript. The benefit here is that you won't have to set an arbitrary `500px` in your CSS and update it every single time you change, add, or remove items form your menu - it would automatically be set to the correct height. — Tyler Roper, Nov 14 '18 at 21:24

score -1 · Answer 2 · answered Nov 14 '18 at 20:46

-1

Maybe it will help you in some way. :)

@keyframes example{
    0%{height: 150px;}
    100%{height: 180px;}
}

li a.locations:hover{
    background-color: #e15c00;
     animation-name: example;
     animation-duration: 1s;
}

answered Nov 14 '18 at 20:46

Adrianna Tyszkiewicz

63
1
12

CSS transition drop down menu, it should be simple

2 Answers2