当前位置：首页 > 行业动态 > 正文

css结合js制作下拉菜单示例代码

admin
行业动态
2025-01-30
6

，，本文介绍了使用CSS和JavaScript制作下拉菜单的示例代码。通过HTML结构定义菜单，CSS进行样式设计，JavaScript控制显示与隐藏，实现交互效果。

在网页设计中，下拉菜单是一种常见的用户界面元素，它允许用户从一组选项中选择一个，使用CSS和JavaScript结合可以制作出美观且功能丰富的下拉菜单，下面是一个示例代码，展示了如何用CSS和JavaScript创建一个基本的下拉菜单。

css结合js制作下拉菜单示例代码第1张

HTML结构

我们需要一个基本的HTML结构来容纳我们的下拉菜单。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉菜单示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div >
        <button >菜单</button>
        <div >
            <a href="">链接 1</a>
            <a href="">链接 2</a>
            <a href="">链接 3</a>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS样式

我们使用CSS来样式化下拉菜单。

/* styles.css */
body {
    font-family: Arial, sans-serif;
}
.dropdown {
    position: relative;
    display: inline-block;
}
.dropbtn {
    background-color: 4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown-content a:hover {background-color: f1f1f1}
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown:hover .dropbtn {
    background-color: 3e8e41;
}

JavaScript交互

我们用JavaScript添加一些交互效果，使下拉菜单更加动态。

// script.js
document.addEventListener("DOMContentLoaded", function() {
    const dropdown = document.querySelector('.dropdown');
    const dropbtn = document.querySelector('.dropbtn');
    const dropdownContent = document.querySelector('.dropdown-content');
    dropbtn.addEventListener('click', function() {
        dropdownContent.classList.toggle('show');
    });
    // 点击外部区域关闭下拉菜单
    window.addEventListener('click', function(event) {
        if (!dropdown.contains(event.target)) {
            dropdownContent.classList.remove('show');
        }
    });
});