добрый вечер!
есть скрипт,как задать 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; }
