html5 下拉菜单分组

原创

mob64ca12dd455e 2024-06-08 05:21:27 ©著作权

文章标签 下拉菜单 HTML html5 文章分类 HTML5 移动开发

©著作权归作者所有：来自51CTO博客作者mob64ca12dd455e的原创作品，请联系作者获取转载授权，否则将追究法律责任

如何实现html5下拉菜单分组

一、流程概述

为了实现html5下拉菜单分组，我们需要经过以下步骤：

步骤	操作
1	创建一个HTML文件
2	添加HTML结构
3	使用CSS样式设置菜单样式
4	使用JavaScript实现下拉功能

二、具体步骤及代码示例

1. 创建一个HTML文件

首先，我们需要创建一个HTML文件，并在其中添加基本的结构：

<!DOCTYPE html>
<html>
<head>
    <title>下拉菜单分组</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="dropdown">
        <button class="dropbtn">菜单</button>
        <div class="dropdown-content">
            <a rel="nofollow" href="#">分组1</a>
            <a rel="nofollow" href="#">分组1</a>
            <a rel="nofollow" href="#">分组2</a>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

2. 添加HTML结构

在HTML中添加下拉菜单的基本结构，包括按钮和下拉内容：

<div class="dropdown">
    <button class="dropbtn">菜单</button>
    <div class="dropdown-content">
        <a rel="nofollow" href="#">分组1</a>
        <a rel="nofollow" href="#">分组1</a>
        <a rel="nofollow" href="#">分组2</a>
    </div>
</div>

3. 使用CSS样式设置菜单样式

在一个独立的CSS文件中设置下拉菜单的样式：

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0 8px 16px 0 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;
}

.show {
    display: block;
}

4. 使用JavaScript实现下拉功能

在一个独立的JavaScript文件中实现下拉菜单的功能，使其能够展示和隐藏：

document.addEventListener("DOMContentLoaded", function() {
    var dropdown = document.querySelector('.dropdown');

    dropdown.addEventListener('click', function() {
        this.classList.toggle('show');
    });

    window.onclick = function(event) {
        if (!event.target.matches('.dropbtn')) {
            var dropdowns = document.getElementsByClassName('dropdown-content');
            for (var i = 0; i < dropdowns.length; i++) {
                var openDropdown = dropdowns[i];
                if (openDropdown.classList.contains('show')) {
                    openDropdown.classList.remove('show');
                }
            }
        }
    }
});