Paano gumawa: Button na "More" sa navigation bar

Aralan kung paano gumawa ng button na "More".

Lumikha ng navigation bar na may dropdown menu

Kapag inililipat ng gumagamit ang mouse sa mga elemento sa loob ng navigation bar, magiging nakikita ang dropdown menu.

Unang Hakbang - Magdagdag ng HTML：

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">More
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
</div>

例子解釋：

Gamitin ang anumang elemento upang buksan ang dropdown menu, halimbawa ang elemento ng <button>, <a> o <p>.

Lumikha ng dropdown menu gamit ang elemento ng container (gaya ng <div>) at idagdag ang link ng dropdown menu.

Gamitin ang elemento ng <div> upang ilapitan ang button at isa pang <div> upang maayos na ilokalisahin ang dropdown menu gamit ang CSS.

Ano ang Susunod na Hakbang - Magdagdag ng CSS：

/* Container ng navigation bar */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}
/* Link sa loob ng navigation bar */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Container ng dropdown menu */
.dropdown {
  float: left;
  overflow: hidden;
}
/* Button ng dropdown menu */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Mahalaga para sa ganap na pag-alay sa mobile */
  margin: 0; /* 對於手機上的垂直對齊非常重要 */
}
/* 為鼠標懸停時的導航欄鏈接添加紅色背景顏色 */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
/* 下拉菜單內容（默認是隱藏的） */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* 下拉菜單內的鏈接 */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* 為鼠標懸停時的下拉菜單鏈接添加灰色背景顏色 */
.dropdown-content a:hover {
  background-color: #ddd;
}
/* 鼠標懸停時顯示下拉菜單 */
.dropdown:hover .dropdown-content {
  display: block;
}

親自試試

例子解釋：

我們已經為導航欄和導航鏈接設置了背景色、內邊距等樣式。

我們已經為下拉菜單按鈕設置了背景色、內邊距等樣式。

.dropdown 類是 .dropdown-content 的容器。由於這是一個 <div> 元素，而不是 <a> 元素，我們必須使其浮動以確保它停留在鏈接旁邊。

.dropdown-content 類包含實際的下拉菜單。它默認是隱藏的，將在鼠標懸停時顯示（見下文）。注意，最小寬度設置為 160px。請隨意更改此設置。

我們沒有使用邊框，而是使用 box-shadow 屬性，使下拉菜單看起來像一張“卡片”。我們還使用 z-index 將下拉菜單放置在其他元素的前面。

:hover 選擇器用於在用戶將鼠標移到下拉菜單按鈕上時顯示下拉菜單。

相關頁面

教程：CSS 下拉菜单

教程：如何創建可點擊的下拉菜單

教程：CSS 导航栏

教程：如何創建響應式頂部導航欄