Меню
Вход
Меню
E-mail
Платный доступ
Контакты
Главная
Библиотека
Вопросы и ответы
Контакты
matilda-design@yandex.ru
Вход

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

По подписке
Модификаторы
Модификация позволяет создать своё кастомное меню на zero блоке
Описание
Меню с текстом
Меню с кругом
Плавающее
Выезжающее меню
Плавающее меню
Подключаем основные стили с настройками меню, через блок 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 галерея
Модификаторы
Универсальный курсор
Модификаторы
Открой неограниченный доступ к библиотеке
Техническая поддержка в течение 12 часов
Платный доступ
Доступ к базовым и уникальным модификациям
Доступ к базовым и углубленым занятиям
2 уникальные модификации в неделю
Оформить подписку
350 руб. / в месяц
После оплаты подписки ты получишь доступ не только к этой модификации, но и ко всему платному контенту на платформе
Made on
Tilda