Jquery 滑入导航覆盖

我有一个

屏幕外导航

的模板，当单击

切换

时，该模板从左侧滑入。我希望发生的是当

nav

滑入时，一个覆盖层会使其背后的内容变暗。为此，我将页面内容包装在一个

div

中，并尝试添加一个BG颜色来覆盖内容，但似乎不起作用

有人能帮忙吗？代码如下：

$（文档）.ready（函数（）{
变量切换=$（'.toggle'）；
变量osNav=$（'.屏幕外nav'）；
var pageContainer=$（'.page container'）；
切换。单击（函数（）{
osNav.toggleClass（'showNav'）；
pageContainer.toggleClass（'navOnScreen'）
});
})

*{
保证金：0；
填充：0；
溢出：隐藏；
}
导航{
宽度：100%；
高度：70像素；
//边框：1px实心；
背景色：#f1f1；
显示器：flex；
弯曲方向：行；
证明内容：柔性端；
}
.切换{
高度：50px；
宽度：50px；
边框：1px实心；
背景色：rgba（17,17,17,9）；
不透明度：.9；
利润率：20px 15px；
光标：指针；
自对准：居中；
}
主要{
高度：1000px；
背景色：#ddd；
}
.屏幕外导航{
宽度：340px；
高度：100vh；
位置：固定；
左边距：0；
溢出：隐藏；
z指数：2000；
背景色：rgba（17,17,17,9）；
过渡：所有.3s易于输入输出；
转换：translate3d（-340px，0,0）；
}
.showNav{
变换：translate3d（0,0,0）；
}
.页面容器{
变换：translate3d（0,0,0）；
过渡：所有.3s易于输入输出；
转换延迟：.1s；
}
.page-container.navOn屏幕{
背景色：rgba（0,0,0,6）；
变换：translate3d（20px，0,0）；
}

从
nav
和
main
中删除
背景色（当前与
主体的背景色重叠），如

在JS中：

// Toggle a class which removes background-color from main & nav
nav.toggleClass('remove-bg')
main.toggleClass('remove-bg')

/* Resetting background-color to transparent */
.remove-bg {
  background: transparent;
}

/* To get the transition well */
main, nav {
  transition: all .3s ease-in-out;
  transition-delay: .1s;
}

CSS中的：

// Toggle a class which removes background-color from main & nav
nav.toggleClass('remove-bg')
main.toggleClass('remove-bg')

/* Resetting background-color to transparent */
.remove-bg {
  background: transparent;
}

/* To get the transition well */
main, nav {
  transition: all .3s ease-in-out;
  transition-delay: .1s;
}

看看下面的片段：

// Toggle a class which removes background-color from main & nav
nav.toggleClass('remove-bg')
main.toggleClass('remove-bg')

/* Resetting background-color to transparent */
.remove-bg {
  background: transparent;
}

/* To get the transition well */
main, nav {
  transition: all .3s ease-in-out;
  transition-delay: .1s;
}


$（文档）.ready（函数（）{
变量切换=$（'.toggle'）；
变量osNav=$（'.屏幕外nav'）；
var pageContainer=$（'.page container'）；
var-nav=$（'nav'）；
var main=$（'main'）；
切换。单击（函数（）{
osNav.toggleClass（'showNav'）；
pageContainer.toggleClass（'navOnScreen'）
导航切换类（'remove-bg'）
main.toggleClass（'remove-bg'））
});
})
*{
保证金：0；
填充：0；
溢出：隐藏；
}
导航{
宽度：100%；
高度：70像素；
//边框：1px实心；
背景色：#f1f1；
显示器：flex；
弯曲方向：行；
证明内容：柔性端；
过渡：所有.3s易于输入输出；
转换延迟：.1s；
}
.切换{
高度：50px；
宽度：50px；
边框：1px实心；
背景色：rgba（17,17,17,9）；
不透明度：.9；
利润率：20px 15px；
光标：指针；
自对准：居中；
}
主要{
高度：1000px；
背景色：#ddd；
过渡：所有.3s易于输入输出；
转换延迟：.1s；
}
.屏幕外导航{
宽度：340px；
高度：100vh；
位置：固定；
左边距：0；
溢出：隐藏；
z指数：2000；
背景色：rgba（17,17,17,9）；
过渡：所有.3s易于输入输出；
转换：translate3d（-340px，0,0）；
}
.showNav{
变换：translate3d（0,0,0）；
}
.页面容器{
变换：translate3d（0,0,0）；
过渡：所有.3s易于输入输出；
转换延迟：.1s；
}
.page-container.navOn屏幕{
背景色：rgba（0,0,0,6）；
变换：translate3d（20px，0,0）；
}
.删除背景{
背景：透明；
}
您可以执行以下操作：


$（文档）.ready（函数（）{
变量切换=$（'.toggle'）；
变量osNav=$（'.屏幕外nav'）；
var pageContainer=$（'.page container'）；
var darkLayer=$（'main，nav'）；
切换。单击（函数（）{
$（this.toggleClass（'border'）；
osNav.toggleClass（'showNav'）；
darkLayer.toggleClass（'darkLayer'）；
pageContainer.toggleClass（'navOnScreen'）；
});
})
*{
保证金：0；
填充：0；
溢出：隐藏；
}
导航{
宽度：100%；
高度：70像素；
//边框：1px实心；
背景色：#f1f1；
显示器：flex；
弯曲方向：行；
证明内容：柔性端；
}
.切换{
高度：50px；
宽度：50px；
边框：1px实心；
背景色：rgba（17,17,17,9）；
不透明度：.9；
利润率：20px 15px；
光标：指针；
自对准：居中；
}
主要{
高度：1000px；
背景色：#ddd；
}
.屏幕外导航{
宽度：340px；
高度：100vh；
位置：固定；
左边距：0；
溢出：隐藏；
z指数：2000；
背景色：rgba（17,17,17,9）；
过渡：所有.3s易于输入输出；
转换：translate3d（-340px，0,0）；
}
.showNav{
变换：translate3d（0,0,0）；
}
.页面容器{
变换：translate3d（0,0,0）；
过渡：所有.3s易于输入输出；
转换延迟：.1s；
}
.page-container.navOn屏幕{
背景色：rgba（0,0,0,6）；
变换：translate3d（20px，0,0）；
}
darkLayer先生{
背景：#333；
不透明度：.5；
过渡：全部3秒线性；
}
.边界{
边框颜色：#fff；
过渡：全部3秒线性；
}
我通常做的是添加另一个名为overlay的元素，并在切换导航项以产生该效果时进行切换。我也会将切换按钮移出导航，这样你就可以给它一个绝对位置，因为你需要应用一个z索引，以便在启用覆盖时使其可见。见下文。。。希望有帮助


$（文档）.ready（函数（）{
变量切换=$（'.toggle'）；
变量osNav=$（'.屏幕外nav'）；
var overlay=$（'.overlay'）；
var pageContainer=$（'.page container'）；
切换。单击（函数（）{
osNav.toggleClass（'showNav'）；
overlay.toggleClass（'showNav'）；
pageContainer.toggleClass（'navOnScreen'）
});
})
*{
保证金：0；
填充：0；
溢出：隐藏；
}
导航{
宽度：100%；
高度：70像素；
//边框：1px实心；
背景色：#f1f1；
显示器：flex；
弯曲方向：行；
证明内容：柔性端；
}
.切换{
高度：50px；
宽度：50px；
边框：1px实心；
背景色：rgba（17,17,17,9）；
不透明度：.9；
/*利润率：20px 15px*/
光标：指针