Cara Membuat: Menu turun yang dapat di klik

Belajar cara menggunakan CSS dan JavaScript untuk membuat menu turun yang dapat di klik.

Buat menu turun yang dapat di klik

Buat sebuah menu turun yang muncul saat pengguna mengeklik tombol.

Langkah Pertama - Tambahkan HTML：

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Tetingkap Turun</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

例子解释：

可以使用任何元素來打開下拉菜單，例如 <button>、<a> 或 <p> 元素。

使用容器元素（如 <div>）來創建下拉菜單，並在其中添加下拉菜單鏈接。

使用 <div> 元素將按鈕和 <div> 包裝起來，以便使用 CSS 正確定位下拉菜單。

第二步 - 添加 CSS：

/* 下拉按鈕 */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
/* 鼠標懸停和聚焦時的下拉菜單按鈕 */
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}
/* 容器 <div> - 用於定位下拉菜單內容所需的元素 */
.dropdown {
  position: relative;
  display: inline-block;
}
/* 下拉菜單內容（默認隱藏） */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* 下拉菜單內的鏈接 */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* 鼠標懸停時更改下拉菜單鏈接的顏色 */
.dropdown-content a:hover {background-color: #ddd;}
/* 显示下拉菜单（当用户点击下拉菜单按钮时，使用 JS 将此类添加到 .dropdown-content 容器中） */
.show {display:block;}

例子解释：

我们为下拉菜单按钮设置了背景色、内边距、悬停效果等样式。

.dropdown 类使用 position:relative，当我们想要将下拉菜单内容放置在下拉菜单按钮的正下方时（使用 position:absolute），这是必需的。

.dropdown-content 类包含实际的下拉菜单。它默认是隐藏的，并将在鼠标悬停时显示（见下文）。请注意，最小宽度设置为 160px。您可以根据需要更改这个值。提示：如果您希望下拉菜单内容的宽度与下拉菜单按钮一样宽，可以将宽度设置为 100%（并在小屏幕上使用 overflow:auto 以启用滚动）。

我们没有使用边框，而是使用了 box-shadow 属性，使下拉菜单看起来像一张“卡片”。我们还使用 z-index 将下拉菜单放置在其他元素的前面。

第三步 - 添加 JavaScript：

/* 当用户点击按钮时，切换下拉菜单内容的隐藏和显示状态 */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
// 如果用户在下拉菜单外部单击，则关闭下拉菜单
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

尝试亲自

Laman berkaitan

Panduan:Daftar turun pilihan CSS

Panduan:Bagaimana membuat pilihan turun yang dapat dihaluskan