Выделение текста
The work you do while you procrastinate is probably the work you should be doing for the rest of your life.
МЕНЮ БУРГЕРА
The work you do while you procrastinate is probably the work you should be doing for the rest of your life.
Значения, которые были введены
1. Внутри Зеро-блока собираешь своё меню для бургера;

2. Настраиваешь следующие поля в генераторе:
  • «id блока для показа» — Вставляешь id меню из Зеро-блока;
  • «Ссылка для открытия блока» — Вписываешь ссылку #open для открытия бургерного меню;
Ссылка может находиться внутри Зеро-блока или стандартного блока

  • «Класс для закрытия блока» — В Зеро-блоке, добавь классы к элементам, при нажатии на которые будет происходить закрытие меню;
Чтобы указать класс у элемента, нажимаешь на него правой кнопкой мыши и выбираешь из списка последнюю строку «Add CSS Class Name», далее, справа в настройках указываешь тот же класс, что и в генераторе

  • «Сторона анимации» — Выбираешь сторону, из которой будет выезжать меню;
  • «Ширина блока» — Указываешь здесь значение в пикселях, либо в процентах;

Эта настройка отвечает за размер меню, которое выезжает. Зависит от поля «Единицы измерения ширины»

  • «Overflow» — Из-за технических особенностей, настройку для overflow нужно выбирать здесь, вместо настроек в зеро блоке;
Auto — скроллбар будет появляться, если высота меню выше высоты экрана.
Hidden — скроллбар появляться не будет

  • «Z-index меню» — указываешь значение повыше (данный параметр отвечает будет ли видно меню над другими элементами);

  • «Не отображать скроллбар» — Устанавливает для скроллбара ширину 0 и скрывает его, а возможность «сроллить» остается;
  • «Увеличивать ширину меню на ширину скроллбара» — Если включено, добавляет к значению в поле «Ширина блока» ширину скроллбара. Используй в случаях, когда не хочешь «ломать» верстку скроллбаром. Попробуй включить/выключить данную настройку, чтобы понять, что вам подходит. На Mac OS ширина скроллбара равна 0.
  • «Проигрывать анимацию при каждом открытии» — Попробуй включить/выключить данную настройку, чтобы понять, что вам подходит.
  • «Не блокировать скролл» — Попробуй включить/выключить данную настройку, чтобы понять, что вам подходит.
3. Копируешь сгенерированный HTML код и вставляешь его в блок Т123.

Имей в виду:


  • Настройка фона у Зеро-блока — прозрачная;
  • Не ставь ограничение видимости для блока с бургер-меню, оно вызывается по кнопке, поэтому в ограничениях нет необходимости;
  • Выравнивание элементов должно быть по той стороне, откуда будет появляться меню;
  • Все элементы должны быть в Window Container.
  • Чтобы меню закрывалось при переходе по якорной ссылке добавь ко всем элементам меню класс закрытия.
