数据结构
网络
关系型数据库管理系统
操作系统
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+ 阅读量
广告