Как затемнить основной контент, когда в меню выходит холст - PullRequest
Новая
       16

Как затемнить основной контент, когда в меню выходит холст

0 голосов
/ 21 апреля 2019

У меня есть меню вне холста, скользящее слева, чтобы покрыть страницу. Строительные блоки моей страницы - это divs. Я вызываю функции JavaScript, чтобы открывать и закрывать меню вне холста. Мой основной контент остается таким же, как и в скользящем меню. У меня проблемы с поиском решения по уменьшению яркости основного содержимого и блокированию любого щелчка по нему.

Я пытался использовать свойство background: rgba (0, 0, 0, 0.5)! Важный; для дополнительного div с z-index между меню вне холста и maincontent, но без каких-либо результат. Погуглил, тоже здесь, но не нашел то, что искал. И я не хочу использовать 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 основного содержимого, так как оно вытягивает также меню вне холста, чтобы следовать за ним, создавая таким образом усеченную область бокового меню.

1 Ответ

0 голосов
/ 21 апреля 2019

Сначала переместите ваш основной контент 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>

Наконец, я бы порекомендовал очистить ваш код и использовать прослушиватели событий вместо свойств onclick в вашем html. Примерно так: 

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>
...