Why is the drop down menu not smooth transitioning?

Question

I have tried almost everything I could thing of so I am back here. I found out how to make a dropdown menu but how do I make it transition? If there are any more recommendations please let me know what you think I should change. Here is the code:

$(document).on("click", ".menuButton", function () {
    $(".dropdown").toggleClass("visible");
  });

#menuDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .menuButton {
    text-align: center;
  }
  
  .dropdown {
    display: block;
    width: 100%;
    visibility: hidden;
    transition: visibility 300ms ease-in-out;
  }
  
  .visible {
    visibility: visible;
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="index.js" defer></script>
    <link rel="stylesheet" type="text/css" href="style.css" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <div id='menuDiv'>
        <button class='menuButton'>Menu <i class="fa-solid fa-angle-down"></i></button>
        <div id='dropdownmenu'>
          <button class='dropdown lunch'>Lunch</button>
          <button class='dropdown dinner'>Dinner</button>
          <button class='dropdown locations'>Locations</button>
        </div>
      </div>
</body>
</html>

`visibility` is either `visible` or `hidden`. maybe you want to use `opacity`? — IT goldman, Jun 24 '23 at 01:20
Transition... like what? [From `height` of `0` to `auto`](https://stackoverflow.com/q/3508605)? The same but for `width`? Opacity? Please add more details. — InSync, Jun 24 '23 at 01:29
@InSync - clearly the only transition is on `visibility` - did you read the code :p — Jaromanda X, Jun 24 '23 at 01:29
@JaromandaX Obviously that didn't work, so I'm asking what *else* OP wants to do the transition on. Otherwise, we can simply close this as a duplicate of [CSS transition with visibility not working](https://stackoverflow.com/q/27900053). — InSync, Jun 24 '23 at 01:32
@InSync I would like the dropdown menu to drop down smoothly. I am guessing that the height from 0 to auto thing would soon. I want it to drop down as if you were releasing a scroll, if that makes sense. — Natsu, Jun 24 '23 at 04:27

zer00ne · Accepted Answer · 2023-06-24T04:59:29.417

Use .slideToggle() method. jQuery takes care of a lot of details in CSS, so all you really need to do is assign display: none to the dropdown. BTW, your HTML has class: dropdownmenu, while your jQuery is targeting class: dropdown. The container of the .dropdowns should be the target of the toggle method, animation, etc.

$(".menuButton").on("click", function(e) {
  $(this).next().slideToggle("slow");
  $(this).find("i").toggleClass("fa-rotate-180");
});

:root {
  font: 2ch/1.15 "Segoe UI"
}

main {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}

button {
  font: inherit;
  font-size: 100%;
  font-variant: small-caps;
  cursor: pointer;
}

.menuButton {
  display: flex;
  justify-content: center;
  width: 10ch;
}

.dropDown {
  list-style: none;
  display: none;
  margin-left: -40px;
}

.dropDown>button {
  display: list-item;
  width: 100%;
}

.dropDown>button+button {
  margin-top: 8px;
}

i {
  display: block;
  margin: 0 -1ch 0 1ch;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="style.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
</head>

<body>
  <main>
    <button class='menuButton'>Menu <i class="fa-solid fa-angle-up"></i></button>
    <menu class="dropDown">
      <button class='lunch'>Lunch</button>
      <button class='dinner'>Dinner</button>
      <button class='locations'>Locations</button>
    </menu>
  </main>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
  <script src="index.js"></script>
</body>

</html>

Why is the drop down menu not smooth transitioning?

1 Answers1