Rekomendasyon ng Kurso:

Paano gumawa: Dropdown ng navigation bar

Dropdown ng navigation bar

Makapaglikha ng navigation bar na may dropdown menu

Kapag inililipat ang mouse ng user sa mga elemento sa loob ng navigation bar, magiging kapansin-pansin 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">Dropdown</button>
    <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>
  <a href="#">Link 3</a>
<a href="#">Link 3</a>

例子解釋：

</div>

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

Gumamit ng elemento ng <div> upang isangkayin ang button at isa pang <div> upang maayos na ilokasi ang dropdown menu gamit ang CSS.

Pangalawang 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 */
.dropdown {
  float: left;
  overflow: hidden;
}
/* Button ng dropdown */
.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 pagkalakas 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 导航栏

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