資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 CSS 和 JavaScript 建立一個可點選的下拉選單？
要使用 CSS 和 JavaScript 建立一個可點選的下拉選單，這有助於在網頁中新增更多選項、內容或連結，同時節省空間，避免網頁過於擁擠。使用者應該具備 CSS 和 JavaScript 的基本知識，才能設計併為下拉選單新增互動性。
在這篇文章中，我們有一個按鈕和三個連結，我們的任務是使用 CSS 和 JavaScript 建立一個可點選的下拉選單。
建立可點選下拉選單的步驟
我們將按照以下步驟使用 CSS 和 JavaScript 建立一個可點選的下拉選單
使用 HTML 構建下拉選單
- 要建立下拉選單，我們使用了 按鈕 和三個 錨 標籤來建立一個帶有三個下拉菜單鏈接的按鈕，並將所有連結包裝在一個具有 menuList 類的 div 元素中。
- 我們將包括按鈕和下拉鍊接在內的所有元素都包裝在一個具有 container 類的 div 元素中。
以下是上述使用 HTML 建立可點選下拉選單的步驟的 HTML 實現。
<div class="container">
<button class="drop_btn">Open</button>
<div class="menuList">
<a class="links" href="">Contact Us</a>
<a class="links" href="">Visit Us</a>
<a class="links" href="">About Us</a>
</div>
</div>
使用 CSS 設計下拉選單
- container 類使用 position 屬性將菜單鏈接相對於容器而不是整個頁面定位，並使用 display 屬性僅佔用所需的寬度。
- drop_btn 類透過設定其 背景顏色、文字 顏色、填充、字型大小、寬度、字體系列 並刪除 邊框 來設計“開啟”按鈕。
- 然後，我們使用 menuList 類設計了下拉選單列表。在這裡，我們最初使用 display 屬性隱藏列表，將其相對於容器定位，將 min-width 屬性設定為與按鈕寬度匹配，並在與其他元素重疊時使用 z-index 屬性賦予更高的優先順序。
- 接下來，我們使用 links 類設計了所有錨鏈接。我們設定了它們的 文字對齊，使用 text-decoration 刪除連結的下劃線，設定連結的邊框、顏色和填充。
- 我們對連結和按鈕使用了 :hover 偽類，以便在懸停時更改背景顏色和文字顏色。
以下是上述使用 CSS 設計下拉選單的步驟的 CSS 實現。
.container {
position: relative;
display: inline-block;
}
.drop_btn {
background-color: #031926;
color: white;
padding: 16px;
font-size: 16px;
font-family: Verdana, sans-serif;
border: none;
width: 160px;
}
.menuList {
display: none;
position: absolute;
background-color: #031926;
color: white;
min-width: 160px;
z-index: 1;
}
.links {
text-align: center;
color: rgb(255, 255, 255);
padding: 12px 16px;
text-decoration: none;
display: block;
font-size: 18px;
border: 1px solid #031926;
}
.links:hover {
background-color: white;
color: #031926;
}
.container:hover .drop_btn {
background-color: #04af2f;
color: white;
}
使用 JavaScript 為下拉選單新增功能
- 首先，我們使用 querySelector() 方法分別為按鈕和包含所有連結的選單列表初始化了兩個變數，即 dropdownBtn 和 menuContent。
- 然後，我們使用 addEventListener() 方法向 dropdownBtn 添加了一個點選事件，該方法使用簡單的 if-else 條件語句在單擊按鈕時隱藏和顯示菜單鏈接。
- 單擊按鈕後，如果選單列表隱藏，即 display === ""，則使用 display = "block" 顯示選單列表；如果選單列表已顯示，則單擊按鈕後將其隱藏。
- 類似地，我們添加了一個點選事件，當單擊按鈕和選單列表外部時，如果選單列表正在顯示，則將其隱藏。它使用 contains() 方法檢查點選事件是否在按鈕或選單列表內部。
以下是上述使用 JavaScript 新增功能的步驟的實現。
let dropdownBtn = document.querySelector('.drop_btn');
let menuContent = document.querySelector('.menuList');
dropdownBtn.addEventListener('click', () => {
if (menuContent.style.display === "") {
menuContent.style.display = "block";
}
else {
menuContent.style.display = "";
}
})
document.addEventListener('click', (e) => {
if (!menuContent.contains(e.target) &&
!dropdownBtn.contains(e.target)) {
menuContent.style.display = "";
}
});
完整示例程式碼
以下是使用 CSS 和 JavaScript 建立可點選下拉選單的完整示例程式碼。
<!DOCTYPE html>
<html>
<head>
<title>
Creating a clickable dropdown menu with CSS and JavaScript
</title>
<style>
.container {
position: relative;
display: inline-block;
}
.drop_btn {
background-color: #031926;
color: white;
padding: 16px;
font-size: 16px;
font-family: Verdana, sans-serif;
border: none;
width: 160px;
}
.menuList {
display: none;
position: absolute;
background-color: #031926;
color: white;
min-width: 160px;
z-index: 1;
}
.links {
text-align: center;
color: rgb(255, 255, 255);
padding: 12px 16px;
text-decoration: none;
display: block;
font-size: 18px;
border: 1px solid #031926;
}
.links:hover {
background-color: white;
color: #031926;
}
.container:hover .drop_btn {
background-color: #04af2f;
color: white;
}
</style>
</head>
<body>
<h3>
To Create a Clickable Dropdown Menu
with CSS and JavaScript
</h3>
<div class="container">
<button class="drop_btn">Open</button>
<div class="menuList">
<a class="links" href="">Contact Us</a>
<a class="links" href="">Visit Us</a>
<a class="links" href="">About Us</a>
</div>
</div>
<script>
let dropdownBtn = document.querySelector('.drop_btn');
let menuContent = document.querySelector('.menuList');
dropdownBtn.addEventListener('click', () => {
if (menuContent.style.display === "") {
menuContent.style.display = "block";
} else {
menuContent.style.display = "";
}
})
document.addEventListener('click', (e) => {
if (!menuContent.contains(e.target) &&
!dropdownBtn.contains(e.target)) {
menuContent.style.display = "";
}
});
</script>
</body>
</html>
結論
在這篇文章中，我們瞭解瞭如何使用 CSS 和 JavaScript 建立一個可點選的下拉選單。我們使用了三個步驟的過程，即建立、設計和為下拉按鈕新增互動性。我們使用了基本的 CSS 屬性和點選事件來建立可點選的下拉選單。
更新於：2024-09-24
13K+ 閱讀量
廣告