Javascript 我如何创建一个滑动侧导航栏，在打开时使网站的其余部分变暗？

所以基本上我有一个网站，我有一个我想要的布局，我需要做一个侧导航栏，滑动打开，而页面的其余部分变暗。但是当我把我的代码放在一起时，它只会模糊我网站的某些部分，而不是整个网站。我做错了什么

所以基本上我有一个网站，我有一个我想要的布局，我需要做一个侧导航栏，滑动打开，而页面的其余部分变暗。但当我把代码放在一起时，它只会使我网站的某个页面变暗，而不是整个页面变暗。我做错了什么

这是网站

HTML

☰ 打开
我的网站
调整浏览器窗口的大小以查看效果

标题
标题说明，2017年12月7日
形象
一些文字

这是因为，工作人员应该为献身于和平事业的精英们服务，因为他们的劳动和财富是暂时的。但是，我们必须尽可能少地进行练习

页脚

CSS

*{
框大小：边框框；
}
身体{
字体系列：Arial；
填充：0px；
背景：#ffffff；
}
.标题{
填充：20px；
文本对齐：左对齐；
颜色：#5656；
}
.标题h1{
字体大小：50px；
文本对齐：右对齐；
颜色：#5656
}
.标题p{
颜色：#5656
}
.leftcolumn{
浮动：对；
宽度：100%；
}
fakeimg先生{
背景色：#aaa；
宽度：100%；
填充：20px；
}
.卡片{
背景色：#d7cec7；
填充：20px；
边际上限：0px；
}
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
.页脚{
填充：20px；
文本对齐：居中；
背景：ddd；
边缘顶部：20px；
}
.侧导航{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#111；
溢出x：隐藏；
过渡：0.5s；
填充顶部：60px；
}
.侧导航a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：25px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.侧导航a:悬停{
颜色：#f1f1；
}
.sidenav.closebtn{
位置：绝对位置；
排名：0；
右：25px；
字体大小：36px；
左边距：50像素；
}
#主要{
过渡：左边距。5s；
}
.身体{
过渡：背景色。5s；
}
@媒体屏幕和屏幕（最大宽度：800px）{
.leftcolumn、.rightcolumn{
宽度：100%；
填充：0；
}
}
@媒体屏幕和屏幕（最大宽度：400px）{
.topnav a{
浮动：无；
宽度：100%；
}
}
@媒体屏幕和屏幕（最大高度：450像素）{
.sidenav{填充顶部：15px；}
.sidenav a{字体大小：18px；}
}

JAVASCRIPT

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.getElementById("myDiv").style.backgroundColor = "rgba(0,0,0,0.4)";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
  document.getElementById("myDiv").style.backgroundColor = "white";
}

---

主要问题是，您只影响了主体标记的背景色，而主体标记上覆盖了所有其他组件

最好的方法是在

main

div之外添加另一个div。我们称之为

overlay

，该容器将位于所有其他div之上，为您提供暗淡效果

函数openNav（）{ document.getElementById（“mySidenav”）.style.width=“250px”； document.getElementById（“main”）.style.marginLeft=“250px”； document.getElementById（“覆盖”）.style.display=“块”； } 函数closeNav（）{ document.getElementById（“mySidenav”）.style.width=“0”； document.getElementById（“main”）.style.marginLeft=“0”； document.getElementById（“覆盖”）.style.display=“无”； }

*{
框大小：边框框；
}
身体{
字体系列：Arial；
填充：0px；
背景：#ffffff；
}
#覆盖层{
左边距：250像素；
位置：固定；/*位于页面内容顶部*/
显示：无；/*默认情况下隐藏*/
宽度：100%；/*全宽（覆盖整页）*/
高度：100%；/*全高（覆盖整页）*/
排名：0；
左：0；
右：0；
底部：0；
背景色：rgba（0,0,0,0.5）；/*带不透明度的黑色背景*/
z-index:2；/*指定堆栈顺序，以防对其他元素使用不同的顺序*/
光标：指针；/*在悬停时添加指针*/
}
.标题{
填充：20px；
文本对齐：左对齐；
颜色：#5656；
}
.标题h1{
字体大小：50px；
文本对齐：右对齐；
颜色：#5656
}
.标题p{
颜色：#5656
}
.leftcolumn{
浮动：对；
宽度：100%；
}
fakeimg先生{
背景色：#aaa；
宽度：100%；
填充：20px；
}
.卡片{
背景色：#d7cec7；
填充：20px；
边际上限：0px；
}
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
.页脚{
填充：20px；
文本对齐：居中；
背景：ddd；
边缘顶部：20px；
}
.侧导航{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#111；
溢出x：隐藏；
过渡：0.5s；
填充顶部：60px；
}
.侧导航a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：25px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.侧导航a:悬停{
颜色：#f1f1；
}
.sidenav.closebtn{
位置：绝对位置；
排名：0；
右：25px；
字体大小：36px；
左边距：50像素；
}
#主要{
过渡：左边距。5s；
}
.身体{
过渡：背景色。5s；
}
@媒体屏幕和屏幕（最大宽度：800px）{
.leftcolumn、.rightcolumn{
宽度：100%；
填充：0；
}
}
@媒体屏幕和屏幕（最大宽度：400px）{
.topnav a{
浮动：无；
宽度：100%；
}
}
@媒体屏幕和屏幕（最大高度：450像素）{
.sidenav{填充顶部：15px；}
.sidenav a{字体大小：18px；}
}
JAVASCRIPT

☰ 打开
我的网站
调整浏览器窗口的大小以查看效果