下拉菜单 HTML5

原创

mob649e8164659f 2024-06-30 05:52:37 ©著作权

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

如何实现“下拉菜单 HTML5”

1. 整体流程

首先，我们需要了解整个实现“下拉菜单 HTML5”的流程。下面是一个简单的步骤表格：

flowchart TD
    A[创建一个HTML文件] --> B[编写HTML结构]
    B --> C[添加CSS样式]
    C --> D[编写JavaScript代码]

2. 具体步骤

步骤一：创建一个HTML文件

首先，创建一个HTML文件，命名为index.html。

步骤二：编写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="style.css">
</head>
<body>

<div class="dropdown">
    <button class="dropbtn">下拉菜单</button>
    <div class="dropdown-content">
        <a rel="nofollow" href="#">链接1</a>
        <a rel="nofollow" href="#">链接2</a>
        <a rel="nofollow" href="#">链接3</a>
    </div>
</div>

</body>
</html>

步骤三：添加CSS样式

在HTML文件同目录下创建一个style.css文件，并添加以下样式：

/* 下拉菜单按钮样式 */
.dropbtn {
    background-color: #f1f1f1;
    color: black;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* 下拉菜单内容默认隐藏 */
.dropdown-content {
    display: none;
}

/* 下拉菜单内容显示样式 */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* 鼠标悬停时下拉菜单内容显示 */
.dropdown:hover .dropdown-content {
    display: block;
}

步骤四：编写JavaScript代码

在HTML文件中添加以下JavaScript代码：

<script>
    // 获取下拉菜单按钮
    var dropdown = document.getElementsByClassName("dropbtn")[0];
    // 添加点击事件
    dropdown.addEventListener("click", function() {
        // 切换下拉菜单内容的显示状态
        var dropdownContent = this.nextElementSibling;
        if (dropdownContent.style.display === "block") {
            dropdownContent.style.display = "none";
        } else {
            dropdownContent.style.display = "block";
        }
    });
</script>