JavaScript javascript下拉菜单

javascript下拉菜单怎么制作

小亿
160
2023-04-07 15:50:14
栏目: 编程语言

亿 速 云yisu是秉持着高性价比、高质量为更多用户服务的云计算提供商,提供yisu亿 速 云服务器、yisu亿 速云主机、高防服务器、CDN、DNS等产品,这些产品已经在全球各地进行了布点,包括中国、香港、韩国、美国、日本、新加坡、欧洲等地区。

下拉菜单是网站常用的一种交互方式,以下是使用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";

}

});

```

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

0
看了该问题的人还看了