如何使用CSS進行下拉選單轉換？-有解無憂

我創建了一個回應式導航欄/選單，但我希望它在按下所需按鈕時顯示從上到下的滑動影片。選單確實出現在其自身上，但它完全忽略了我已將其設定為執行的過渡。我嘗試了多種方法 - 使用 webkit 庫，使用更改高度方法等。似乎它們都不適用于我的代碼。如果有人可以提供幫助，請聯系我。

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

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

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;
  }
}

<!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 class="nav">
    <div class="dot_a">
      <span class="dot" style="background-color: transparent; width: 5px; height: 5px;"></span>
      <span class="dot" style="background-color: #ff4757;"></span>
      <span class="dot" style="background-color: #ffa502"></span>
      <span class="dot" style="background-color: #2ed573;"></span>
    </div>
    <span class="nav-list">
      <a class="anchors" href="Index.html"><i class="fas fa-house-damage"></i>&nbsp;&nbsp;НАЧАЛО</a>
      <a class="anchors" href="HtmlPage.html"><i class="fas fa-code"></i>&nbsp;&nbsp;HTML&CSS</a>
      <a class="anchors" href="#"><i class="fas fa-tools"></i>&nbsp;&nbsp;ИНСТРУМЕНТИ</a>
      <a class="anchors" href="#"><i class="fas fa-thumbtack"></i>&nbsp;&nbsp;ЗАДАЧИ</a>
      <a class="anchors" href="#"><i class="far fa-address-card "></i>&nbsp;&nbsp;ЗА НАС</a> 
    </span>
  </nav>
</center>
  <script src="ResponsiveMenu.js" ></script>
</body>
</html>

uj5u.com熱心網友回復：

一個簡單的方法是使用 CSS，對于這種情況，我總是使用Animista。嘗試將此添加到您的 CSS 檔案中，然后將該類添加slide-in-top到您的選單容器中。

.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;
  }
}

uj5u.com熱心網友回復：

您好，您可以使用引導程式進行簡單快速的導航欄轉換，但您需要知道要放置哪些類。讓引導程式作業把它放在你的腦海里

<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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/411891.html

標籤：

上一篇：滾動的三個案例-在if中起作用

下一篇：錯誤顯示導航欄的CSS代碼問題