Javascript 显示整页导航阴影

我正在为一个个人项目设计一个导航灯罩，它在所有设备上看起来都一样，而在移动设备上则完全一样。目前我正在使用☰ 和×用于导航，但我想最终动画这些和阴影开放，但我需要它的功能第一

但我目前的问题是允许导航阴影显示在站点顶部，并使用×。许多移动网站的一个问题是，你不能点击下拉菜单下面的其他地方，这就缓解了用户试图以不同方式关闭它的问题

这是我正在使用的代码

.网站标题{ 高度：80px； 背景色：FFFFFF； 显示：内联flex； 位置：固定； 排名：0； 左：0； 右：0； z指数：1； 盒影：0px 0.5px 10px 000000； } .站点标题填充{ 高度：80px； } .网站标志容器{ 高度：60px； 左边距：20px； 右边距：自动； 边缘顶部：10px； 边缘底部：10px； 显示：块； 浮动：左； } .网站标志{ 高度：60px； 宽度：自动； 浮动：左； } .站点导航操作容器{ 高度：50px； 宽度：50px； 最大宽度：50px； 左边距：10px； 右边距：10px； 边缘顶部：15px； 边缘底部：15px； 显示：块； 浮动：对； 文本对齐：右对齐； } .场地导航{ 身高：100%； 左：0px； 位置：固定； 顶部：0px； 宽度：100%； 背景：3399ff； z指数：2； } .网站导航内容{ 宽度：20%； 位置：绝对位置； 左：50%； 最高：50%； -webkit转换：翻译-50%，-50%； 转化：转化-50%，-50%； } @仅介质屏幕，最大宽度：500px{ .网站导航内容{ 宽度：自动； 位置：绝对位置； 左：50%； 最高：50%； -webkit转换：翻译-50%，-50%； 转化：转化-50%，-50%； } } .网站导航页面{ 文本对齐：居中； }

☰

X中的站点日志

第1页

第2页

第3页

第4页

第5页

使用元素在状态之间切换。状态可以在CSS中定义，比如它在默认情况下是什么样子，激活时是什么样子。在本例中，您需要将元素的状态更改为默认情况下隐藏，并在单击按钮时显示

由于不想导航，请删除按钮上的onclick属性。相反，在JavaScript中选择它们并监听单击。为它们提供相同的事件处理程序函数，该函数将在site nav元素上切换类

在CSS中，将不透明度：0和可见性：隐藏添加到.site nav样式。这将使元素透明并完全隐藏它。这些属性还允许您使用从可见到不可见的转换，反之亦然

const navButtons=document.queryselectoral'button.nav'； const siteNav=document.querySelector'.site nav'； 函数onclick事件{ classList.toggle'active'； } navButtons.forEachbutton=>button.addEventListener'click'，onClick； .网站标题{ 高度：80px； 背景色：FFFFFF； 显示：内联flex； 位置：固定； 排名：0； 左：0； 右：0； z指数：1； 盒影：0px 0.5px 10px 000000； } .站点标题填充{ 高度：80px； } .网站标志容器{ 高度：60px； 左边距：20px； 右边距：自动； 边缘顶部：10px； 边缘底部：10px； 显示：块； 浮动：左； } .网站标志{ 高度：60px； 宽度：自动； 浮动：左； } .站点导航操作容器{ 高度：50px； 宽度：50px； 最大宽度：50px； 左边距：10px； 右边距：10px； 边缘顶部：15px； 边缘底部：15px； 显示：块； 浮动：对； 文本对齐：右对齐； } .场地导航{ 身高：100%； 左：0px； 位置：固定； 顶部：0px； 宽度：100%； 背景：3399ff； z指数：2； 不透明度：0； 能见度：0； 过渡：不透明度150ms缓进缓出，可见性150ms缓进缓出； } .site-nav.active{ 不透明度：1； 能见度：可见； } .网站导航内容{ 宽度：20%； 位置：绝对位置； 左：50%； 最高：50%； -webkit转换：翻译-50%，-50%； 转化：转化-50%，-50%； } @仅介质屏幕，最大宽度：500px{ .网站导航内容{ 宽度：自动； 位置：绝对位置； 左：50%； 最高：50%； -webkit转换：翻译-50%，-50%； 转化：转化-50%，-50%； } } .网站导航页面{ 文本对齐：居中； }

☰

X中的站点日志

第1页

第2页

第3页

第4页

第5页

---

这在代码段中有效，但在我的站点上的脚本标记中不起作用。你知道为什么会这样吗？我欣赏添加的轻微动画。我在争论是否有一个按钮总是在顶部作为切换，这样它可以在两个按钮之间设置动画☰ 和×控制按钮点击的脚本

---

应位于HTML中的按钮之后。通常，在脚本中使用的所有其他HTML元素之后，最好将标记放在结束标记之前。否则执行脚本时HTML元素将不存在。我丢失了一些标记，我的CSS被缓存，所以没有立即更新-谢谢你的帮助。