点击汉堡菜单时隐藏元素及移动端响应式导航栏与背景视频冲突问题咨询

问题核心原因 #

• 导航栏与背景视频存在层级冲突，导航默认z-index低于视频容器，导致导航被覆盖无法正常交互
• CSS存在语法错误：max-width:875px的媒体查询嵌套在max-width:650px的媒体查询内部，原生CSS不支持该嵌套写法，且.top-hero.display: none;是无效属性写法
• 缺少菜单开闭时对背景视频的联动控制逻辑
• JS代码存在冗余报错行var body = body;，会触发未定义变量错误

代码修改方案 #

1. 修改JS代码

删除冗余报错行，新增背景视频容器的联动控制逻辑：

var navList = document.getElementById("nav-lists");
var topHero = document.getElementById("hero");

function Show() {
  navList.classList.add("_Menus-show");
  topHero.classList.add("nav-open");
}

function Hide() {
  navList.classList.remove("_Menus-show");
  topHero.classList.remove("nav-open");
}

2. 修正并新增CSS样式

首先删除CSS代码开头多余的<style>标签，然后做以下修改：

/* 给导航容器新增层级属性，原有其他属性保持不变 */
.container {
  position: relative;
  z-index: 999;
}

/* 给导航菜单列表新增层级属性，原有其他属性保持不变 */
.container .navbar ul {
  z-index: 9999;
}

/* 新增背景视频容器的控制样式 */
.top-hero {
  position: relative;
  z-index: 1;
}
.top-hero.nav-open {
  display: none;
}

/* 将原本嵌套在650px媒体查询内部的875px媒体查询移到外部，修正语法错误 */
@media screen and (max-width:875px) {
  .navbar.responsive {
    position: fixed;
    width: 100%;
    height: 100px;
    background-color: rgba(236, 201, 205, 1);
    transition: background-color .6s;
  }
}

修改完成后即可实现：移动端点击汉堡菜单时背景视频自动隐藏，导航正常滑入显示，关闭菜单后背景视频恢复显示，全程保留背景视频的原有功能。

内容的提问来源于stack exchange，提问作者JKR