解决汉堡菜单和图片画廊问题的 CSS 和 JavaScript 教程-html教程-PHP中文网

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

DDD

发布： 2025-10-17 12:28:12

原创

755人浏览过

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

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

汉堡菜单无法展开的问题

问题分析

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

解决方案

1. HTML 结构

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

<header>
    <a href="#" class="logo">Glitta Art Studio</a>
    <div class="bx bx-menu" id="menu-icon"></div>

    <ul class="navbar">
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#gallery">Gallery</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</header>

登录后复制

2. CSS 媒体查询

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

立即学习“Java免费学习笔记（深入）”；

Dreamlike.art

内置5种模型的AI图像生成器

查看详情

@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 代码如下：

<div class="bx bx-menu" id="menu-icon" onclick="ToggleClassActive()"></div>

登录后复制

JavaScript 代码：

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

登录后复制

注意事项： 确保 JavaScript 代码在 HTML 元素之后加载。通常，将 <script> 标签放在 </script>

以上就是解决汉堡菜单和图片画廊问题的 CSS 和 JavaScript 教程的详细内容，更多请关注php中文网其它相关文章！