Меню

Меню на
Zero блоке

Модификаторы
Модификация позволяет создать меню на Zero блоке за пределами контентной части и анимацией открытия
Описание
Инструкция по подключению
Создаем шапку сайта через Zero блок. В нем создаем шейп размерами 60px на 60px и вешаем на него класс icon. Заливку у шейпа удаляем
Шаг 1
Создаём еще один Zero блок (меню) с высотой в 550px и вешаем на него класс uc-menu-block
Шаг 2
На элементы в меню вешаем класс inside. Если нужно плавное появление
Шаг 3
Через блок T123 подключаем стили-настройки (весь код поместить в конце страницы)
Шаг 4
<style>
:root {
--BurgerColor: #fff; /*цвет полосок на иконке меню*/
--BurgerColorActive: #fff; /*цвет полосок на иконке меню при клике*/
--MenuSizeTransform: 350px; /* выезд меню, ставим положительное значение */
--MenuSize: -550px; /* выезд меню, ставим отрицательное значение */
--OverlayBackground: #121212; /* цвет фона */
--MenuPosition: fixed; /* позиционирование меню: absolute - без фиксации, при скролле. fixed - с фиксацией */
/*выезд на телефоне*/
--MenuSizeTransform480: 350px; /* выезд меню, ставим положительное значение */
--MenuSize480: -550px; /* выезд меню, ставим отрицательное значение */ 
}
</style>
Через блок T123 подключаем скрипт для анимации (весь код поместить в конце страницы)
Шаг 5
<div class="NavWrap">
<div class="NavIcon">
<span></span>
<span></span>
</div></div>
<div class="Overlay"></div>
<style>
.NavWrap {
width: 100%;
height: 100%;
}
.Overlay {
width: 100%;
height: 100vh;
background: transparent;
cursor: pointer;
opacity: 0;
transition-duration: 500ms;
/*backdrop-filter: blur(10px);*/
}
.overlay-open {
background: black;
/*backdrop-filter: blur(5px);*/
opacity: 0;
transition-duration: 500ms;
}
.NavIcon {
display: flex;
justify-content: center;
overflow: hidden;
width: 60px;
height: 27px;
transform: translate(0px, -50%);
top: 50%;
position: absolute;
cursor: pointer;
}
.NavIcon span {
display: block;
position: absolute;
height: 2px;
width: 60%;
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(--BurgerColorActive);
}
.NavIcon span:nth-child(1) {
top: 15px;
}
.NavIcon span:nth-child(2) {
top: 8px;
}
.NavIcon.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 13px;
}
.NavIcon.open span:nth-child(2) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 13px;
}
.NavIcon.open {
left: 0px;
}
.uc-menu-block {
position: var(--MenuPosition); 
top: 0px;
z-index: -1;
width: 100%;
transition-delay: 0.5s;
transition-duration: 0.8s;
transition-timing-function: cubic-bezier(.69,.15,.12,.99);
transform:translate(0%, var(--MenuSize));
}
.menu-open {
transition-delay: 0s;
z-index: 99;
transition-duration: 0.8s;
transition-timing-function: cubic-bezier(.69,.15,.12,.99);
transform:translate(0%, 0px);
}
.wrapper-menu {
position: relative;
top: 0;
transition-delay: 0.5s;
transition-duration: 0.8s;
transition-timing-function: cubic-bezier(.69,.15,.12,.99);
}
.body-open {
transition-delay: 0s;
width: 100%;
transition-duration: 0.8s;
transition-timing-function: cubic-bezier(.69,.15,.12,.99);
top: var(--MenuSizeTransform);
transform: scale(0.95) !important;
overflow: hidden;
}
.t-body {
background: var(--OverlayBackground);
}
.overflow {
background: var(--OverlayBackground);
overflow: hidden !important;
}
.inside {
transition-timing-function: cubic-bezier(.69,.15,.12,.99);
opacity:0;
transition-duration: 0.3s;
transition-delay: 0.3s;
}
.inside-show {
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(.69,.15,.12,.99);
opacity:1;
transition-delay: 0.6s;
}
@media screen and (max-width: 480px) {
.uc-menu-block {
position: var(--MenuPosition); 
top: 0px;
z-index: -1;
width: 100%;
transition-delay: 0.5s;
transition-duration: 0.8s;
transition-timing-function: cubic-bezier(.69,.15,.12,.99);
transform:translate(0%, var(--MenuSize480));
}
.menu-open {
transition-delay: 0s;
z-index: 99;
transition-duration: 0.8s;
transition-timing-function: cubic-bezier(.69,.15,.12,.99);
transform:translate(0%, 0px);
} 
.wrapper-menu {
position: relative;
top: 0;
transition-delay: 0.5s;
transition-duration: 0.8s;
transition-timing-function: cubic-bezier(.69,.15,.12,.99);
}
.body-open {
transition-delay: 0s;
width: 100%;
transition-duration: 0.8s;
transition-timing-function: cubic-bezier(.69,.15,.12,.99);
overflow: hidden;
transform: scale(0.95) !important;
}
}
</style>
<script>
$(".rolling-text").addClass('inside');
$(".uc-menu-block").appendTo('.t-body');
$(".NavWrap").appendTo('.icon .tn-atom');
$(".Overlay").appendTo('.uc-menu-block');
$(".uc-fix").appendTo('.t-body');
$('.NavWrap').click(function(){
$('.uc-menu-block').toggleClass('menu-open');
$('.uc-fix').toggleClass('fix-menu-open');
$('.NavIcon').toggleClass('open');
$('.wrapper-menu').toggleClass('body-open');
$('.t-body').toggleClass('overflow');
$('.Overlay').toggleClass('overlay-open');
});
$('a').click(function(){
$('.uc-menu-block').removeClass('menu-open');
$('.uc-fix').removeClass('fix-menu-open');
$('.NavIcon').removeClass('open');
$('.wrapper-menu').removeClass('body-open');
$('.t-body').removeClass('overflow');
$('.inside').removeClass('inside-show');
$('.Overlay').removeClass('overlay-open');
}); 
$('.Overlay').click(function(){
$('.uc-menu-block').removeClass('menu-open');
$('.uc-fix').removeClass('fix-menu-open');
$('.NavIcon').removeClass('open');
$('.wrapper-menu').removeClass('body-open');
$('.t-body').removeClass('overflow');
$('.inside').removeClass('inside-show');
$('.Overlay').removeClass('overlay-open');
}); 
</script>
<script>
$(".NavWrap").click(
function() {$('.inside').toggleClass('inside-show'), 5000;
});
</script>
<script>
$('.t-records').wrapAll('<div class="wrapper-menu">');
</script>
Через блок T123 подключаем стили для фиксации и вешаем класс uc-fix на шапку (весь код поместить в конце страницы)
Шаг 6
<style>
.uc-fix {
top: 0;
position: fixed;
z-index: 999;
}
.uc-fix .t396__artboard {
position: fixed;
z-index: 999;
}
</style>
Не получилось подключить?
Не беда, ты всегда можешь написать мне в Telegram и запросить исходник
Другие модификации
Подсказки при наведении курсора
Модификаторы
3D галерея
Модификаторы
Универсальный курсор
Модификаторы
Открой неограниченный доступ к библиотеке
Техническая поддержка в течение 12 часов
Платный доступ
Доступ к базовым и уникальным модификациям
Доступ к базовым и углубленым занятиям
2 уникальные модификации в неделю
350 руб. / в месяц
После оплаты подписки ты получишь доступ не только к этой модификации, но и ко всему платному контенту на платформе
Made on
Tilda