Design creates culture. Culture shapes values. Values determine the future.
Zero Block
Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch
Тут меняем id блока меню
<!--Настройки для меню-->
<!--Слой затемнения-->
<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>
<!--Тут замените id zero block на свой-->
<script>
$('#rec444810868').addClass('NavBlock');
</script>
<!--Настройки меню-->
<style>
:root {
--NavOverlayColor: rgb(0 0 0 / 70%); /*цвет слоя затемнения*/
--PreNavBgColor: transparent; /*цвет подложки ()*/
--BurgerColor: #fff; /*цвет полосочек на иконке меню*/
--BurgerActiveColor: #000; /*цвет полосочек на иконке меню в активном состоянии*/
--NavIconWrapColor: transparent; /*цвет фона иконки меню*/
--NavIconActiveWrapColor: transparent; /*цвет фона иконки меню в активном состоянии*/
--NavTop: 20px; /*отступ иконки меню сверху*/
--NavRight: 48.5%; /*отступ иконки меню справа*/
--NavLeft:; /* отступ иконки меню слева / если меню справа - оставьте пустым*/
/*отступ иконки на мобильном*/
--NavTop480: 10px; /*отступ иконки меню сверху*/
--NavRight480: 10px; /*отступ иконки меню справа*/
--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>
Тут заменяем 2 пути до окружностей (background)
<!--Подключаем стили меню-->
<style>
.NavBlock {
position: fixed;
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: url("https://static.tildacdn.com/tild3132-6230-4433-a134-353339633832/border-1_1_1.svg") no-repeat;
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: url("https://static.tildacdn.com/tild3565-6132-4233-a262-626565393338/border-bottom.svg") no-repeat;
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:fixed;
top: var(--NavTop);
right: var(--NavRight);
left: var(--NavLeft);
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);
left: var(--NavLeft480);
}
}
.NavIconWrap.open {
right: 49%;
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);
}
}
@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>
