Html 实现动态添加下拉菜单
要实现动态添加下拉菜单，你需要使用 JavaScript 来修改 HTML 和 CSS，以及处理菜单的事件。
下面是一个简单的例子，演示了如何使用 JavaScript 动态创建一个下拉菜单：
<!DOCTYPE html>
<html>
<head>
<title>动态添加下拉菜单</title>
<style type="text/css">
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h2>动态添加下拉菜单</h2>
<div class="dropdown" id="myDropdown">
<button>菜单</button>
</div>
<script>
// 创建一个数组来存储菜单项
var menuItems = [
"首页",
"产品",
"服务",
"关于我们",
"联系我们"
];
// 获取菜单容器
var dropdown = document.getElementById("myDropdown");
// 创建一个下拉菜单
var dropdownContent = document.createElement("div");
dropdownContent.classList.add("dropdown-content");
// 将菜单项添加到下拉菜单中
for (var i = 0; i < menuItems.length; i++) {
var menuItem = document.createElement("a");
menuItem.href = "#";
menuItem.textContent = menuItems[i];
dropdownContent.appendChild(menuItem);
}
// 将下拉菜单添加到菜单容器中
dropdown.appendChild(dropdownContent);
</script>
</body>
</html>
在这个例子中，我们首先创建一个空的 <div> 元素来作为菜单容器，然后使用 JavaScript 动态创建一个包含菜单项的下拉菜单，并将其添加到菜单容器中。我们还使用 CSS 来设置菜单的样式和行为。最终效果如下：
![动态添加下拉菜单](https://cdn.jsdelivr.net/gh/0voice/Introduction-to-web-development/img/HTML_dynamic_dropdown_menu.png
原文地址: https://www.cveoy.top/t/topic/hipH 著作权归作者所有。请勿转载和采集!