How to make a dropdown menu transition with CSS?-CodePudding

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.

const toggleButton = document.querySelector('.dot_a');
const navbarLinks = document.querySelector('.nav-list');

toggleButton.addEventListener('click', () => {
  navbarLinks.classList.toggle('active')
})

body {
  background-image: url(1.jpg);
  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;
    overflow: hidden;
  

  }

  .nav-list.active {
    display: block;
    overflow: visible;
    margin: 0;
    padding: 0; 
    -webkit-transition:max-height 500ms ease-in;
    -moz-transition:max-height 500ms ease;
    -o-transition:max-height 500ms ease;
    transition:max-height 500ms ease;

  
  }

}

<!DOCTYPE html>
<html>
<head>
<title>Начало</title>
<link rel="shortcut icon" type="image/png" href="favicon.jpg">
<link rel="stylesheet" href="IndexStyle.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/d2896764d5.js" crossorigin="anonymous"></script>
</head>
<body>
<center>
<nav >
    <div >
      <span  style="background-color: transparent; width: 5px; height: 5px;"></span>
      <span  style="background-color: #ff4757;"></span>
      <span  style="background-color: #ffa502"></span>
      <span  style="background-color: #2ed573;"></span>
    </div>
    <span >
      <a  href="Index.html"><i ></i>&nbsp;&nbsp;НАЧАЛО</a>
      <a  href="HtmlPage.html"><i ></i>&nbsp;&nbsp;HTML&CSS</a>
      <a  href="#"><i ></i>&nbsp;&nbsp;ИНСТРУМЕНТИ</a>
      <a  href="#"><i ></i>&nbsp;&nbsp;ЗАДАЧИ</a>
      <a  href="#"><i ></i>&nbsp;&nbsp;ЗА НАС</a> 
    </span>
  </nav>
</center>
  <script src="ResponsiveMenu.js" ></script>
</body>
</html>

CodePudding user response：

Hello you can use bootstrap to make an easy and fast navbar transition but you need to know what classes to put. to get bootstrap working put this in your head

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

CodePudding user response：

A easy way to do it is with CSS, for this cases i always use Animista. Try adding this to your CSS file and then add the class slide-in-top to your menu container.

.slide-in-top {
-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;
  }
}