<!--Меню Zero-блока-->
<script>
$('.uc-menu').addClass('NavBlock');
$('.menu-shape').addClass('NavIconWrap Trigger');
</script>
<!--Настройки меню-->
<style>
/*Указываем разрешение, на котором появится меню (1920px)*/
@media screen and (max-width: 1920px) {
.NavIconWrap {
display: flex !important;
}
:root {
/*Иконка, полоски меню*/
--BurgerColor: #000; /*цвет полосок на иконке меню*/
--BurgerActiveColor: #000; /*цвет полосок на иконке меню при клике*/
/*Фон иконки меню*/
--BorderRadius: 100px; /*скругление углов у меню*/
--BorderMenuColor: transparent; /*цвет обводки меню*/
--BorderMenuActiveColor: transparent; /*цвет обводки меню при открытии*/
--BorderMenuSize: 1px solid; /*толщина обводки меню*/
--NavIconWrapColor: transparent; /*цвет фона иконки меню: transparent - прозрачное*/
--NavIconActiveWrapColor: transparent; /*цвет фона иконки меню при клике: transparent - прозрачное*/
--NavIconActivePadding: 47px; /*отступ меню справа, при открытии/
/*Расположение меню*/
--NavTop: 13px; /*отступ иконки меню сверху*/
--NavRight: 30px; /*отступ иконки меню справа*/
--NavLeft:; /* отступ иконки меню слева*/
--NavBottom:; /* отступ иконки меню снизу*/
--MenuPosition: absolute; /* позиционирование меню: absolute - без фиксации, при скролле. fixed - с фиксацией */
--MenuPadding: 15px; /*растояние для сдвига текста на меню вверх (меню-закрыть) */
/*Расположение меню на телефоне*/
--NavTop480: 13px; /*отступ иконки меню сверху*/
--NavRight480: 20px; /*отступ иконки меню справа*/
--NavLeft480:; /*отступ иконки меню слева*/
--NavBottom480:; /*отступ иконки меню снизу*/
--MenuPosition480: absolute; /*позиционирование меню на телефоне: absolute - без фиксации, при скролле. fixed - с фиксацией */
</style>
<!--Иконка меню-->
<div class="NavIconWrap Trigger">
<div class="NavIcon cursor-stick-area">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<style>
:root {
--Nav_1920_Width: 100%; /*ширина на десктопе*/
--Nav_1200_Width: 100%; /*ширина на планшете*/
--Nav_960_Width: 100%; /*ширина на мелком планшете*/
--Nav_640_Width: 100%; /*ширина на мобилке в горизонтали*/
--Nav_480_Width: 100%; /*ширина на мобилке*/
--Nav_1920_Slide: -100%; /*на десктопе*/
--Nav_1200_Slide: -100%; /*на планшете*/
--Nav_960_Slide: -100%; /*на мелком планшете*/
--Nav_640_Slide: -100%; /*на мобилке в горизонтали*/
--Nav_480_Slide: -100%; /*на мобилке*/
}
</style>
<!--Подключаем стили меню-->
<style>
.NavBlock {
position: fixed;
top: -100vh;
right: 0;
bottom: 0;
width: 100%;
height: 100vh;
-webkit-transition: -webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1);
transition:-webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1);
transition:transform 900ms cubic-bezier(0.77, 0, 0.175, 1);
transition:transform 900ms cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1);
z-index: 310;
overflow-y: hidden;
overflow-x: hidden;
}
.NavBlock .t396__artboard {
min-height:100vh!important;
height:100vh!important;
}
.NavBlock.show {
transition-delay:opacity 900ms!important;
-webkit-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1) 120ms;
transition: -webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1) 120ms;
transition: transform 900ms cubic-bezier(0.77, 0, 0.175, 1) 120ms;
transition: transform 900ms cubic-bezier(0.77, 0, 0.175, 1) 120ms, -webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1) 120ms;
}
.NavActive {
height:100vh!important;
overflow:hidden!important;
}
.Trigger {
z-index: 3050!important;
}
.NavIconWrap {
position:var(--MenuPosition);
top: var(--NavTop);
right: var(--NavRight);
left: var(--NavLeft);
bottom: var(--NavBottom);
padding: 10px;
border: var(--BorderMenuSize);
border-radius: var(--BorderRadius);
border-color: var(--BorderMenuColor);
overflow: hidden;
background: var(--NavIconWrapColor);
height: 30px;
width: 30px;
display: none;
justify-content: center;
align-items: center;
cursor: pointer;
}
.NavIconWrap.open {
background: var(--NavIconActiveWrapColor);
right: var(--NavIconActivePadding);
border: var(--BorderMenuSize);
border-radius: var(--BorderRadius);
border-color: var(--BorderMenuActiveColor);
}
.NavIcon {
top: 0px;
left: 0px;
width: 26px;
height: 20px;
overflow: hidden;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
.NavIcon span {
display: block;
position: absolute;
height: 2px;
width: 50%;
background: var(--BurgerColor);
opacity: 1;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
overflow:hidden;
}
.NavIcon.open span {
background: var(--BurgerActiveColor);
}
.NavIcon span:nth-child(even) {
left: 50%;
border-radius: 0 20px 20px 0;
}
.NavIcon span:nth-child(odd) {
left:0px;
border-radius: 20px 0 0 20px;
}
.NavIcon span:nth-child(1), .NavIcon span:nth-child(2) {
top: 4px;
}
.NavIcon span:nth-child(3), .NavIcon span:nth-child(4) {
top: 10px;
}
.NavIcon span:nth-child(5), .NavIcon span:nth-child(6) {
top: 16px;
}
.NavIcon.open span:nth-child(1),.NavIcon.open span:nth-child(6) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.NavIcon.open span:nth-child(2),.NavIcon.open span:nth-child(5) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.NavIcon.open span:nth-child(1) {
left: 2px;
top: 4px;
}
.NavIcon.open span:nth-child(2) {
left: calc(50% - 2px);
top: 4px;
}
.NavIcon.open span:nth-child(3) {
left: -50%;
opacity: 0;
}
.NavIcon.open span:nth-child(4) {
left: 100%;
opacity: 0;
}
.NavIcon.open span:nth-child(5) {
left: 2px;
top: 13px;
}
.NavIcon.open span:nth-child(6) {
left: calc(50% - 2px);
top: 13px;
}
@media screen and (max-width: 1439px) {
.NavIconWrap.open {
background: var(--NavIconActiveWrapColor);
right:var(--NavRight480);
}
.NavIconWrap {
position:var(--MenuPosition480);
top: var(--NavTop480);
right: var(--NavRight480);
left: var(--NavLeft480);
bottom: var(--NavBottom480);
}
}
</style>
<!--Подключаем скрипт-->
<script>
$(document).ready(function(){
var MenuText = '.menu-text .tn-atom'
var NavBlock = '.NavBlock';
var NavTrigger = '.Trigger';
var NavBurger = '.NavIcon';
var NavBurgerWrapper = '.NavIconWrap';
$(NavTrigger).click(function(){
$(MenuText).toggleClass('menu-text-open');
$(NavBlock).toggleClass('show');
$(NavBurger).toggleClass('open');
$(NavBurgerWrapper).toggleClass('open');
$('body').toggleClass('NavActive');
});
$('a').click(function(){
$(MenuText).toggleClass('menu-text-open');
$(NavBlock).removeClass('show');
$(NavBurger).removeClass('open');
$(NavBurgerWrapper).removeClass('open');
$('body').removeClass('NavActive');
});
$(NavOverlay).click(function(){
$(MenuText).toggleClass('menu-text-open');
$(NavBlock).removeClass('show');
$(NavBurger).removeClass('open');
$(NavBurgerWrapper).removeClass('open');
$('body').removeClass('NavActive');
});
});
</script>
<!--Настройки для текста на меню-->
<style>
.menu-shape {
z-index: 5000 !important;
opacity: 0;
}
.menu-text {
z-index: 990 !important;
overflow: hidden;
display: flex;
height: var(--MenuPadding);
transform: translate(0px, 0px);
}
.menu-text-open {
transition:-webkit-transform 300ms cubic-bezier(0.77, 0, 0.175, 1);
transform: translate(0px, -15px);
}
.menu-text .tn-atom {
transition:-webkit-transform 300ms cubic-bezier(0.77, 0, 0.175, 1);
}
</style>
<!--Настройки меню-->
<style>
/*Указываем разрешение, на котором появится меню (1920px)*/
@media screen and (max-width: 1920px) {
.NavIconWrap {
display: flex !important;
}
:root {
/*Бургер*/
--BurgerColor: #fff; /*цвет полосок на иконке меню*/
--BurgerBGColor: #164CD9; /*цвет окружности на иконке меню*/
--BurgerBGWidth: 50px; /*ширина бургера*/
--BurgerBGHeight: 50px; /*высота бургера*/
/*Расположение меню*/
--NavTop: 13px; /*отступ полосок меню сверху*/
--NavRight: 30px; /*отступ полосок меню справа*/
--NavBurgerBGTop: 15px; /*отступ окружности меню сверху*/
--NavBurgerBGRight: 31px; /*отступ окружности меню справа*/
--MenuPosition: fixed; /* позиционирование меню: absolute - без фиксации, при скролле. fixed - с фиксацией */
--MenuPadding: 15px; /*растояние для сдвига текста на меню вверх (меню-закрыть) */
--NavIconActivePadding: 47px; /*отступ меню справа, при открытии/
/*Расположение меню на телефоне*/
--NavTop480: 13px; /*отступ иконки меню сверху*/
--NavRight480: 20px; /*отступ иконки меню справа*/
--NavBurgerBGTop480: 15px; /*отступ окружности меню сверху*/
--NavBurgerBGRight480: 20px; /*отступ окружности меню справа*/
--MenuPosition480: absolute; /*позиционирование меню на телефоне: absolute - без фиксации, при скролле. fixed - с фиксацией */
</style>
<!--Меню Zero-блока-->
<script>
$('.uc-menu').addClass('NavBlock');
$('.menu-shape').addClass('NavIconWrap Trigger');
</script>
<!--Подключаем скрипт-->
<script>
$(document).ready(function(){
var MenuText = '.menu-text .tn-atom'
var overlayMenu = '.overlaymenu'
var NavBlock = '.NavBlock';
var NavTrigger = '.Trigger';
var NavBurger = '.NavIcon';
var NavBurgerWrapper = '.NavIconWrap';
$(NavTrigger).click(function(){
$(MenuText).toggleClass('menu-text-open');
$(overlayMenu).toggleClass('overlaymenu-open');
$(NavBlock).toggleClass('show');
$(NavBurger).toggleClass('open');
$(NavBurgerWrapper).toggleClass('open');
$('body').toggleClass('NavActive');
});
$('a').click(function(){
$(MenuText).toggleClass('menu-text-open');
$(overlayMenu).toggleClass('overlaymenu-open');
$(NavBlock).removeClass('show');
$(NavBurger).removeClass('open');
$(NavBurgerWrapper).removeClass('open');
$('body').removeClass('NavActive');
});
$(NavOverlay).click(function(){
$(MenuText).toggleClass('menu-text-open');
$(overlayMenu).toggleClass('overlaymenu-open');
$(NavBlock).removeClass('show');
$(NavBurger).removeClass('open');
$(NavBurgerWrapper).removeClass('open');
$('body').removeClass('NavActive');
});
});
</script>
<!--Настройки для текста на меню-->
<style>
.menu-shape {
z-index: 5000 !important;
opacity: 0;
}
.menu-text {
position: var(--MenuPosition);
z-index: 990 !important;
overflow: hidden;
display: flex;
height: var(--MenuPadding);
transform: translate(0px, 0px);
}
.menu-text-open {
transition:-webkit-transform 300ms cubic-bezier(0.77, 0, 0.175, 1);
transform: translate(0px, -15px);
}
.menu-text .tn-atom {
transition:-webkit-transform 300ms cubic-bezier(0.77, 0, 0.175, 1);
}
.overlaymenu {
overflow: hidden;
border-radius: 50%;
z-index: 10;
top: var(--NavBurgerBGTop);
right: var(--NavBurgerBGRight);
width: var(--BurgerBGWidth);
height: var(--BurgerBGHeight);
position: var(--MenuPosition);
background: var(--BurgerBGColor);
transition:-webkit-transform 800ms cubic-bezier(0.77,0,.1,1);
}
.overlaymenu-open {
z-index: 10;
top: 15px;
right: 31px;
position: fixed;
transition:-webkit-transform 800ms cubic-bezier(0.77,0,.1,1);
transform: scale(100);
}
</style>
<!--Иконка меню-->
<div class="NavIconWrap Trigger">
<div class="NavIcon cursor-stick-area">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<style>
:root {
--Nav_1920_Width: 100%; /*ширина на десктопе*/
--Nav_1200_Width: 100%; /*ширина на планшете*/
--Nav_960_Width: 100%; /*ширина на мелком планшете*/
--Nav_640_Width: 100%; /*ширина на мобилке в горизонтали*/
--Nav_480_Width: 100%; /*ширина на мобилке*/
--Nav_1920_Slide: -100%; /*на десктопе*/
--Nav_1200_Slide: -100%; /*на планшете*/
--Nav_960_Slide: -100%; /*на мелком планшете*/
--Nav_640_Slide: -100%; /*на мобилке в горизонтали*/
--Nav_480_Slide: -100%; /*на мобилке*/
}
</style>
<!--Подключаем стили меню-->
<style>
.NavBlock {
position: fixed;
top: -100vh;
right: 0;
bottom: 0;
width: 100%;
height: 100vh;
-webkit-transition: -webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1);
transition:-webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1);
transition:transform 900ms cubic-bezier(0.77, 0, 0.175, 1);
transition:transform 900ms cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1);
z-index: 310;
overflow-y: hidden;
overflow-x: hidden;
}
.NavBlock .t396__artboard {
min-height:100vh!important;
height:100vh!important;
}
.NavBlock.show {
z-index: 310;
transition-delay:opacity 900ms!important;
-webkit-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1) 120ms;
transition: -webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1) 120ms;
transition: transform 900ms cubic-bezier(0.77, 0, 0.175, 1) 120ms;
transition: transform 900ms cubic-bezier(0.77, 0, 0.175, 1) 120ms, -webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1) 120ms;
}
.NavActive {
height:100vh!important;
overflow:hidden!important;
}
.Trigger {
z-index: 3050!important;
}
.NavIconWrap {
position:var(--MenuPosition);
top: var(--NavTop);
right: var(--NavRight);
left: var(--NavLeft);
bottom: var(--NavBottom);
padding: 10px;
border: var(--BorderMenuSize);
border-radius: var(--BorderRadius);
border-color: var(--BorderMenuColor);
overflow: hidden;
background: var(--NavIconWrapColor);
height: 30px;
width: 30px;
display: none;
justify-content: center;
align-items: center;
cursor: pointer;
}
.NavIconWrap.open {
background: var(--NavIconActiveWrapColor);
top: var(--NavTop);
right: var(--NavIconActivePadding);
left: var(--NavLeft);
bottom: var(--NavBottom);
border: var(--BorderMenuSize);
border-radius: var(--BorderRadius);
border-color: var(--BorderMenuActiveColor);
}
.NavIcon {
top: 0px;
left: 0px;
width: 26px;
height: 20px;
overflow: hidden;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
.NavIcon span {
display: block;
position: absolute;
height: 2px;
width: 50%;
background: var(--BurgerColor);
opacity: 1;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
overflow:hidden;
}
.NavIcon.open span {
background: var(--BurgerColor);
}
.NavIcon span:nth-child(even) {
left: 50%;
border-radius: 0 20px 20px 0;
}
.NavIcon span:nth-child(odd) {
left:0px;
border-radius: 20px 0 0 20px;
}
.NavIcon span:nth-child(1), .NavIcon span:nth-child(2) {
top: 4px;
}
.NavIcon span:nth-child(3), .NavIcon span:nth-child(4) {
top: 10px;
}
.NavIcon span:nth-child(5), .NavIcon span:nth-child(6) {
top: 16px;
}
.NavIcon.open span:nth-child(1),.NavIcon.open span:nth-child(6) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.NavIcon.open span:nth-child(2),.NavIcon.open span:nth-child(5) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.NavIcon.open span:nth-child(1) {
left: 2px;
top: 4px;
}
.NavIcon.open span:nth-child(2) {
left: calc(50% - 2px);
top: 4px;
}
.NavIcon.open span:nth-child(3) {
left: -50%;
opacity: 0;
}
.NavIcon.open span:nth-child(4) {
left: 100%;
opacity: 0;
}
.NavIcon.open span:nth-child(5) {
left: 2px;
top: 13px;
}
.NavIcon.open span:nth-child(6) {
left: calc(50% - 2px);
top: 13px;
}
@media screen and (max-width: 1439px) {
.NavIconWrap.open {
background: var(--NavIconActiveWrapColor);
right:var(--NavRight480);
}
.NavIconWrap {
position:var(--MenuPosition480);
top: var(--NavTop480);
right: var(--NavRight480);
left: var(--NavLeft480);
bottom: var(--NavBottom480);
}
.overlaymenu {
overflow: hidden;
border-radius: 50%;
z-index: 10;
top: var(--NavBurgerBGTop480);
right: var(--NavBurgerBGRight480);
width: var(--BurgerBGWidth);
height: var(--BurgerBGHeight);
position: var(--MenuPosition480);
background: var(--BurgerBGColor);
transition:-webkit-transform 800ms cubic-bezier(0.77,0,.1,1);
}
.overlaymenu-open {
top: 15px;
right: 31px;
position: fixed;
z-index: 10;
transition:-webkit-transform 800ms cubic-bezier(0.77,0,.1,1);
transform: scale(100);
}
}
</style>
<script>
jQuery('<div>', {
class: 'overlaymenu',
}).appendTo('.t-records');
</script>
<style>
html{
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
body
{
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
</style>
<!--Настройки меню-->
<style>
:root {
--NavOverlayColor: rgb(0 0 0 / 70%); /*цвет слоя затемнения*/
--BurgerColor: #fff; /*цвет полосочек на иконке меню*/
--BurgerActiveColor: #000; /*цвет полосочек на иконке меню в активном состоянии*/
--NavTop: 20px; /*отступ иконки меню сверху*/
--MenuPosition: absolute; /* позиционирование меню: absolute - без фиксации, при скролле. fixed - с фиксацией */
/*отступ иконки на мобильном*/
--NavTop480: 10px; /*отступ иконки меню сверху*/
--NavRight480: 10px !important; /*отступ иконки меню справа*/
/*Бордеры*/
--BorderTop: url("https://static.tildacdn.com/tild3339-3733-4134-a261-366266306331/border-top.svg") no-repeat; /*заменить на свой бордер*/
--BorderBottom: url("https://static.tildacdn.com/tild3565-6132-4233-a262-626565393338/border-bottom.svg") no-repeat; /*заменить на свой бордер*/
}
</style>
<style>
:root {
--PreNavBgColor: transparent; /*цвет подложки ()*/
--NavIconWrapColor: transparent; /*цвет фона иконки меню*/
--NavIconActiveWrapColor: transparent; /*цвет фона иконки меню в активном состоянии*/
--NavLeft480: ; /* отступ иконки меню слева / если меню справа - оставьте пустым*/
/*ширина меню на разных устройствах, брейкпоинты, как в zero block*/
--Nav_1920_Width: 100%; /*ширина на десктопе*/
--Nav_1200_Width: 100%; /*ширина на планшете*/
--Nav_960_Width: 100%; /*ширина на мелком планшете*/
--Nav_640_Width: 100%; /*ширина на мобилке в горизонтали*/
--Nav_480_Width: 100%; /*ширина на мобилке*/
/*это выезд меню, ставьте значения отрицательные ширине*/
--Nav_1920_Slide: -100%; /*на десктопе*/
--Nav_1200_Slide: -100%; /*на планшете*/
--Nav_960_Slide: -100%; /*на мелком планшете*/
--Nav_640_Slide: -100%; /*на мобилке в горизонтали*/
--Nav_480_Slide: -100%; /*на мобилке*/
}
</style>
<div class="NavOverlay"></div>
<div class="PreNavLayer"></div>
<div class="PreNavLayerTwo"></div>
<div class="NavIconWrap NavTrigger any-link">
<div class="NavIcon">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script>
$('.uc-menu').addClass('NavBlock');
</script>
<!--Подключаем стили меню-->
<style>
.NavBlock {
position: var(--MenuPosition);
top: -100vh;
right: 0;
bottom: 0;
width: 100%;
height: 100vh;
-webkit-transition: -webkit-transform 1400ms cubic-bezier(0.77, 0, 0.175, 1);
transition:-webkit-transform 1400ms cubic-bezier(0.77, 0, 0.175, 1);
transition:transform 1400ms cubic-bezier(0.77, 0, 0.175, 1);
transition:transform 1400ms cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform 1400ms cubic-bezier(0.77, 0, 0.175, 1);
z-index: 996;
overflow-y: hidden;
overflow-x: hidden;
}
.NavBlock .t396__artboard {
min-height:100vh!important;
height:100vh!important;
}
.NavBlock.show {
transition-delay:opacity 900ms!important;
-webkit-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1) 120ms;
transition: -webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1) 120ms;
transition: transform 900ms cubic-bezier(0.77, 0, 0.175, 1) 120ms;
transition: transform 900ms cubic-bezier(0.77, 0, 0.175, 1) 120ms, -webkit-transform 1000ms cubic-bezier(0.77, 0, 0.175, 1) 120ms;
}
.NavOverlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: var(--NavOverlayColor);
opacity: 0;
pointer-events: none;
transition: all 1000ms cubic-bezier(0.77, 0, 0.175, 1) 120ms;
z-index: 993;
}
.NavOverlay.show {
-webkit-transition: opacity 1300ms cubic-bezier(0.77, 0, 0.175, 1) 100ms, -webkit-transform 100ms cubic-bezier(0.77, 0, 0.175, 1);
transition: opacity 1300ms cubic-bezier(0.77, 0, 0.175, 1) 100ms, -webkit-transform 100ms cubic-bezier(0.77, 0, 0.175, 1);
transition: transform 100ms cubic-bezier(0.77, 0, 0.175, 1), opacity 1300ms cubic-bezier(0.77, 0, 0.175, 1) 150ms;
transition: transform 100ms cubic-bezier(0.77, 0, 0.175, 1), opacity 1300ms cubic-bezier(0.77, 0, 0.175, 1) 150ms, -webkit-transform 100ms cubic-bezier(0.77, 0, 0.175, 1);
opacity: 1;
pointer-events: all;
z-index: 993;
}
.PreNavLayer {
position: fixed;
top: -100vh;
bottom: 0;
right: 0;
width: 100%;
height: 100vh;
background-color: var(--PreNavBgColor);
-webkit-transform-origin: -100% 0;
transform-origin: -100% 0;
-webkit-transition: -webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1) 180ms;
transition: -webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1) 180ms;
transition: transform 900ms cubic-bezier(0.77, 0, 0.175, 1) 180ms;
transition: transform 900ms cubic-bezier(0.77, 0, 0.175, 1) 180ms, -webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1) 180ms;
z-index: 994;
background: var(--BorderTop);
background-position: bottom;
background-size: 100%;
}
.PreNavLayer.show {
-webkit-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1);
transition: -webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1);
transition: transform 900ms cubic-bezier(0.77, 0, 0.175, 1);
transition: transform 900ms cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1) 120ms;
}
.PreNavLayerTwo {
position: fixed;
top: -100vh;
bottom: 0;
right: 0;
width: 100%;
height: 100vh;
background-color: var(--PreNavBgColor);
-webkit-transform-origin: -100% 0;
transform-origin: -100% 0;
-webkit-transition: -webkit-transform 1300ms cubic-bezier(0.77, 0, 0.175, 1) 180ms;
transition: -webkit-transform 1300ms cubic-bezier(0.77, 0, 0.175, 1) 180ms;
transition: transform 1300ms cubic-bezier(0.77, 0, 0.175, 1) 180ms;
transition: transform 1300ms cubic-bezier(0.77, 0, 0.175, 1) 180ms, -webkit-transform 1300ms cubic-bezier(0.77, 0, 0.175, 1) 180ms;
z-index: 994;
background: var(--BorderBottom);
background-position: bottom;
background-size: 100%;
}
.PreNavLayerTwo.show {
-webkit-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform 1200ms cubic-bezier(0.77, 0, 0.175, 1);
transition: -webkit-transform 1200ms cubic-bezier(0.77, 0, 0.175, 1);
transition: transform 1200ms cubic-bezier(0.77, 0, 0.175, 1);
transition: transform 1200ms cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform 1200ms cubic-bezier(0.77, 0, 0.175, 1) 120ms;
}
.NavActive {
height:100vh!important;
width:100%;
overflow:hidden!important;
}
.NavTrigger {
z-index: 3050!important;
}
.NavIconWrap {
position: var(--MenuPosition);
top: var(--NavTop);
left: 50%;
margin-right: -50%;
transform: translate(-50%, 0%);
padding: 10px;
border-radius: 0%;
overflow: hidden;
background: var(--NavIconWrapColor);
height: 40px;
width: 50px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
@media screen and (max-width: 480px) {
.NavIconWrap {
top: var(--NavTop480);
right: var(--NavRight480);
margin-right: 0%;
transform: translate(0%, 0%);
left: 0%;
}
}
.NavIconWrap.open {
background: var(--NavIconActiveWrapColor);
}
.NavIcon {
width: 55px;
height: 40px;
overflow: hidden;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
.NavIcon span {
display: block;
position: absolute;
height: 2px;
width: 50%;
background: var(--BurgerColor);
opacity: 1;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
overflow:hidden;
mix-blend-mode: difference;
}
.NavIcon.open span {
background: var(--BurgerActiveColor);
}
.NavIcon span:nth-child(even) {
left: 50%;
border-radius: 0 0px 0px 0;
}
.NavIcon span:nth-child(odd) {
left:0px;
border-radius: 0px 0 0 0px;
}
.NavIcon span:nth-child(1), .NavIcon span:nth-child(2) {
top: 20px;
}
.NavIcon span:nth-child(3), .NavIcon span:nth-child(4) {
top: 16px;
display: none;
}
.NavIcon span:nth-child(5), .NavIcon span:nth-child(6) {
top: 8px;
}
.NavIcon.open span:nth-child(1),.NavIcon.open span:nth-child(6) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.NavIcon.open span:nth-child(2),.NavIcon.open span:nth-child(5) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.NavIcon.open span:nth-child(1) {
left: 0px;
top: 13px;
}
.NavIcon.open span:nth-child(2) {
left: calc(50% - 8px);
top: 13px;
}
.NavIcon.open span:nth-child(3) {
left: -50%;
opacity: 0;
}
.NavIcon.open span:nth-child(4) {
left: 100%;
opacity: 0;
}
.NavIcon.open span:nth-child(5) {
left: 1px;
top: 29px;
}
.NavIcon.open span:nth-child(6) {
left: calc(50% - 8px);
top: 30px;
}
.NavIcon.open {
left: 2px;
}
@media screen and (max-width: 1025px) {
.NavIconWrap, .NavIconWrap.open {
right: var(--NavRight480);
margin-right: 0%;
transform: translate(0%, 0%);
left: auto;
}
}
@media screen and (max-width: 480px) {
.PreNavLayer {
background-position: bottom;
background-size: 100% !important;
}
.PreNavLayerTwo {
background-position: bottom;
background-size: 100% !important;
}
.NavBlock {
top:0;
left:100%;
right:0;
}
.NavBlock.show {
transition-delay:opacity 900ms!important;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.PreNavLayerTwo {
display:none !important;
background-color: transparent;
}
.PreNavLayer {
display:none !important;
background-color: transparent;
}
}
</style>
<!--Подключаем скрипт-->
<script>
$(document).ready(function(){
var NavBlock = '.NavBlock';
var NavTrigger = '.NavTrigger';
var PreNavLayer = '.PreNavLayer';
var PreNavLayerTwo = '.PreNavLayerTwo';
var NavOverlay = '.NavOverlay';
var NavBurger = '.NavIcon';
var NavBurgerWrapper = '.NavIconWrap';
$(NavTrigger).click(function(){
$(NavBlock).toggleClass('show');
$(PreNavLayer).toggleClass('show');
$(PreNavLayerTwo).toggleClass('show');
$(NavOverlay).toggleClass('show');
$(NavBurger).toggleClass('open');
$(NavBurgerWrapper).toggleClass('open');
$('body').toggleClass('NavActive');
});
$('a').click(function(){
$(NavBlock).removeClass('show');
$(PreNavLayer).removeClass('show');
$(PreNavLayerTwo).removeClass('show');
$(NavOverlay).removeClass('show');
$(NavBurger).removeClass('open');
$(NavBurgerWrapper).removeClass('open');
$('body').removeClass('NavActive');
});
$(NavOverlay).click(function(){
$(NavBlock).removeClass('show');
$(PreNavLayer).removeClass('show');
$(PreNavLayerTwo).removeClass('show');
$(NavOverlay).removeClass('show');
$(NavBurger).removeClass('open');
$(NavBurgerWrapper).removeClass('open');
$('body').removeClass('NavActive');
});
});
</script>