задать z-index для действия в js

[ArtemiY777]

добрый вечер!

 

есть скрипт,как задать z-index именно в момент при раскрытие меню,иначе перекрывает другие активные кнопки

 

toggle = document.querySelectorAll(".toggle")[0];
nav = document.querySelectorAll("nav")[0];
toggle_open_text = 'Меню';
toggle_close_text = '✖';

toggle.addEventListener('click', function() {
  nav.classList.toggle('open');
  
  if (nav.classList.contains('open')) {
    toggle.innerHTML = toggle_close_text;
  } else {
    toggle.innerHTML = toggle_open_text;
  }
}, false);

setTimeout(function(){
  nav.classList.toggle('open'); 
}, 800);
 

 

 

 

вот css на всякий случай

 

@media screen and (min-width: 420px) {
    nav.top-right {
    display: none;
}

}

  
  nav.top-right {
        
    z-index:4000;
      opacity:0;
      outline: none; /*убрал подсветку блока при выборе меню */
   -webkit-tap-highlight-color: rgba(0,0,0,0);/*убрал подсветку блока при выборе меню */
   -webkit-tap-highlight-color: transparent;/*убрал подсветку блока при выборе меню */
    top: -140px;
    right: -140px; 
   display: block;
  position: fixed;
  width: 500px;
  height: 500px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transform: translate3d(25px, -25px, 0);
  transform: translate3d(25px, -25px, 0);
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9);
  transition: -webkit-transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9);
  -o-transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9);
  transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9);
  transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9), -webkit-transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9);
 
 
 
 
 
  }

.top-right a{

        color: black;
}
    

.disc {

  position: absolute;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  font: 20px Alegreya Sans, sans-serif;
  line-height: 40px;
  padding-top: 10px;
  border-radius: 250px;
  -webkit-transform: scale3d(0.5, 0.5, 0.5) rotate3d(0, 0, 1, 200deg);
  transform: scale3d(0.5, 0.5, 0.5) rotate3d(0, 0, 1, 200deg);
  pointer-events: none;
  opacity: 0;
  cursor: pointer;
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9);
  transition: opacity 0.5s, -webkit-transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9);
  -o-transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9), opacity 0.5s;
  transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9), opacity 0.5s;
  transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9), opacity 0.5s, -webkit-transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9); }
  .disc div {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg); }
  .open .disc {
    pointer-events: auto;
    opacity: 1; }

.l1 {
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: #808080;
  -webkit-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s; }
  .open .l1 {
    -webkit-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 200deg);
    transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 200deg);
    opacity: 1; }
    .open .l1:hover {
      background: shade(#808080, 90%);
      color: tomato;
      -webkit-transition-delay: 0s;
      -o-transition-delay: 0s;
      transition-delay: 0s; }
    .open .l1:active {
      background: shade(#808080, 50%);
      color: tomato; }
    .open .l1.toggle {
      -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
      transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg); }

.l2 {
  top: 50px;
  left: 50px;
  right: 50px;
  bottom: 50px;
  background: #a9a9a9;
  -webkit-transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  transition-delay: 0.1s; }
  .open .l2 {
    -webkit-transition-delay: 0.1s;
    -o-transition-delay: 0.1s;
    transition-delay: 0.1s;
    -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 200deg);
    transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 200deg);
    opacity: 1; }
    .open .l2:hover {
      background: shade(#ff7a39, 90%);
      color: #ff7a39;
      -webkit-transition-delay: 0s;
      -o-transition-delay: 0s;
      transition-delay: 0s; }
    .open .l2:active {
      background: shade(#ff7a39, 50%);
      color: #ff7a39; }
    .open .l2.toggle {
      -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
      transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg); }

.l3 {
  top: 100px;
  left: 100px;
  right: 100px;
  bottom: 100px;
  background: #c0c0c0;
  -webkit-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s; }
  .open .l3 {
    -webkit-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    transition-delay: 0.2s;
    -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 200deg);
    transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 200deg);
    opacity: 1; }
    .open .l3:hover {
      background: shade(#ff912b, 90%);
      color: #ff912b;
      -webkit-transition-delay: 0s;
      -o-transition-delay: 0s;
      transition-delay: 0s; }
    .open .l3:active {
      background: shade(#ff912b, 50%);
      color: #ff912b; }
    .open .l3.toggle {
      -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
      transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg); }

.l4 {
  top: 150px;
  left: 150px;
  right: 150px;
  bottom: 150px;
  background: #d3d3d3;
  -webkit-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  transition-delay: 0.3s; }
  .open .l4 {
    -webkit-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    transition-delay: 0.3s;
    -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 200deg);
    transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 200deg);
    opacity: 1; }
    .open .l4:hover {
      background: shade(#ffa91c, 90%);
      color: #ffa91c;
      -webkit-transition-delay: 0s;
      -o-transition-delay: 0s;
      transition-delay: 0s; }
    .open .l4:active {
      background: shade(#ffa91c, 50%);
      color: #ffa91c; }
    .open .l4.toggle {
      -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
      transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg); }

.l5 {
    font-weight: 700;
  top: 200px;
  left: 200px;
  right: 200px;
  bottom: 200px;
  background: #efefef;
  -webkit-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  transition-delay: 0.4s; }
  .open .l5 {
    -webkit-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    transition-delay: 0.4s;
    -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 200deg);
    transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 200deg);
    opacity: 1; }
    .open .l5:hover {
      background: shade(#ffc00e, 90%);
      color: #ffc00e;
      -webkit-transition-delay: 0s;
      -o-transition-delay: 0s;
      transition-delay: 0s; }
    .open .l5:active {
      background: shade(#ffc00e, 50%);
      color: #ffc00e; }
    .open .l5.toggle {
      -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
      transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg); }

.toggle {
  line-height: 100px;
  padding: 0;
  width: 100px;
  background: #efefef  ;
  opacity: 1;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  pointer-events: auto;
  -webkit-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s; }
  .open .toggle {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg); }
  .toggle:hover {
    background: shade(gold, 90%);}
  .toggle:active {
    background: shade(gold, 50%);
    color: rgba(255, 215, 0, 0.5);
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s; }
    

[Dimasscus]

Добавьте класс active и повесьте на js на собьітие открьітия

[ArtemiY777]

Спасибо!