Paano gumawa: Clickable dropdown menu

Aral kung paano gumawa ng clickable dropdown menu gamit ang CSS at JavaScript.

Lumikha ng kiklik na dropdown menu

Lumikha ng isang dropdown menu na lumilitaw kapag hinitak ang pindutan ng user.

Pangunahing hakbang - Magdagdag ng HTML:

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#">ลิงก์ 1</a>
    <a href="#">ลิงก์ 2</a>
    <a href="#">ลิงก์ 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');
      }
    }
  }
}

亲自試一試

相关页面

教程：CSS 下拉菜单

教程：如何创建可悬停的下拉菜单