解锁交互性：使用 HTML、CSS 和 JavaScript 制作汉堡菜单-哈德森博客

简介

在 Web 开发领域，交互性是吸引用户和增强导航体验的关键。汉堡菜单是一种为网站增加功能和视觉吸引力的流行元素。在本文中，我们将深入研究使用 HTML、CSS 和 JavaScript 从头开始创建动态汉堡菜单的过程。

组成部分：HTML 结构

我们的旅程从汉堡菜单的基本结构开始。我们首先设置一个基本的 HTML 文档并定义基本组件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Hamburger Menu</title>
</head>
<body>
    <div class="hamburger_menu">
        <div class="hamburger_bar"></div>
    </div>
    <script src="./script.js"></script>
</body>
</html>

风格：使用 CSS 添加样式

接下来，我们使用 CSS 为汉堡菜单注入风格和个性。以下是我们如何在视觉上增添趣味：

*,
::before,
::after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    width:100%;
    height:100vh;
    background:#475472 ;
    position: relative;
}

.hamburger_menu{
    width:40px;
    height:30px;
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.hamburger_bar{
    height:5px;
    width:100%;
    background: #fff;
    border-radius: 100vh;
    position: absolute;
    transition: all .3s ease-in-out;
}

.hamburger_bar::before{
    content: "";
    width:100%;
    height:5px;
    background: #fff;
    border-radius: 100vh;
    position: absolute;
    top:-8px;
    transition: all .3s ease-in-out;
}

.hamburger_bar::after{
    content: "";
    width:100%;
    height:5px;
    background: #fff;
    border-radius: 100vh;
    position: absolute;
    bottom: -8px;
    transition: all .3s ease-in-out;
}

/* Animation for the hamburger menu */
.open .hamburger_bar {
    background: transparent;
}

.open .hamburger_bar::before {
    transform: rotate(-45deg);
    top: 0;
}

.open .hamburger_bar::after {
    transform: rotate(45deg);
    bottom: 0;
}

神奇之触：使用 JavaScript 添加行为

最后，我们通过使用 JavaScript 添加交互性，使汉堡菜单变得栩栩如生。借助 JavaScript 的魔力，我们的菜单可以响应用户的点击：

const hamburgerMenu = document.querySelector('.hamburger_menu')

hamburgerMenu.addEventListener('click', (e) => {
    e.currentTarget.classList.toggle('open')
    console.log(e.target.classList)
})