Меню

Кастомное меню
на zero блоке

Модификаторы

Модификация позволяет создать своё кастомное меню на zero блоке

Описание

Меню с текстом

Меню с кругом

Плавающее

Меню с текстом

Подключаем основные стили с настройками меню, через блок T123

Шаг 1

Стили

<!--Меню 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>

Подключаем скрипт для работы меню, через блок T123 (Важно! поместить скрипт в самый низ страницы)

Шаг 2

Скрипт

<!--Иконка меню-->
<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>

На блок с меню вешаем класс .uc-menu

Шаг 3

Создаём shape и присваиваем ему класс .menu-shape. Он будет отвечать за область клика по меню

Шаг 4

Создаём текст, который будет появляться, при клике на меню. В этом случае меню-закрыть. Присваиваем ему класс .menu-text

Шаг 5

Выставляем направляющую и сдвигаем слово "закрыть" наверх, на место слова "меню". Запоминаем растояние, которое текст прошел. В этом случае 35px-20px=15px

Шаг 6

Выставляем полученное значение в настройках меню в параметрах --MenuPadding: 15px

Шаг 7

Меню с кругом

Подключаем основные стили с настройками меню, через блок T123

Шаг 1

Стили

<!--Настройки меню-->
<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>

Подключаем скрипт для работы меню, через блок T123 (Важно! поместить скрипт в самый низ страницы)

Шаг 2

Скрипт

<!--Меню 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>

На блок с меню вешаем класс .uc-menu

Шаг 3

Создаём shape и присваиваем ему класс .menu-shape. Он будет отвечать за область клика по меню

Шаг 4

Шаг 5

Шаг 6

Выставляем полученное значение в настройках меню в параметрах --MenuPadding: 15px

Шаг 7

В Zero блоке с меню отключаем фоновое заливку, чтобы круг не перекрывался

Шаг 8

Плавающее меню

Подключаем основные стили с настройками меню, через блок T123

Шаг 1

Стили

<!--Настройки меню-->
<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>

Подключаем скрипт для работы меню, через блок T123 (Важно! поместить скрипт в самый низ страницы)

Шаг 2

Скрипт

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

На блок с меню вешаем класс .uc-menu

Шаг 3

Через блок IM01 загружаем свой бордер (можно взять за основу бордер из настроек меню) и копируем url картинки

Шаг 4

Переходим к настройкам меню и заменяем url путь двух бордеров

Шаг 5

Другие модификации

Подсказки при наведении курсора

Модификаторы

3D галерея

Модификаторы

Универсальный курсор

Модификаторы

Кастомное менюна zero блоке

Кастомное меню
на zero блоке