Bootstrap 5 点击navbar汉堡菜单展开时实现页面背景变暗的方法咨询

不需要修改你现有导航栏的HTML结构，仅需增加少量CSS和JS代码即可实现和modal完全一致的背景变暗效果：

步骤1：添加自定义CSS #

/* 遮罩样式完全对齐Bootstrap原生modal背景效果 */
.navbar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1029; /* Bootstrap默认navbar的z-index为1030，遮罩放在导航下层 */
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s linear;
}
.navbar-backdrop.show {
    opacity: 1;
    visibility: visible;
}

步骤2：添加JS交互逻辑 #

直接调用Bootstrap 5 collapse组件的原生事件触发遮罩切换，无需额外绑定点击事件：

document.addEventListener('DOMContentLoaded', function() {
    const navbarCollapse = document.getElementById('navbarNav');
    // 动态创建遮罩层，不需要修改原有HTML
    const backdrop = document.createElement('div');
    backdrop.className = 'navbar-backdrop';
    document.body.appendChild(backdrop);
    
    // 菜单展开时显示遮罩
    navbarCollapse.addEventListener('show.bs.collapse', function () {
        backdrop.classList.add('show');
        // 禁止背景滚动，和modal体验完全对齐
        document.body.style.overflow = 'hidden';
    });
    
    // 菜单收起时隐藏遮罩
    navbarCollapse.addEventListener('hide.bs.collapse', function () {
        backdrop.classList.remove('show');
        document.body.style.overflow = '';
    });
    
    // 点击遮罩自动收起菜单，优化交互体验
    backdrop.addEventListener('click', function() {
        bootstrap.Collapse.getInstance(navbarCollapse).hide();
    });
});

注意：只要你页面已经引入了Bootstrap 5完整JS文件，以上代码可直接运行，无需额外依赖。

内容的提问来源于stack exchange，提问作者Øyvind Isaksen