Home
see everything
see everything
see everything
see everything
see everything
SEE PROJECTS
SEE PROJECTS
see PROJECTS
SEE PROJECTS
SEE PROJECTS
Projects
see everything
see everything
see everything
see everything
see everything
Contact
fullscreen menu
Design creates culture. Culture shapes values. Values determine the future.
Projects
The best ideas come as jokes. Make your thinking as funny as possible.
Contact
The best ideas come as jokes. Make your thinking as funny as possible.
Шаг 1
Создаем fullscreen меню
1. Создаем Zero-блок, который и возьмем за основу меню
2. Ставим разрешение в 100vh (window container height: 100%)
3. Рисуем наше меню
Шаг 2
Подключаем скрипт и стили
1. Создаем 3 блока T123 (HTML-код)
2. В первый помещаем наш скрипт, который будет отвечать за поведение меню
3. Во второй помещаем наши css-стили меню
4. В третий помещаем настройки меню

Код ниже
Шаг 3
Подключаем наш Zero-блок к меню
1. Заходим в третий блок T123 (HTML-код), в котором находятся настройки меню
2. Заменяем id Zero-блока на свой (#rec332041296 - к примеру)
Шаг 4
Кастомизируем меню под проект
В третьем блоке T123 (HTML-код) есть настройки меню. (помечены комментариями,что за что отвечает)


Важно!!!
Zero-блок выполняющий функцию меню должен стоять первым на странице
Подключаем скрипт
<!--Подключаем скрипт-->
<script>
        $(document).ready(function(){
        var NavBlock = '.NavBlock';
        var NavTrigger = '.TriggerAnKuNav';
        var PreNavLayer = '.PreNavLayer';
        var NavOverlay = '.NavOverlay';
        var NavBurger = '.NavIcon';
        var NavBurgerWrapper = '.NavIconWrap';
        
        $(NavTrigger).click(function(){
            $(NavBlock).toggleClass('show');
            $(PreNavLayer).toggleClass('show');
            $(NavOverlay).toggleClass('show');
            $(NavBurger).toggleClass('open');
            $(NavBurgerWrapper).toggleClass('open');
            $('body').toggleClass('NavActive');
        });
        $('a').click(function(){
            $(NavBlock).removeClass('show');
            $(PreNavLayer).removeClass('show');
            $(NavOverlay).removeClass('show');
            $(NavBurger).removeClass('open');
            $(NavBurgerWrapper).removeClass('open');
            $('body').removeClass('NavActive');
        });
        $(NavOverlay).click(function(){
            $(NavBlock).removeClass('show');
            $(PreNavLayer).removeClass('show');
            $(NavOverlay).removeClass('show');
            $(NavBurger).removeClass('open');
            $(NavBurgerWrapper).removeClass('open');
            $('body').removeClass('NavActive');
        });
    });
</script>
Подключаем стили меню
<!--Подключаем стили меню-->
<style>
    .NavBlock {
    position: fixed;
    top: 0;
    right: var(--Nav_1920_Slide);
    bottom: 0;
    width: var(--Nav_1920_Width);
    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: 3000;
    overflow-y: scroll;
    overflow-x: hidden;
}
.NavBlock .t396__artboard {
    min-height:100vh!important;
    height:100vh!important;
}
@media screen and (max-width: 1200px) {
    .NavBlock,
    .PreNavLayer {
        width: var(--Nav_1200_Width);
        right: var(--Nav_1200_Slide);
    }
}
@media screen and (max-width: 960px) {
    .NavBlock,
    .PreNavLayer {
        width: var(--Nav_960_Width);
        right: var(--Nav_960_Slide);
    }
}
@media screen and (max-width: 640px) {
    .NavBlock,
    .PreNavLayer {
        width: var(--Nav_640_Width);
        right: var(--Nav_640_Slide);
    }
}
@media screen and (max-width: 480px) {
    .NavBlock,
    .PreNavLayer {
        width: var(--Nav_480_Width);
        right: var(--Nav_480_Slide);
    }
}
.NavBlock.show {
    transition-delay:opacity 900ms!important;
    -webkit-transform: translateX(-100%);
            transform: translateX(-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;
}
.NavOverlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--NavOverlayColor);
    opacity: 0;
    pointer-events: none;
    transition: all 900ms cubic-bezier(0.77, 0, 0.175, 1) 120ms;
    z-index: 2900;
}
.NavOverlay.show {
    -webkit-transition: opacity 900ms cubic-bezier(0.77, 0, 0.175, 1) 100ms, -webkit-transform 100ms cubic-bezier(0.77, 0, 0.175, 1);
    transition: opacity 900ms 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 900ms cubic-bezier(0.77, 0, 0.175, 1) 100ms;
    transition: transform 100ms cubic-bezier(0.77, 0, 0.175, 1), opacity 900ms cubic-bezier(0.77, 0, 0.175, 1) 100ms, -webkit-transform 100ms cubic-bezier(0.77, 0, 0.175, 1);
    opacity: 1;
    pointer-events: all;
    z-index: 2900;
}
.PreNavLayer {
    position: fixed;
    top: 0;
    bottom: 0;
    right: var(--Nav_1920_Slide);
    width: var(--Nav_1920_Width);
    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) 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;
    z-index: 2950;
}
.PreNavLayer.show {
    -webkit-transform: translateX(-100%);
    transform: translateX(-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);
}
.NavActive {
    height:100vh!important;
    overflow:hidden!important;
}
.TriggerAnKuNav {
    z-index: 3050!important;
}
.NavIconWrap {
    position:fixed;
    top: var(--NavTop);
    right: var(--NavRight);
    left: var(--NavLeft);
    padding: 10px;
    border-radius: 100%;
    overflow: hidden;
    background: var(--NavIconWrapColor);
    height: 40px;
    width: 40px;
    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 {
    background: var(--NavIconActiveWrapColor);
}
.NavIcon {
    width: 30px;
    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: 0px;
}
.NavIcon span:nth-child(3), .NavIcon span:nth-child(4) {
    top: 8px;
}
.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: 3px;
    top: 5px;
}
.NavIcon.open span:nth-child(2) {
    left: calc(50% - 5px);
    top: 5px;
}
.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: 3px;
    top: 12px;
}
.NavIcon.open span:nth-child(6) {
    left: calc(50% - 5px);
    top: 12px;
}
</style>
Настройки для меню
<!--Настройки для меню-->

<!--Слой затемнения-->
<div class="NavOverlay"></div>

<!--Нижний слой (салатовый)-->
<div class="PreNavLayer"></div>

<!--Иконка меню-->
<div class="NavIconWrap TriggerAnKuNav any-link">
    <div class="NavIcon">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>

<!--Тут замените id zero block на свой-->
<script>
    $('#rec332041296').addClass('NavBlock');
</script>

<!--Настройки меню-->
<style>
    :root {
        --NavOverlayColor: rgba(0, 0, 0, 0.8); /*цвет слоя затемнения*/
        --PreNavBgColor: #d3fd51; /*цвет подложки (салатовый)*/
        --BurgerColor: #fff; /*цвет полосочек на иконке меню*/
        --BurgerActiveColor: #fff; /*цвет полосочек на иконке меню в активном состоянии*/
        --NavIconWrapColor: transparent; /*цвет фона иконки меню*/
        --NavIconActiveWrapColor: transparent; /*цвет фона иконки меню в активном состоянии*/
        --NavTop: 20px; /*отступ иконки меню сверху*/
        --NavRight: 20px; /*отступ иконки меню справа*/
        --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>
Made on
Tilda