javascript - 画布外菜单滑入时如何使主要内容变暗
问题描述
我有一个从左侧滑动以覆盖页面的非画布菜单。我的页面的构建块是 div。我调用 javascript 函数来打开和关闭画布外菜单。我的主要内容保持在滑动菜单下。我在寻找使主要内容变暗并阻止对其进行任何点击的解决方案方面遇到了问题。
我尝试使用属性背景: rgba(0, 0, 0, 0.5) !important; 对于在画布外菜单和主内容之间具有 z-index 的附加 div,但没有任何结果。谷歌搜索,也在这里,但没有找到我要找的东西。而且我不想使用 Bootstrap 或其他库,以使项目尽可能轻。这是我的代码:
<style>
.sidenav {
height: 100%;
width: 220px;
position: absolute;
z-index: 999;
top: 0;
left: 0;
overflow-x: hidden;
-webkit-transform: translate3d(-220px,0,0);
-webkit-transition: -webkit-transform 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.cover {
position: absolute;
z-index: 900;
left: 0px;
top: 0px;
display: none;
width: 100%;
height: 100%;
z-index: 900;
background: rgba(0, 0, 0, 0) !important;
display: none;
}
.maincontent {
position: relative;
z-index: 20;
margin: auto;
}
</style>
<script>
function openNav() {
document.getElementById("mySidenav").style.webkitTransform = "translate3d(-1px,0,0)";
document.getElementById("cover").style.display = "inline";
document.getElementById("cover").style.background = "rgba(0, 0, 0, 0.5) !important";
}
function closeNav() {
document.getElementById("mySidenav").style.webkitTransform = "translate3d(-220px,0,0)";
document.getElementById("cover").style.display = "none";
document.getElementById("cover").style.background = "rgba(0, 0, 0, 0) !important";
}
</script>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" id="closebtn" class="closebtn" onclick="closeNav()">×</a>
//menue items are hereunder
</div>
<div id="cover" class="cover">
<div id ="maincontent" class="maincontent">
//some elements here
<img id="open_nav" class="fixed-ratio-resize_menu" src="menu.png" alt="menu" onclick="openNav()">
//all the rest of the page is here
</div>
</div>
现在菜单根据需要滑入和滑出,但我在找到一个整洁且运行的解决方案时遇到了问题:1)使菜单下的主要内容区域变暗;2)拦截对主要内容区域的任何点击,或者在点击关闭菜单时忽略它;3) 阻止主要内容的 y 滚动,因为它还会拉出画布菜单以跟随它,从而给出截断的侧菜单区域的外观。
解决方案
首先将您的主要内容 div 移到封面 div 之外。目前,您的主要内容仅在封面可见时可见:
function openNav() {
document.getElementById("mySidenav").style.webkitTransform = "translate3d(-1px,0,0)";
document.getElementById("cover").style.display = "inline";
// document.getElementById("cover").style.background = "rgba(0, 0, 0, 0.5) !important";
}
function closeNav() {
document.getElementById("mySidenav").style.webkitTransform = "translate3d(-220px,0,0)";
document.getElementById("cover").style.display = "none";
// document.getElementById("cover").style.background = "rgba(0, 0, 0, 0) !important";
}
.sidenav {
height: 100%;
width: 220px;
position: absolute;
z-index: 999;
top: 0;
left: 0;
overflow-x: hidden;
-webkit-transform: translate3d(-220px, 0, 0);
-webkit-transition: -webkit-transform 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
background: #fff;
}
.cover {
position: absolute;
z-index: 900;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 900;
background: rgba(0, 0, 0, .5) !important;
display: none;
}
.maincontent {
position: relative;
z-index: 20;
margin: auto;
}
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" id="closebtn" class="closebtn" onclick="closeNav()">×</a> menu items are hereunder
</div>
<div id="cover" class="cover">
</div>
<div id="maincontent" class="maincontent">
some elements here<br>
<img id="open_nav" class="fixed-ratio-resize_menu" src="menu.png" alt="menu" onclick="openNav()"> all the rest of the page is here
</div>
单击封面时是否要关闭导航?然后只需将您添加onclick="closeNav()"
到封面:
function openNav() {
document.getElementById("mySidenav").style.webkitTransform = "translate3d(-1px,0,0)";
document.getElementById("cover").style.display = "inline";
// document.getElementById("cover").style.background = "rgba(0, 0, 0, 0.5) !important";
}
function closeNav() {
document.getElementById("mySidenav").style.webkitTransform = "translate3d(-220px,0,0)";
document.getElementById("cover").style.display = "none";
// document.getElementById("cover").style.background = "rgba(0, 0, 0, 0) !important";
}
.sidenav {
height: 100%;
width: 220px;
position: absolute;
z-index: 999;
top: 0;
left: 0;
overflow-x: hidden;
-webkit-transform: translate3d(-220px, 0, 0);
-webkit-transition: -webkit-transform 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
background: #fff;
}
.cover {
position: absolute;
z-index: 900;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 900;
background: rgba(0, 0, 0, .5) !important;
display: none;
}
.maincontent {
position: relative;
z-index: 20;
margin: auto;
}
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" id="closebtn" class="closebtn" onclick="closeNav()">×</a> menu items are hereunder
</div>
<div id="cover" class="cover" onclick="closeNav()">
</div>
<div id="maincontent" class="maincontent">
some elements here<br>
<img id="open_nav" class="fixed-ratio-resize_menu" src="menu.png" alt="menu" onclick="openNav()"> all the rest of the page is here
</div>
最后,我建议清理您的代码并使用事件侦听器而不是 html 中的 onclick 属性。像这样的东西:
var cover = document.getElementById("cover");
var sideNav = document.getElementById("mySidenav");
var closeNavBtn = document.getElementById("closebtn");
var openNavBtn = document.getElementById("open_nav");
function openNav() {
sideNav.style.webkitTransform = "translate3d(-1px,0,0)";
cover.style.display = "inline";
}
function closeNav() {
sideNav.style.webkitTransform = "translate3d(-220px,0,0)";
cover.style.display = "none";
}
closeNavBtn.addEventListener("click", closeNav);
cover.addEventListener("click", closeNav);
openNavBtn.addEventListener("click", openNav);
.sidenav {
height: 100%;
width: 220px;
position: absolute;
z-index: 999;
top: 0;
left: 0;
overflow-x: hidden;
-webkit-transform: translate3d(-220px, 0, 0);
-webkit-transition: -webkit-transform 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
background: #fff;
}
.cover {
position: absolute;
z-index: 900;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 900;
background: rgba(0, 0, 0, .5);
display: none;
}
.maincontent {
position: relative;
z-index: 20;
margin: auto;
}
<div id="mySidenav" class="sidenav">
<span id="closebtn" class="closebtn">×</span> menu items are hereunder
</div>
<div id="cover" class="cover">
</div>
<div id="maincontent" class="maincontent">
some elements here<br>
<img id="open_nav" class="fixed-ratio-resize_menu" src="menu.png" alt="menu"> all the rest of the page is here
</div>
推荐阅读
- reactjs - 如何在 Laravel Mix for React 中使用提取和代码拆分
- javascript - 页面更改时检查dom中是否存在元素
- c# - 无法为 Xamarin.iOS 中的微光动画渐变层
- python - 我不明白 python 中 file=sys.stderr 的实用性
- vue.js - 重复元素具有相同的展开变量
- php - 使用 PHP MongoDB 扩展通过 SSL/TLS 连接时出现问题:ConnectionTimeoutException:找不到合适的服务器(`serverSelectionTryOnce` 集)
- node.js - 是否可以在 Node.js CLI 应用程序中忽略/删除键输入事件(readline)
- django - 如何打印视图返回的上下文添加模板
- ruby-on-rails - 之后的参数部分。丢失(.com)
- javascript - 如何通过确认确认()框来运行一些代码?