解决汉堡菜单和图片画廊问题的 CSS 和 JavaScript 教程

本文旨在解决在响应式网站开发中遇到的两个常见问题：汉堡菜单无法正常展开以及图片画廊中链接导致的布局错乱。我们将提供详细的 HTML、CSS 和 JavaScript 代码示例，并针对问题原因进行分析，最终给出解决方案，帮助开发者更好地理解和解决类似问题。

汉堡菜单无法展开的问题

问题分析

当网站缩小到一定尺寸时，导航栏会收缩成汉堡菜单。问题在于，点击汉堡菜单图标时，本应添加或移除 active 类来控制导航栏的显示与隐藏，但实际上并没有生效。

解决方案

1. HTML 结构

首先，确保 HTML 结构正确。以下是包含导航栏和汉堡菜单图标的 HTML 代码：

    Glitta Art Studio
    

    

        
Home
        
About
        
Gallery
        
Contact
    

2. CSS 媒体查询

接下来，检查 CSS 媒体查询是否正确设置。以下是针对小屏幕的 CSS 代码：

@media(max-width: 1140px) {
    section {
        padding: 50px 8%;
    }
    #menu-icon {
        display: initial;
        color: var(--text-color);
    }
    header .navbar {
        position: absolute;
        top: -400px;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        text-align: center;
        background: #2b2640;
        transition: .3s;
    }
        header .navbar .active {
            top: 70px;
        }
        .navbar a {
            padding: 1.5rem;
            display: block;
        }
        .col {
            width: 50%;
            margin-bottom: 10px;
        }
}

3. JavaScript 代码

最初的 JavaScript 代码使用 addEventListener 来监听点击事件。可以尝试直接在 HTML 元素中调用函数，并修改 JavaScript 代码如下：

JavaScript 代码：

function ToggleClassActive(){
    let menu = document.querySelector("#menu-icon");
    let navbar = document.querySelector(".navbar");
    navbar.classList.toggle("active");
}

注意事项： 确保 JavaScript 代码在 HTML 元素之后加载。通常，将