資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 CSS 建立下拉導航欄？
下拉導航是一個包含下拉選項的導航欄。你會在很多網站上看到導航欄的第 3 或第 4 個專案具有下拉功能。
當在同一類別中需要在導航欄專案上呈現多個選項時，這時就需要開發一個下拉導航欄。假設您提供多種型別的服務，那麼您不能在導航欄上公開呈現所有這些服務，而是將它們全部放在下拉選單中。這類似於可懸停的下拉選單。
建立下拉導航欄的步驟
在開始建立下拉導航欄之前，我們將首先使用 HTML 建立一個下拉結構。
步驟 1 - 新增 HTML
我們將建立導航欄的結構，並且我們還將在導航欄中使用 font-awesome 圖示包，以便在下拉選項上顯示向下箭頭圖示。要了解如何包含圖示包，請檢視此文章。
- 我們將使用<nav> HTML 標籤來包裹選單的所有專案，以使其在導航欄中保持對齊。
- 然後我們將建立下拉結構，為此我們可以使用<button>、<a>或<p>任何元素。
- 現在我們將使用<div<和<button>以及<a>標籤建立導航選單的下拉專案。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav>
<a class="links" href="#">Home</a>
<a class="links" href="#">Services</a>
<a class="links" href="#">Products</a>
<div class="dropdown-menu">
<button class="menu-btn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="menu-content">
<a class="links-hidden" href="#">Contact Us</a>
<a class="links-hidden" href="#">Visit Us</a>
<a class="links-hidden" href="#">About Us</a>
</div>
</div>
</nav>
</body>
</html>
步驟 2 - 新增 CSS
在這裡，我們根據需要設計了按鈕和下拉選單。
- 我們使用了 CSS 'display: inline-block'(CSS display 屬性)來使專案水平排列，就像我們在不同的導航欄上看到的那樣。
- 為了隱藏下拉選單內容，我們使用了 CSS 'display: hiden'。並使用CSS position 屬性來使選單項相對於其包含塊進行定位，並且其邊緣使用邊距屬性進行放置。
- 為了在所有其他元素上呈現下拉選單項，我們使用了CSS z-index 屬性。
<style>
.menu-btn {
background-color: #040008;
color: white;
padding: 16px;
font-weight: bolder;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
border: none;
}
.dropdown-menu {
position: relative;
display: inline-block;
}
.menu-content {
display: none;
position: absolute;
background-color: #3ff360;
min-width: 110px;
z-index: 1;
}
nav {
background-color: #017575;
}
.links,
.links-hidden {
display: inline-block;
color: rgb(255, 255, 255);
padding: 8px 12px;
text-decoration: none;
font-size: 12px;
}
.links-hidden {
display: block;
}
.links {
display: inline-block;
}
.links-hidden:hover,
.links:hover {
transform: scale(1.2);
}
.dropdown-menu:hover .menu-content {
display: block;
}
</style>
完整的示例程式碼
在下面的示例中，我們將上述步驟的虛擬碼組合成完整的程式碼，以實現下拉導航欄。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.menu-btn {
background-color: #040008;
color: white;
padding: 16px;
font-weight: bolder;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
border: none;
}
.dropdown-menu {
position: relative;
display: inline-block;
}
.menu-content {
display: none;
position: absolute;
background-color: #3ff360;
min-width: 110px;
z-index: 1;
}
nav {
background-color: #017575;
}
.links,
.links-hidden {
display: inline-block;
color: rgb(255, 255, 255);
padding: 8px 12px;
text-decoration: none;
font-size: 12px;
}
.links-hidden {
display: block;
}
.links {
display: inline-block;
}
.links-hidden:hover,
.links:hover {
transform: scale(1.2);
}
.dropdown-menu:hover .menu-content {
display: block;
}
</style>
</head>
<body>
<nav>
<a class="links" href="#">Home</a>
<a class="links" href="#">Services</a>
<a class="links" href="#">Products</a>
<div class="dropdown-menu">
<button class="menu-btn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="menu-content">
<a class="links-hidden" href="#">Contact Us</a>
<a class="links-hidden" href="#">Visit Us</a>
<a class="links-hidden" href="#">About Us</a>
</div>
</div>
</nav>
</body>
</html>
輸出
結論
在這篇文章中，我們學習瞭如何使用 HTML 和 CSS 建立下拉導航欄。記住，在使用者點選或懸停下拉選單之前將其隱藏，並在使用者點選或懸停元素時進行呈現是最重要的部分。
更新於: 2024年7月3日
14K+ 閱讀量
廣告