平滑下拉選單

我有一個帶有一些文本的懸停下拉選單，它可以找到，但是當我懸停在它上面時，它就出現在那里。我希望它以中等速度向下滑動。有沒有一種簡單的方法可以做到這一點？

html：

    <div class="dropdown">
  <button title="General Information" class="dropbtn">General Information</button>
  <div class="dropdown-content">
    <a href="#"><b>Life Span</b>: around 16y</a>
    <a href="#"><b>Adult Size</b>: 3-5 inches long</a>
    <a href="#"><b>Weight</b>: 1-3 oz</a>
    <a href="#"><b>Common Name</b>: White's Dumpy tree frog</a>
    <a href="#"><b>Scientific name</b>: <i>Litoria Caerulea</i></a>

CSS：

.dropbtn {
  border-radius: 12px;
  background-color: #6B8E23;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  border-radius: 12px;
  position: absolute;
  top: 0px;
  left: 0px;
  display: inline-block;
}

.dropdown-content {
  border-radius: 12px;
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  cursor: auto;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  cursor: auto;
  background-color: #495d29;
}

uj5u.com熱心網友回復：

這可以作業：

.dropbtn {
  border-radius: 12px;
  background-color: #6B8E23;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  border-radius: 12px;
  position: absolute;
  top: 0px;
  left: 0px;
  display: inline-block;
 
}

.dropdown-content {
  border-radius: 12px;
  opacity: 0;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  z-index: 1;
   transition: all linear 0.3s;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  cursor: auto;
}

.dropdown:hover .dropdown-content {
  transition: all linear 1s;
   opacity: 1;
}

.dropdown:hover .dropbtn {
   transition: all linear 1s;
  cursor: auto;
  background-color: #495d29;
 
}

uj5u.com熱心網友回復：

你可以依靠的opacity，transform和transition性能提供了更好看，這里是您的代碼只是為了演示一個小版

.dropbtn {
  border-radius: 12px;
  background-color: #6B8E23;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  border-radius: 12px;
  position: absolute;
  top: 0px;
  left: 0px;
  display: inline-block;
}

.dropdown-content {
  border-radius: 12px;
  /* display: none; */ 
  opacity: 0; /* here */
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  z-index: 1;
  transition: all 0.25s ease-in; /* here */
  transform: translateY(-10px); /* here */
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  cursor: auto;
}

.dropdown:hover .dropdown-content {
/*   display: block; */ /* no need for display block and none, you can depend on opacity as long as the position is absolute*/
  transform: translateY(0); /* here */
  opacity: 1; /* here */
}

.dropdown:hover .dropbtn {
  cursor: auto;
  background-color: #495d29;
}

<div class="dropdown">
  <button title="General Information" class="dropbtn">General Information</button>
  <div class="dropdown-content">
    <a href="#"><b>Life Span</b>: around 16y</a>
    <a href="#"><b>Adult Size</b>: 3-5 inches long</a>
    <a href="#"><b>Weight</b>: 1-3 oz</a>
    <a href="#"><b>Common Name</b>: White's Dumpy tree frog</a>
    <a href="#"><b>Scientific name</b>: <i>Litoria Caerulea</i></a>
    </div>
    </div>

標籤：html css 下拉式菜单

上一篇：未添加HTML內容

下一篇：如何使用javascript獲取href中的標簽值