title: How to make a dropdown menu transition with CSS?
body: <p>I have created a responsive navigation-bar/menu but I want it to appear with a sliding animation from the top to the bottom when the needed button is presed. The menu does appear on itself but it completely ignores the transitioni have set it to execute. I tried multiple methods - using webkit library, using the change in height method, etc. It appears that none of them work with my code. If anyone can help, please reach to me.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const toggleButton = document.querySelector('.dot_a');
  const navbarLinks = document.querySelector('.nav-list');
  
  toggleButton.addEventListener('click', () =&gt; {
    navbarLinks.classList.toggle('active')
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-color: black;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin: 0;
  }
  
  .pro_column1 {
    width: 15%;
  }
  
  .pro_column2 {
    width: 85%;
  }
  
  .nav {
    overflow: hidden;
    background-color: white;
    /*opacity: 60%;*/
    margin: 10px;
    border-radius: 10px;
    width: 850px;
    /*background:#3c6382;
    /*box-shadow:0px 5px 20px rgba(0,0,0,0.1);*/
    /*border: solid black 2px;*/
  }
  
  
  
  .nav a {
    color: #747d8c;
    text-align: center;
    padding: 27px 10px;
    text-decoration: none;
    font-size: 17px;
    margin: 0;
    border-radius: 10px;
    transition: 1s;
  }
  
  .nav a:hover {
    background-color: #ddd;
    color: black;
    -webkit-animation: 1s ease-in forwards;
  }
  
  .dot_a {
    padding: 25px 10px;
    font-size: 17px;
    text-align: center;
    margin: 0;
    display: inline-block;
    border-radius: 10px;
    transition: 1s;
  
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
  }
  
  i {
    /*float: right;*/
    font-size: 20px;
    border: none;
    outline: none;
    color: #747d8c;
    padding: 25px 5px;
    font-family: inherit;
    margin: 0px;
    border-radius: 20px;
    transition: 1s;
  }
  
  .dot {
    height: 15px;
    width: 15px;
    border-radius: 50%;
    display: inline-block;
    margin: 0px;
  }
  
  .column {
    float: left;
    width: 33.33%;
    padding: 10px;
    height: 300px;
  }
  
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  @media screen and (max-width: 870px) {
    .nav a {
      padding-top: 5px;
      padding-bottom: 5px;
      display: block;
  
      
      
    }
    .dot_a {
      padding-top: 3px;
      padding-bottom: 0px;
    }
    .nav {
      width: 90%;
      
      
    }
    .dot {
      margin-top: 15px;
      margin-bottom: 15px;
    }
  
  
    .nav-list{  
      display: none;
      max-height: 0;
      -webkit-animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
      animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  
  
    }
  
    .nav-list.active {
      display: block;
      margin: 0;
      padding: 0; 
      max-height: fit-content;
      -webkit-animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
      animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  
    
    }
  
  }
  
  @-webkit-keyframes slide-in-top {
    0% {
      -webkit-transform: translateY(-1000px);
              transform: translateY(-1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-top {
    0% {
      -webkit-transform: translateY(-1000px);
              transform: translateY(-1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Начало&lt;/title&gt;
  &lt;link rel="shortcut icon" type="image/png" href="favicon.jpg"&gt;
  &lt;link rel="stylesheet" href="IndexStyle.css"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;script src="https://kit.fontawesome.com/d2896764d5.js" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;center&gt;
  &lt;nav class="nav"&gt;
      &lt;div class="dot_a"&gt;
        &lt;span class="dot" style="background-color: transparent; width: 5px; height: 5px;"&gt;&lt;/span&gt;
        &lt;span class="dot" style="background-color: #ff4757;"&gt;&lt;/span&gt;
        &lt;span class="dot" style="background-color: #ffa502"&gt;&lt;/span&gt;
        &lt;span class="dot" style="background-color: #2ed573;"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;span class="nav-list"&gt;
        &lt;a class="anchors" href="Index.html"&gt;&lt;i class="fas fa-house-damage"&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;НАЧАЛО&lt;/a&gt;
        &lt;a class="anchors" href="HtmlPage.html"&gt;&lt;i class="fas fa-code"&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;HTML&amp;CSS&lt;/a&gt;
        &lt;a class="anchors" href="#"&gt;&lt;i class="fas fa-tools"&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;ИНСТРУМЕНТИ&lt;/a&gt;
        &lt;a class="anchors" href="#"&gt;&lt;i class="fas fa-thumbtack"&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;ЗАДАЧИ&lt;/a&gt;
        &lt;a class="anchors" href="#"&gt;&lt;i class="far fa-address-card "&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;ЗА НАС&lt;/a&gt; 
      &lt;/span&gt;
    &lt;/nav&gt;
  &lt;/center&gt;
    &lt;script src="ResponsiveMenu.js" &gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>