当非画布菜单滑入时如何调暗主要内容

Question

我有一个从左侧滑动以覆盖页面的画布外菜单。 我页面的构建块是div。 我调用javascript函数来打开和关闭画布外菜单。 我的主要内容仍然在滑动菜单下。 我在找到一个简化主要内容并阻止任何点击的解决方案时遇到了问题。

我试图使用属性背景：rgba（0,0,0,0.5）！important; 在off-canvas菜单和maincontent之间使用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()">&times;</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滚动，因为它还拉动画布菜单以跟随它，从而给出截断的侧面菜单区域的外观。

Answer 1

首先将您的主要内容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()">&times;</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()">&times;</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">&times;</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>