javascript下拉菜单怎么制作

javascript下拉菜单怎样制作

下拉菜单是网站经常使用的一种交互方式，以下是使用javascript制作下拉菜单的步骤：

1、HTML结构

在HTML中创建ul和li元素，ul元素为下拉菜单的容器，li元素为下拉菜单的选项。

“`html

下拉菜单按钮

“`

2、CSS样式

使用CSS样式设置下拉菜单的样式，包括菜单容器的位置、背景、边框等。

“`css

.dropdown {

position: relative;

display: inline-block;

}

.dropdown-btn {

background-color: #4CAF50;

color: white;

padding: 10px 24px;

border: none;

cursor: pointer;

}

.dropdown-menu {

display: none;

position: absolute;

z-index: 1;

background-color: #f1f1f1;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

}

.dropdown-menu li {

padding: 12px 16px;

}

.dropdown-menu li a {

color: black;

text-decoration: none;

}

.dropdown-menu li:hover {

background-color: #ddd;

}

“`

3、JavaScript代码

使用JavaScript代码实现下拉菜单的显示和隐藏效果，通过操作CSS样式来实现。

“`javascript

// 获得下拉菜单按钮和菜单容器

var dropdownBtn = document.querySelector(".dropdown-btn");

var dropdownMenu = document.querySelector(".dropdown-menu");

// 点击按钮显示/隐藏下拉菜单

dropdownBtn.addEventListener("click", function() {

dropdownMenu.style.display = (dropdownMenu.style.display === "none") ? "block" : "none";

});

// 点击菜单外部隐藏下拉菜单

window.addEventListener("click", function(event) {

if (!event.target.matches(".dropdown-btn")) {

dropdownMenu.style.display = "none";

}

});

“`

使用以上步骤，我们就能够在网页中制作一个简单的下拉菜单了。需要注意的是，以上代码只是一个简单的示例，实际利用中可能需要根据具体需求进行修改和优化。

本文来源：https://www.yuntue.com/post/75185.html | 云服务器网，转载请注明出处！