Як на картинке
<!--NOLIM--><!--NLM082--><!--settings{"blockId":"#rec893608708","openLink":"#open","closeClass":"nolimClose","animationSide":"0","t396overflow":"auto","darkBackground":"0","backgroundColor":"#000000","opacity":"50","blockWidth":"300","widthPxOrPercent":"0","blocksZindex":"99","addMobileMenuSize960":{"blockSize960":"","widthPxOrPercent960":"0"},"addMobileMenuSize640":{"blockSize640":"","widthPxOrPercent640":"0"},"addMobileMenuSize480":{"blockSize480":"","widthPxOrPercent480":"0"},"addMobileMenuSize320":{"blockSize320":"","widthPxOrPercent320":"0"},"scrollbarOff":"0","plusScrollbarWidth":"0","animEveryOpen":"1","notBlockScroll":"0"}settingsend--><!--ts1741856784598ts--> <script> (function() { if (typeof window.nlm082blocks == 'undefined') { window.nlm082blocks = []; window.nlm082blocks.push('#rec893608708'); } else { window.nlm082blocks.push('#rec893608708'); } if (typeof window.nlm082openLinks == 'undefined') { window.nlm082openLinks = []; window.nlm082openLinks.push('#open'); } else { window.nlm082openLinks.push('#open'); } window.nlm082open = false; function t_ready(e) { "loading" != document.readyState ? e() : document.addEventListener ? document.addEventListener("DOMContentLoaded", e) : document.attachEvent("onreadystatechange", (function() { "loading" != document.readyState && e() } )) } t_ready((function() { setTimeout(function() { window.t_animate__removeInlineAnimStyles = null; let blk = document.querySelector("#rec893608708"); let isMac; if (window.navigator.userAgent.toLowerCase().indexOf('mac') !== -1) { isMac = true; } else { isMac = false; } let into = setInterval(function() { var c = document.querySelectorAll("[href='#open']"); if (c.length > 0) { clearInterval(into); var menuId = "rec893608708"; let menuBlock = document.querySelector("#rec893608708 .t396"); let menuBlockArt = document.querySelector("#rec893608708 .t396__artboard"); menuBlock.style.display = "none"; setTimeout(function() { menuBlock.style.display = "block"; }, 0); var scrollWidth = 0; function removeAnimation(blk) { let block = document.querySelector(blk); let elemList = block.querySelectorAll(".t396__elem"); elemList.forEach(function(el) { if (el.hasAttribute('data-animate-sbs-event') && el.getAttribute('data-animate-sbs-event') != "hover" && el.getAttribute('data-animate-sbs-event') != "click" && el.getAttribute('data-animate-sbs-event') != "scroll") { el.classList.remove('t-sbs-anim_started'); } if (el.classList.contains('t-sbs-anim_reversed')) { el.classList.remove('t-sbs-anim_reversed'); el.classList.remove('t-sbs-anim_started'); } if (el.classList.contains('t-sbs-anim_playing')) { el.classList.remove('t-sbs-anim_playing'); } if (el.hasAttribute('data-animate-style')) { el.classList.remove('t-animate_started'); } }); } function addAnimation(blk) { let block = document.querySelector(blk); let elemList = block.querySelectorAll(".t396__elem"); elemList.forEach(function(el) { if (el.hasAttribute('data-animate-sbs-event') && el.getAttribute('data-animate-sbs-event') != "hover" && el.getAttribute('data-animate-sbs-event') != "click" && el.getAttribute('data-animate-sbs-event') != "scroll") { el.classList.add('t-sbs-anim_started'); } if (el.hasAttribute('data-animate-style')) { el.classList.add('t-animate_started'); } }); } let isIos = function() { var agent = window.navigator.userAgent; var start = agent.indexOf( 'OS ' ); if( ( agent.indexOf( 'iPhone' ) > -1 || agent.indexOf( 'iPad' ) > -1 ) && start > -1 ){ return true; } return false; }; let isAndroid = function() { var agent = window.navigator.userAgent; return agent.toLowerCase().indexOf("android") > -1; }; var scrollTop; function iosLockScroll() { if (isIos()) { scrollTop = window.pageYOffset || document.documentElement.scrollTop; document.body.classList.add('locked'); document.body.style.top = -(scrollTop) + 'px'; } } function iosUnlockScroll(x = "nolink") { if (isIos()) { if (document.body.classList.contains('locked')) { document.body.classList.remove('locked'); window.scrollTo(0, scrollTop); if (x && x != "nolink" && !window.nlm082openLinks.includes(x)) { setTimeout(function() { document.querySelector(`a[href="${x}"]`).click(); }, 500); } } } } function androidScrollFix(x) { if (isAndroid()) { setTimeout(function() { if (document.querySelector(`${x}`)) { document.querySelector(`${x}`).scrollIntoView({ behavior: 'auto', block: 'start' }); } }, 500); } } blk.querySelectorAll('[href]').forEach(function(item) { item.addEventListener("click", function(e) { iosUnlockScroll(item.getAttribute("href")); androidScrollFix(item.getAttribute("href")); }); }); var isAnimOnce = false; menuBlock.style.transform = 'translateX(100%)'; menuBlock.style.overflow = "hidden"; window.addEventListener("click", function(event) { let clickId = event.target.closest(".tn-elem"); if (document.querySelector(".t-body.nolimPopUp") && document.querySelector(".nolimShow893608708") && !clickId && !event.target.hasAttribute("nlm082") && !event.target.classList.contains("t-slds__arrow")) { isMenuOpen = false; window.nlm082open = false; setTimeout(function() { menuBlock.style.opacity = "0"; menuBlock.style.pointerEvents = "none"; blk.style.display = "none"; document.querySelector(".t-body").classList.remove("nolimPopUp"); if (window.nlm020obj == undefined || (window.nlm020obj && !window.nlm020obj.isOpen)) { document.querySelector("html").style.overflow = "visible"; iosUnlockScroll(); } removeAnimation("#rec893608708"); }, 400); menuBlock.style.transform = 'translateX(100%)'; menuBlock.classList.remove("nolimShow893608708"); } }); window.addEventListener("click", function(event) { if (document.querySelector(".t-body.nolimPopUp") && event.target.hasAttribute("nlm082") && event.target.getAttribute("nlm082") != "893608708") { isMenuOpen = false; window.nlm082open = false; setTimeout(function() { menuBlock.style.opacity = "0"; menuBlock.style.pointerEvents = "none"; blk.style.display = "none"; removeAnimation("#rec893608708"); }, 400); menuBlock.style.transform = 'translateX(100%)'; menuBlock.classList.remove("nolimShow893608708"); } }); c.forEach((function(item) { item.setAttribute("nlm082", "893608708"); item.addEventListener("click", (function(e) { e.preventDefault(); if (document.querySelector(".nolimShow893608708")) { isMenuOpen = false; window.nlm082open = false; setTimeout(function() { menuBlock.style.opacity = "0"; menuBlock.style.pointerEvents = "none"; blk.style.display = "none"; document.querySelector(".t-body").classList.remove("nolimPopUp"); if (window.nlm020obj == undefined || (window.nlm020obj && !window.nlm020obj.isOpen)) { document.querySelector("html").style.overflow = "visible"; iosUnlockScroll(); } removeAnimation("#rec893608708"); }, 400); menuBlock.style.transform = 'translateX(100%)'; menuBlock.classList.remove("nolimShow893608708"); } else { removeAnimation("#rec893608708"); blk.style.display = "block"; setTimeout(function() { isMenuOpen = true; window.nlm082open = true; menuBlock.style.opacity = "1"; menuBlock.style.pointerEvents = "auto"; menuBlock.style.transform = `translateX(-${scrollWidth}px)`; menuBlock.style.marginRight = `-${scrollWidth}px`; document.querySelector("html").style.overflow = "hidden"; iosLockScroll(); setTimeout(function() { menuBlock.classList.add("nolimShow893608708"); document.querySelector(".t-body").classList.add("nolimPopUp"); if (!isAnimOnce) { addAnimation("#rec893608708"); } isAnimOnce = false; }, 400); setTimeout(function() { "y" === window.lazy && t_lazyload_update(); typeof t_slds_updateSlider != "undefined" && t_slds_updateSlider("893608708"); if (document.querySelector("#rec893608708") && document.querySelector("#rec893608708").getAttribute("data-record-type") == "396") { t396_doResize('893608708'); } }, 300); }, 0); } })); })); document.querySelectorAll(".nolimClose").forEach((function(item) { item.classList.add("nolim_popup_close"); })); const isYaBrowser=navigator.userAgent.includes("YaBrowser"); menuBlock.querySelectorAll(".nolimClose, .nolim_popup_close").forEach((function(item) { item.addEventListener("click", (function() { const href='#open'; const selector='[name='+href.substr(1)+']'; const tildaAnchorLink=document.querySelector(selector); if(isYaBrowser && tildaAnchorLink){ tildaAnchorLink.setAttribute('id', href.substr(1)); const newLink=document.createElement("a"); newLink.setAttribute('href', href); menuBlock.appendChild(newLink); newLink.click(); newLink.remove(); } isMenuOpen = false; window.nlm082open = false; setTimeout(function() { 							console.log('menuBlock',menuBlock); menuBlock.style.opacity = "0"; menuBlock.style.pointerEvents = "none"; 							console.log('blk',blk); blk.style.display = "none"; document.querySelector(".t-body").classList.remove("nolimPopUp"); if (window.nlm020obj == undefined || (window.nlm020obj && !window.nlm020obj.isOpen)) { document.querySelector("html").style.overflow = "visible"; if (!item.querySelector(".tn-atom[href]") && !item.querySelector(".tn-atom a[href]")) { iosUnlockScroll(); } } removeAnimation("#rec893608708"); }, 400); menuBlock.style.transform = 'translateX(100%)'; menuBlock.classList.remove("nolimShow893608708"); })); })); } }); },500); })); }()); </script> <style> body.locked { overflow-y: scroll; width: 100%; } #rec893608708 { display: none; z-index: 99; background-color: #00000050; height: 100%; position: fixed; top: 0; left: 0; right: 0; bottom: 0; } #rec893608708 .t396__filter, #rec893608708 .t396__carrier { pointer-events: none!important; height: 0!important; min-height: 0!important; } #rec893608708 .t396__artboard { min-height: 0px!important; height: 0px!important; overflow: visible !important; position: relative !important; } .nolimClose { cursor: pointer; } #rec893608708 .t396 { position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 99!important; transition: transform ease-in-out 0.4s; opacity: 0; pointer-events: none; } .nolimPopUp { height: 100vh; min-height: 100vh; overflow: visible !important; } .nolimShow893608708 { overflow-y: auto !important; } </style>