实现汉堡菜单点击显示效果的教程_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

实现汉堡菜单点击显示效果的教程

2025-10-07

浏览次数：次

返回列表

实现汉堡菜单点击显示效果的教程

本文旨在帮助开发者解决汉堡菜单点击无法显示的问题。通过分析HTML结构、CSS样式以及J*aScript代码，详细讲解如何正确实现汉堡菜单的显示与隐藏功能，并提供优化的代码示例，确保读者能够快速掌握并应用到实际项目中。同时，也介绍了使用Bootstrap框架快速构建响应式导航栏的方法。

理解问题：汉堡菜单的显示逻辑

汉堡菜单通常在小屏幕设备上使用，用于替代传统的导航栏，节省屏幕空间。其基本原理是：

隐藏导航栏： 在小屏幕下，默认隐藏导航栏。
显示汉堡图标： 显示一个汉堡图标（通常是三条横线）。
点击事件： 当用户点击汉堡图标时，显示导航栏。
再次点击： 再次点击汉堡图标时，隐藏导航栏。

分析现有代码

根据提供的信息，HTML结构包含一个header区域，其中包含导航栏n*bar和一个mobile区域，后者包含汉堡图标。CSS样式用于在小屏幕下隐藏n*bar，并在mobile区域显示汉堡图标。J*aScript代码用于监听汉堡图标的点击事件，并添加或移除n*bar的active类，从而控制导航栏的显示与隐藏。

HTML结构

<section id="header">
    <a href="#">@@##@@</a>
    <div>
        <ul id="n*bar">
            <li><a class="active" href="index.html">Home</a></li>
            <li><a href="shop.html">shop</a></li>
            <li><a href="blog.html">blog</a></li>
            <li><a href="about.html">about</a></li>
            <li><a href="contact.html">contact</a></li>
            <li ><a href="cart.html"><i><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bag" viewBox="0 0 16 16"><path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z"/></svg></i></a></li>
        </ul>
    </div>
    <div id="mobile">
        <a href="cart.html"><i><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bag" viewBox="0 0 16 16"><path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z"/></svg></i></a>
        <i id="bar" class="fas fa-outdent"></i>
    </div>
</section>

CSS样式

#mobile{
    display: none;
    align-items: center;
}  
@media (max-width:799px){
    #n*bar{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        position: fixed;
        top: 0;
        right: -300px;
        height: 100vh;
        width: 300px;
        background-color: #fefefe;
        box-shadow: 0 40px 60px rgb(0, 0, 0, 0.1);
        padding: 80px 0 0 10;
    }

    #n*bar.active{
        right: 0px;
    }

    #n*bar li{
        margin-bottom: 25px;
    }
    #mobile{
        display: flex;
        align-items: center;
    }    
    #mobile i{
        color: #1a1a1a;
        font-size: 24px;
        padding-left: 20px;

    }
}

J*aScript代码

const bar  = document.getElementById('bar');
const n* = document.getElementById('n*bar');

if (bar) {
    bar.addEventListener('click', () => {
        n*.classList.add('active');
    })
};

问题分析与解决方案

上述代码的问题在于：

缺少移除active类的逻辑： 点击汉堡图标只会添加active类，导致导航栏显示，但再次点击无法隐藏。

解决方案：

修改J*aScript代码，实现点击切换active类的功能。

const bar  = document.getElementById('bar');
const n* = document.getElementById('n*bar');

if (bar) {
    bar.addEventListener('click', () => {
        n*.classList.toggle('active');
    });
};

使用classList.toggle('active')方法，可以在n*bar元素上添加或移除active类，实现显示与隐藏的切换。

来画数字人|直播|

来画数字人自动化|直播|，无需请真人主播，即可实现24小时|直播|，无缝衔接各大|直播|平台。

57 查看详情来画数字人直播

优化建议

使用更语义化的类名： 例如，可以使用is-active代替active，提高代码可读性。
添加过渡效果： 通过CSS的transition属性，可以为导航栏的显示与隐藏添加过渡效果，提升用户体验。

   #n*bar {
       /* ... existing styles ... */
       transition: right 0.3s ease-in-out; /* 添加过渡效果 */
   }

考虑无障碍性： 确保汉堡菜单在键盘导航和屏幕阅读器下也能正常使用。例如，为汉堡图标添加aria-label属性，描述其功能。

   <i id="bar" class="fas fa-outdent" aria-label="Toggle n*igation"></i>

使用Bootstrap快速实现响应式导航栏

Bootstrap是一个流行的前端框架，提供了丰富的组件和样式，可以快速构建响应式网页。使用Bootstrap可以简化汉堡菜单的实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap N*bar</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>

    <n* class="n*bar n*bar-expand-lg n*bar-light bg-light">
        <a class="n*bar-brand" href="#">N*bar</a>
        <button class="n*bar-toggler" type="button" data-toggle="collapse" data-target="#n*barN*" aria-controls="n*barN*" aria-expanded="false" aria-label="Toggle n*igation">
            <span class="n*bar-toggler-icon"></span>
        </button>
        <div class="collapse n*bar-collapse" id="n*barN*">
            <ul class="n*bar-n*">
                <li class="n*-item active">
                    <a class="n*-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="n*-item">
                    <a class="n*-link" href="#">Features</a>
                </li>
                <li class="n*-item">
                    <a class="n*-link" href="#">Pricing</a>
                </li>
                <li class="n*-item">
                    <a class="n*-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                </li>
            </ul>
        </div>
    </n*>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

</body>
</html>