CSS 下拉菜单学习笔记
什么是下拉菜单
下拉菜单是一种常见的网页交互元素，可以展示多个选项并隐藏在一个触发按钮或链接背后。用户点击触发按钮或链接后，下拉菜单会向下展开并显示选项列表。
创建简单的下拉菜单
HTML
首先，在 HTML 文件中创建触发按钮和下拉菜单的基本结构。
htmlCopy Code<button>下拉菜单</button>
<ul>
<li><a href="#">选项 1</a></li>
<li><a href="#">选项 2</a></li>
<li><a href="#">选项 3</a></li>
</ul>
CSS
然后，在 CSS 文件中设置触发按钮和下拉菜单的样式，并将下拉菜单隐藏起来。
cssCopy Codebutton {
background-color: #4CAF50;
color: white;
padding: 8px 16px;
border: none;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
display: none;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a:hover {
background-color: #f1f1f1;
}
JavaScript
最后，在 JavaScript 文件中编写交互代码来实现下拉菜单的展开与收起。
javascriptCopy Codeconst button = document.querySelector('button');
const menu = document.querySelector('ul');
button.addEventListener('click', function() {
if (menu.style.display === 'none') {
menu.style.display = 'block';
} else {
menu.style.display = 'none';
}
});
示例
以下是一个完整的示例，创建了一个包含三个选项的下拉菜单。
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 下拉菜单学习笔记</title>
<style>
button {
background-color: #4CAF50;
color: white;
padding: 8px 16px;
border: none;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
display: none;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<button>下拉菜单</button>
<ul>
<li><a href="#">选项 1</a></li>
<li><a href="#">选项 2</a></li>
<li><a href="#">选项 3</a></li>
</ul>
<script>
const button = document.querySelector('button');
const menu = document.querySelector('ul');
button.addEventListener('click', function() {
if (menu.style.display === 'none') {
menu.style.display = 'block';
} else {
menu.style.display = 'none';
}
});
</script>
</body>
</html>