Javascript 具有不透明度的Sidebarnav推送内容

试图让“我的菜单”将内容向左推，并使其不透明，直到用户关闭菜单。使用Weebly，页面HTML主要内容如下所示：

菜单是页面上的自定义HTML嵌入项。下面是我为菜单元素编写的代码。正如我之前所说的，它工作得很好，但如果我能让它以不透明度将内容推到左侧，那将是非常棒的

函数openNav（）{ document.getElementById（“mySidenav”）.style.width=“350px”； document.getElementsByClassName（“主包装”）.style.marginLeft=“350px”； document.body.style.backgroundColor=“rgba（0,0,0,0.4）”； } 函数closeNav（）{ document.getElementById（“mySidenav”）.style.width=“0”； document.getElementsByClassName（“主包装”）.style.marginLeft=“0”； document.body.style.backgroundColor=“白色”； }

正文{
字体系列：“Raleyway”，无衬线；
过渡：背景色。5s；
}
.侧导航{
身高：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；
填充：16px；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.侧导航{
填充顶部：15px；
}
.侧导航a{
字号：18px；
}
}
.侧导航菜单{
颜色：252525；
}
.侧导航菜单：悬停{
不透明度：.5；
}
.侧边栏内容{
位置：静态；
背景色：#F9F9F9；
填充：15px；
文字装饰：无；
字体大小：300；
字体大小：20px；
字体系列：Segoe，“Segoe UI”，“DejaVu Sans”，“投石机MS”，Verdana，“Sans serif”；
}
氢{
字体大小：400px；
颜色：#460E72；
字号：x大号；
字体系列：Segoe，“Segoe UI”，“DejaVu Sans”，“投石机MS”，Verdana，Sans serif；
}
a:链接{
文字装饰：无；
颜色：#B6BA；
}
a:参观了{
文字装饰：无；
颜色：#404041；
}
a:悬停{
颜色：#404041；
背景色：#eeeeee；
光标：指针；
}
a:主动的{
文字装饰：无；
颜色：#FF6712；
}
.侧边栏内容{
排名：0；
位置：静态；
宽度：256px；
最大宽度：296px；
左：-275px；
过渡：前0.3名；
}

☰ 知识库导航

函数openNav（）{ document.getElementById（“mySidenav”）.style.width=“350px”； document.body.style.backgroundColor=“rgba（0,0,0,0.4）”； } 函数closeNav（）{ document.getElementById（“mySidenav”）.style.width=“0”； document.body.style.backgroundColor=“白色”； }

正文{
字体系列：“Raleyway”，无衬线；
过渡：背景色。5s；
}
.侧导航{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#111；
溢出x：隐藏；
过渡：0.5s；
填充顶部：60px；
}
.sidenav a.closebtn:悬停{
不透明度：0.8；
背景：#eee；
}
.侧导航a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：25px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.侧导航a:悬停{
不透明度：0.8；
}
.sidenav.closebtn{
位置：绝对位置；
排名：0；
右：0；
字体大小：36px；
左边距：0；
宽度：30px；
填充：5px！重要；
z指数：99；
背景：#111；
}
#主要{
过渡：裕度左600毫秒；
填充：16px；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.侧导航{
填充顶部：15px；
}
.侧导航a{
字号：18px；
}
}
.侧导航菜单{
颜色：252525；
}
.侧导航菜单：悬停{
不透明度：.5；
}
.侧边栏内容{
位置：静态；
背景色：#F9F9F9；
填充：15px；
文字装饰：无；
字体大小：300；
字体大小：20px；
字体系列：Segoe，“Segoe UI”，“DejaVu Sans”，“投石机MS”，Verdana，“Sans serif”；
}
氢{
字体大小：400px；
颜色：#460E72；
字号：x大号；
字体系列：Segoe，“Segoe UI”，“DejaVu Sans”，“投石机MS”，Verdana，Sans serif；
}
a:链接{
文字装饰：无；
颜色：#B6BA；
}
a:参观了{
文字装饰：无；
颜色：#404041；
}
a:悬停{
颜色：#404041；
背景色：#eeeeee；
光标：指针；
}
a:主动的{
文字装饰：无；
颜色：#FF6712；
}
.侧边栏内容{
排名：0；
位置：静态；
宽度：256px；
最大宽度：296px；
左：-275px；
过渡：顶部600毫秒缓解；
}
保险商实验室{
列表样式类型：无；
}
.子菜单{
左侧填充：10px；
}
.子菜单{
左侧填充：20px；
}
.子菜单，.子菜单{
显示：无；
}
#下拉菜单.active+.子菜单，#子下拉菜单.active+.子菜单{
显示：块；
}
法兰西{
显示：内联块；
垂直对齐：中间对齐；
颜色：#fff；
左侧填充：5px；
}
#dropdown.active.fa角度向下：：之前{
内容：“\f106”；
}
#subdropdown.active.fa角度向下：：之前{
内容：“\f106”；
}