Интернет-магазин
Крупное меню с вертикальными фотографиями разделов
Широкая панель под шапкой с фото категорий и промо-баннером — как в меню крупного модного магазина.
Промпт
Вы можете скопировать промпт и вставить его в вайб блок в поле ввода. Подробнее в инструкции.
Сделай мега-меню интернет-магазина с карточками категорий.
Учитывай следующий контекст: это магазин [что продаёт]. Пункты верхнего уровня: [пункты]. Для пункта «[главный пункт]» есть категории с фото: [категории]. Справа в раскрытом меню — промо-баннер с акцией: [текст акции].
Меню предназначено для [кто покупатели], которые выбирают глазами и хотят сразу увидеть товары.
Представь его так: при наведении на «[главный пункт]» сразу под шапкой, без зазора, раскрывается панель на всю ширину экрана. У панели сплошной непрозрачный фон [цвет фона] и лёгкая тень снизу. Она лежит поверх всего содержимого страницы, поэтому обложка и заголовки под ней не видны. Внутри панель разделена на три колонки одинаковой высоты, выровненные по верхнему краю: слева, на четверть ширины, — список категорий текстом; по центру, на половину ширины, — сетка карточек по три в ряд; справа, на четверть ширины, — промо-баннер. Каждая карточка — вертикальный блок: сверху фото в пропорции 4:5, под ним подпись в одну-две строки. Высота карточки включает и фото, и подпись, а между рядами отступ не меньше 24 пикселей, поэтому подписи никогда не заходят под соседние карточки. Баннер — фото, заголовок, короткий текст и кнопка. Карточки появляются каскадом, фото слегка увеличивается при наведении. На телефоне мега-меню превращается в список категорий с маленькими фото.
Соблюдай ограничения: шрифты и цвета из стилей проекта, не больше шести карточек. Текст никогда не выходит за границы своей колонки и не обрезается многоточием: длинные названия переносятся на новую строку, а кнопка расширяется под свой текст. Пока панель открыта, плавающая иконка корзины Тильды скрыта, чтобы не перекрывать баннер. Панель не закрывается, пока курсор внутри неё.
Контент должен легко редактироваться в Тильде: все карточки, фото и тексты сразу в HTML, без генерации через JS, массивы, innerHTML или canvas. Фото — img с data-tilda-img="y", тексты — с data-tilda-edit="y". JS только для анимации и синхронизации декоративных фрагментов с главным img. В редакторе покажи главное фото и все обороты статично для выбора и замены контента; не перехватывай клики.
Хороший результат: меню выглядит как у крупного модного магазина, все колонки ровные и начинаются на одной высоте, фото одного размера и в едином стиле, ни один элемент не перекрывает другой.
Учитывай следующий контекст: это магазин [что продаёт]. Пункты верхнего уровня: [пункты]. Для пункта «[главный пункт]» есть категории с фото: [категории]. Справа в раскрытом меню — промо-баннер с акцией: [текст акции].
Меню предназначено для [кто покупатели], которые выбирают глазами и хотят сразу увидеть товары.
Представь его так: при наведении на «[главный пункт]» сразу под шапкой, без зазора, раскрывается панель на всю ширину экрана. У панели сплошной непрозрачный фон [цвет фона] и лёгкая тень снизу. Она лежит поверх всего содержимого страницы, поэтому обложка и заголовки под ней не видны. Внутри панель разделена на три колонки одинаковой высоты, выровненные по верхнему краю: слева, на четверть ширины, — список категорий текстом; по центру, на половину ширины, — сетка карточек по три в ряд; справа, на четверть ширины, — промо-баннер. Каждая карточка — вертикальный блок: сверху фото в пропорции 4:5, под ним подпись в одну-две строки. Высота карточки включает и фото, и подпись, а между рядами отступ не меньше 24 пикселей, поэтому подписи никогда не заходят под соседние карточки. Баннер — фото, заголовок, короткий текст и кнопка. Карточки появляются каскадом, фото слегка увеличивается при наведении. На телефоне мега-меню превращается в список категорий с маленькими фото.
Соблюдай ограничения: шрифты и цвета из стилей проекта, не больше шести карточек. Текст никогда не выходит за границы своей колонки и не обрезается многоточием: длинные названия переносятся на новую строку, а кнопка расширяется под свой текст. Пока панель открыта, плавающая иконка корзины Тильды скрыта, чтобы не перекрывать баннер. Панель не закрывается, пока курсор внутри неё.
Контент должен легко редактироваться в Тильде: все карточки, фото и тексты сразу в HTML, без генерации через JS, массивы, innerHTML или canvas. Фото — img с data-tilda-img="y", тексты — с data-tilda-edit="y". JS только для анимации и синхронизации декоративных фрагментов с главным img. В редакторе покажи главное фото и все обороты статично для выбора и замены контента; не перехватывай клики.
Хороший результат: меню выглядит как у крупного модного магазина, все колонки ровные и начинаются на одной высоте, фото одного размера и в едином стиле, ни один элемент не перекрывает другой.
Код
Вы можете скопировать код и вставить его в вайб блок в раздел код. Подробнее в инструкции.
<section id="vb-k8p-menu" class="vb-k8p-menu" data-section-name="Мега-меню" aria-label="Навигация магазина растений" data-vibeblock-unique-section="yes">
<style>
.vb-k8p-menu,
.vb-k8p-menu * { box-sizing: border-box; }
.vb-k8p-menu input,
.vb-k8p-menu textarea,
.vb-k8p-menu select { font: inherit; }
.vb-k8p-menu { --vb-k8p-green:#123c31; --vb-k8p-green-deep:#0c2c24; --vb-k8p-mist:#eaf0e9; --vb-k8p-white:#fff; position:relative; z-index:30; width:100%; color:var(--vb-k8p-white); font-family:var(--t-text-font); }
.vb-k8p-menu__bar { min-height:72px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; padding:0 clamp(18px,4vw,64px); background:var(--vb-k8p-green-deep); }
.vb-k8p-menu__brand { color:var(--vb-k8p-white); font-family:var(--t-headline-font); font-size:22px; font-weight:700; letter-spacing:-.03em; text-decoration:none; white-space:nowrap; }
.vb-k8p-menu__nav { display:flex; justify-content:center; align-items:stretch; min-height:72px; }
.vb-k8p-menu__nav-item { position:relative; display:flex; }
.vb-k8p-menu__nav-link, .vb-k8p-menu__trigger { appearance:none; border:0; display:flex; align-items:center; gap:8px; padding:0 18px; color:rgba(255,255,255,.82); background:transparent; font-family:var(--t-text-font); font-size:15px; font-weight:600; text-decoration:none; cursor:pointer; transition:color .2s ease, background .2s ease; }
.vb-k8p-menu__nav-link:hover, .vb-k8p-menu__trigger:hover, .vb-k8p-menu__trigger:focus-visible { color:var(--vb-k8p-white); background:rgba(255,255,255,.07); outline:none; }
.vb-k8p-menu__chevron { width:8px; height:8px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .25s ease; }
.vb-k8p-menu__actions { justify-self:end; display:flex; align-items:center; gap:16px; }
.vb-k8p-menu__action { color:var(--vb-k8p-white); font-family:var(--t-text-font); font-size:14px; font-weight:600; text-decoration:none; }
.vb-k8p-menu__action:hover { color:#bbd5c5; }
.vb-k8p-menu__panel { position:absolute; top:100%; left:0; z-index:31; width:100%; padding:32px clamp(18px,4vw,64px) 40px; background:var(--vb-k8p-green); box-shadow:0 18px 26px rgba(5,25,19,.25); opacity:0; visibility:hidden; transform:translateY(-6px); pointer-events:none; transition:opacity .2s ease, visibility .2s ease, transform .2s ease; }
.vb-k8p-menu--open .vb-k8p-menu__panel { opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
.vb-k8p-menu--open .vb-k8p-menu__chevron { transform:rotate(225deg) translateY(-2px); }
.vb-k8p-menu__layout { display:grid; grid-template-columns:1fr 2fr 1fr; gap:clamp(24px,3vw,52px); align-items:stretch; max-width:1440px; margin:0 auto; }
.vb-k8p-menu__categories, .vb-k8p-menu__cards, .vb-k8p-menu__promo { min-width:0; }
.vb-k8p-menu__title { margin:0 0 18px; color:rgba(255,255,255,.58); font-family:var(--t-text-font); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.vb-k8p-menu__category-list { display:grid; gap:2px; margin:0; padding:0; list-style:none; }
.vb-k8p-menu__category-link { display:block; padding:9px 0; color:var(--vb-k8p-white); font-family:var(--t-headline-font); font-size:clamp(17px,1.4vw,21px); font-weight:600; line-height:1.18; overflow-wrap:anywhere; text-decoration:none; transition:color .2s ease, padding-left .2s ease; }
.vb-k8p-menu__category-link:hover { padding-left:8px; color:#bbd5c5; }
.vb-k8p-menu__cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-content:start; gap:24px 14px; }
.vb-k8p-menu__card { display:flex; flex-direction:column; min-width:0; color:var(--vb-k8p-white); text-decoration:none; animation:vb-k8p-card-in .48s both cubic-bezier(.16,1,.3,1); }
.vb-k8p-menu__card:nth-child(2) { animation-delay:.055s; } .vb-k8p-menu__card:nth-child(3) { animation-delay:.11s; } .vb-k8p-menu__card:nth-child(4) { animation-delay:.165s; } .vb-k8p-menu__card:nth-child(5) { animation-delay:.22s; } .vb-k8p-menu__card:nth-child(6) { animation-delay:.275s; }
.vb-k8p-menu__photo { aspect-ratio:4/5; overflow:hidden; background:#205344; }
.vb-k8p-menu__photo img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .45s cubic-bezier(.16,1,.3,1); }
.vb-k8p-menu__card:hover .vb-k8p-menu__photo img { transform:scale(1.065); }
.vb-k8p-menu__card-name { display:block; padding-top:10px; color:var(--vb-k8p-white); font-family:var(--t-headline-font); font-size:15px; font-weight:600; line-height:1.23; overflow-wrap:anywhere; }
.vb-k8p-menu__promo { position:relative; min-height:100%; display:flex; align-items:flex-end; overflow:hidden; background:#0e3027; isolation:isolate; }
.vb-k8p-menu__promo::before { position:absolute; z-index:-2; inset:0; background:url('https://static.tildacdn.com/tild6431-3538-4130-a534-656136633833/magnific__-__83010.png') center/cover no-repeat; content:""; }
.vb-k8p-menu__promo::after { position:absolute; z-index:-1; inset:0; background:linear-gradient(180deg,rgba(5,27,21,.18) 10%,rgba(5,27,21,.9) 100%); content:""; }
.vb-k8p-menu__promo-content { padding:clamp(18px,2vw,28px); }
.vb-k8p-menu__promo-title { margin:0 0 10px; color:var(--vb-k8p-white); font-family:var(--t-headline-font); font-size:clamp(26px,2.4vw,38px); font-weight:700; line-height:.98; letter-spacing:-.035em; text-wrap:balance; overflow-wrap:anywhere; }
.vb-k8p-menu__promo-text { margin:0 0 18px; color:rgba(255,255,255,.82); font-family:var(--t-text-font); font-size:14px; line-height:1.42; text-wrap:pretty; overflow-wrap:anywhere; }
.vb-k8p-menu__button { display:inline-flex; width:max-content; max-width:100%; min-height:43px; align-items:center; justify-content:center; padding:10px 16px; border:1px solid var(--vb-k8p-white); color:var(--vb-k8p-green-deep); background:var(--vb-k8p-white); font-family:var(--t-text-font); font-size:13px; font-weight:700; line-height:1.15; text-align:center; text-decoration:none; white-space:normal; transition:background .2s ease,color .2s ease; }
.vb-k8p-menu__button:hover { color:var(--vb-k8p-white); background:transparent; }
@keyframes vb-k8p-card-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:959px) { .vb-k8p-menu__layout { grid-template-columns:1fr 1.55fr; } .vb-k8p-menu__promo { display:none; } .vb-k8p-menu__actions { display:none; } }
@media (max-width:639px) { .vb-k8p-menu__bar { grid-template-columns:1fr auto; min-height:62px; padding:0 18px; } .vb-k8p-menu__brand { font-size:20px; } .vb-k8p-menu__nav { min-height:62px; } .vb-k8p-menu__nav-item:not(:first-child) { display:none; } .vb-k8p-menu__trigger { padding:0 2px 0 14px; font-size:14px; } .vb-k8p-menu__panel { padding:20px 18px 26px; } .vb-k8p-menu__layout { display:block; } .vb-k8p-menu__categories { margin-bottom:18px; } .vb-k8p-menu__title { margin-bottom:10px; } .vb-k8p-menu__category-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; } .vb-k8p-menu__category-link { padding:7px 0; font-size:15px; } .vb-k8p-menu__cards { grid-template-columns:1fr; gap:8px; } .vb-k8p-menu__card { display:grid; grid-template-columns:52px minmax(0,1fr); align-items:center; gap:12px; padding:5px 0; animation:none; } .vb-k8p-menu__photo { width:52px; aspect-ratio:1; } .vb-k8p-menu__card-name { padding:0; font-size:16px; } }
@media (max-width:374px) { .vb-k8p-menu__category-list { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { .vb-k8p-menu *, .vb-k8p-menu *::before, .vb-k8p-menu *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } }
</style>
<header class="vb-k8p-menu__bar">
<a class="vb-k8p-menu__brand" href="#">floré</a>
<nav class="vb-k8p-menu__nav" aria-label="Основная навигация">
<div class="vb-k8p-menu__nav-item">
<button class="vb-k8p-menu__trigger" type="button" aria-expanded="false" aria-controls="vb-k8p-panel">Каталог <span class="vb-k8p-menu__chevron" aria-hidden="true"></span></button>
</div>
<div class="vb-k8p-menu__nav-item"><a class="vb-k8p-menu__nav-link" href="#buyers">Покупателям</a></div>
<div class="vb-k8p-menu__nav-item"><a class="vb-k8p-menu__nav-link" href="#about">О нас</a></div>
</nav>
<div class="vb-k8p-menu__actions"><a class="vb-k8p-menu__action" href="#search">Поиск</a><a class="vb-k8p-menu__action" href="#cart">Корзина</a></div>
</header>
<div id="vb-k8p-panel" class="vb-k8p-menu__panel" aria-hidden="true">
<div class="vb-k8p-menu__layout">
<aside class="vb-k8p-menu__categories" aria-label="Категории растений"><p class="vb-k8p-menu__title">Все растения</p><ul class="vb-k8p-menu__category-list"><li><a class="vb-k8p-menu__category-link" href="#large">Крупные растения</a></li><li><a class="vb-k8p-menu__category-link" href="#easy">Неприхотливые</a></li><li><a class="vb-k8p-menu__category-link" href="#flowering">Цветущие</a></li><li><a class="vb-k8p-menu__category-link" href="#pet">Для дома с питомцами</a></li><li><a class="vb-k8p-menu__category-link" href="#pots">Кашпо и аксессуары</a></li><li><a class="vb-k8p-menu__category-link" href="#care">Уход за растениями</a></li></ul></aside>
<div class="vb-k8p-menu__cards" aria-label="Популярные категории">
<a class="vb-k8p-menu__card" href="#monstera"><span class="vb-k8p-menu__photo"><img src="https://static.tildacdn.com/tild6664-3936-4432-a635-303261656132/magnific__-__83005.png" alt="Монстера в интерьере"></span><span class="vb-k8p-menu__card-name">Монстеры</span></a>
<a class="vb-k8p-menu__card" href="#calathea"><span class="vb-k8p-menu__photo"><img src="https://static.tildacdn.com/tild6664-3130-4330-b238-633361343566/magnific__-__83006.png" alt="Калатея в домашнем интерьере"></span><span class="vb-k8p-menu__card-name">Калатеи</span></a>
<a class="vb-k8p-menu__card" href="#cacti"><span class="vb-k8p-menu__photo"><img src="https://static.tildacdn.com/tild3765-6266-4637-b131-366463326264/magnific__-__83007.png" alt="Коллекция кактусов"></span><span class="vb-k8p-menu__card-name">Кактусы</span></a>
<a class="vb-k8p-menu__card" href="#orchids"><span class="vb-k8p-menu__photo"><img src="https://static.tildacdn.com/tild3662-3066-4632-a262-326530383163/magnific__-__83008.png" alt="Цветущая орхидея"></span><span class="vb-k8p-menu__card-name">Орхидеи</span></a>
<a class="vb-k8p-menu__card" href="#care-tools"><span class="vb-k8p-menu__photo"><img src="https://static.tildacdn.com/tild6439-6234-4265-b161-623834356337/magnific__-__83009.png" alt="Инструменты для ухода за растениями"></span><span class="vb-k8p-menu__card-name">Уход</span></a>
<a class="vb-k8p-menu__card" href="#easy"><span class="vb-k8p-menu__photo"><img src="https://static.tildacdn.com/tila6636-6166-4131-a362-626263623264/magnific__-__83011.png" alt="Зелёное растение для дома"></span><span class="vb-k8p-menu__card-name">Для начинающих</span></a>
</div>
<aside class="vb-k8p-menu__promo" aria-label="Специальное предложение"><div class="vb-k8p-menu__promo-content"><h2 class="vb-k8p-menu__promo-title">Зелёный дом начинается здесь</h2><p class="vb-k8p-menu__promo-text">Подберём растение под ваш свет, ритм жизни и интерьер.</p><a class="t-btnflex t-btnflex_sm vb-k8p-menu__button" href="#selection"><span class="t-btnflex__text">Подобрать растение</span></a></div></aside>
</div>
</div>
<script>
(function () {
var root = document.getElementById('vb-k8p-menu');
if (!root) return;
var trigger = root.querySelector('.vb-k8p-menu__trigger');
var panel = root.querySelector('.vb-k8p-menu__panel');
var closeTimer;
var cartIcons = [];
function toggleCartIcons(isHidden) {
if (isHidden) {
document.querySelectorAll('.t706__carticon').forEach(function (icon) {
if (cartIcons.some(function (item) { return item.element === icon; })) return;
cartIcons.push({ element: icon, display: icon.style.display, priority: icon.style.getPropertyPriority('display') });
icon.style.setProperty('display', 'none', 'important');
});
} else {
cartIcons.forEach(function (item) {
if (item.display) item.element.style.setProperty('display', item.display, item.priority);
else item.element.style.removeProperty('display');
});
cartIcons = [];
}
}
function setOpen(isOpen) { root.classList.toggle('vb-k8p-menu--open', isOpen); trigger.setAttribute('aria-expanded', String(isOpen)); panel.setAttribute('aria-hidden', String(!isOpen)); toggleCartIcons(isOpen); }
function cancelClose() { window.clearTimeout(closeTimer); }
function scheduleClose() { closeTimer = window.setTimeout(function () { setOpen(false); }, 120); }
trigger.addEventListener('click', function () { cancelClose(); setOpen(!root.classList.contains('vb-k8p-menu--open')); });
root.addEventListener('mouseenter', function () { if (window.matchMedia('(min-width: 640px)').matches) { cancelClose(); setOpen(true); } });
root.addEventListener('mouseleave', function () { if (window.matchMedia('(min-width: 640px)').matches) scheduleClose(); });
root.addEventListener('focusin', cancelClose);
root.addEventListener('focusout', function () { window.setTimeout(function () { if (!root.contains(document.activeElement)) setOpen(false); }, 0); });
document.addEventListener('keydown', function (event) { if (event.key === 'Escape') { setOpen(false); trigger.focus(); } });
}());
</script>
</section>
<style>
.vb-k8p-menu,
.vb-k8p-menu * { box-sizing: border-box; }
.vb-k8p-menu input,
.vb-k8p-menu textarea,
.vb-k8p-menu select { font: inherit; }
.vb-k8p-menu { --vb-k8p-green:#123c31; --vb-k8p-green-deep:#0c2c24; --vb-k8p-mist:#eaf0e9; --vb-k8p-white:#fff; position:relative; z-index:30; width:100%; color:var(--vb-k8p-white); font-family:var(--t-text-font); }
.vb-k8p-menu__bar { min-height:72px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; padding:0 clamp(18px,4vw,64px); background:var(--vb-k8p-green-deep); }
.vb-k8p-menu__brand { color:var(--vb-k8p-white); font-family:var(--t-headline-font); font-size:22px; font-weight:700; letter-spacing:-.03em; text-decoration:none; white-space:nowrap; }
.vb-k8p-menu__nav { display:flex; justify-content:center; align-items:stretch; min-height:72px; }
.vb-k8p-menu__nav-item { position:relative; display:flex; }
.vb-k8p-menu__nav-link, .vb-k8p-menu__trigger { appearance:none; border:0; display:flex; align-items:center; gap:8px; padding:0 18px; color:rgba(255,255,255,.82); background:transparent; font-family:var(--t-text-font); font-size:15px; font-weight:600; text-decoration:none; cursor:pointer; transition:color .2s ease, background .2s ease; }
.vb-k8p-menu__nav-link:hover, .vb-k8p-menu__trigger:hover, .vb-k8p-menu__trigger:focus-visible { color:var(--vb-k8p-white); background:rgba(255,255,255,.07); outline:none; }
.vb-k8p-menu__chevron { width:8px; height:8px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .25s ease; }
.vb-k8p-menu__actions { justify-self:end; display:flex; align-items:center; gap:16px; }
.vb-k8p-menu__action { color:var(--vb-k8p-white); font-family:var(--t-text-font); font-size:14px; font-weight:600; text-decoration:none; }
.vb-k8p-menu__action:hover { color:#bbd5c5; }
.vb-k8p-menu__panel { position:absolute; top:100%; left:0; z-index:31; width:100%; padding:32px clamp(18px,4vw,64px) 40px; background:var(--vb-k8p-green); box-shadow:0 18px 26px rgba(5,25,19,.25); opacity:0; visibility:hidden; transform:translateY(-6px); pointer-events:none; transition:opacity .2s ease, visibility .2s ease, transform .2s ease; }
.vb-k8p-menu--open .vb-k8p-menu__panel { opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
.vb-k8p-menu--open .vb-k8p-menu__chevron { transform:rotate(225deg) translateY(-2px); }
.vb-k8p-menu__layout { display:grid; grid-template-columns:1fr 2fr 1fr; gap:clamp(24px,3vw,52px); align-items:stretch; max-width:1440px; margin:0 auto; }
.vb-k8p-menu__categories, .vb-k8p-menu__cards, .vb-k8p-menu__promo { min-width:0; }
.vb-k8p-menu__title { margin:0 0 18px; color:rgba(255,255,255,.58); font-family:var(--t-text-font); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.vb-k8p-menu__category-list { display:grid; gap:2px; margin:0; padding:0; list-style:none; }
.vb-k8p-menu__category-link { display:block; padding:9px 0; color:var(--vb-k8p-white); font-family:var(--t-headline-font); font-size:clamp(17px,1.4vw,21px); font-weight:600; line-height:1.18; overflow-wrap:anywhere; text-decoration:none; transition:color .2s ease, padding-left .2s ease; }
.vb-k8p-menu__category-link:hover { padding-left:8px; color:#bbd5c5; }
.vb-k8p-menu__cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-content:start; gap:24px 14px; }
.vb-k8p-menu__card { display:flex; flex-direction:column; min-width:0; color:var(--vb-k8p-white); text-decoration:none; animation:vb-k8p-card-in .48s both cubic-bezier(.16,1,.3,1); }
.vb-k8p-menu__card:nth-child(2) { animation-delay:.055s; } .vb-k8p-menu__card:nth-child(3) { animation-delay:.11s; } .vb-k8p-menu__card:nth-child(4) { animation-delay:.165s; } .vb-k8p-menu__card:nth-child(5) { animation-delay:.22s; } .vb-k8p-menu__card:nth-child(6) { animation-delay:.275s; }
.vb-k8p-menu__photo { aspect-ratio:4/5; overflow:hidden; background:#205344; }
.vb-k8p-menu__photo img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .45s cubic-bezier(.16,1,.3,1); }
.vb-k8p-menu__card:hover .vb-k8p-menu__photo img { transform:scale(1.065); }
.vb-k8p-menu__card-name { display:block; padding-top:10px; color:var(--vb-k8p-white); font-family:var(--t-headline-font); font-size:15px; font-weight:600; line-height:1.23; overflow-wrap:anywhere; }
.vb-k8p-menu__promo { position:relative; min-height:100%; display:flex; align-items:flex-end; overflow:hidden; background:#0e3027; isolation:isolate; }
.vb-k8p-menu__promo::before { position:absolute; z-index:-2; inset:0; background:url('https://static.tildacdn.com/tild6431-3538-4130-a534-656136633833/magnific__-__83010.png') center/cover no-repeat; content:""; }
.vb-k8p-menu__promo::after { position:absolute; z-index:-1; inset:0; background:linear-gradient(180deg,rgba(5,27,21,.18) 10%,rgba(5,27,21,.9) 100%); content:""; }
.vb-k8p-menu__promo-content { padding:clamp(18px,2vw,28px); }
.vb-k8p-menu__promo-title { margin:0 0 10px; color:var(--vb-k8p-white); font-family:var(--t-headline-font); font-size:clamp(26px,2.4vw,38px); font-weight:700; line-height:.98; letter-spacing:-.035em; text-wrap:balance; overflow-wrap:anywhere; }
.vb-k8p-menu__promo-text { margin:0 0 18px; color:rgba(255,255,255,.82); font-family:var(--t-text-font); font-size:14px; line-height:1.42; text-wrap:pretty; overflow-wrap:anywhere; }
.vb-k8p-menu__button { display:inline-flex; width:max-content; max-width:100%; min-height:43px; align-items:center; justify-content:center; padding:10px 16px; border:1px solid var(--vb-k8p-white); color:var(--vb-k8p-green-deep); background:var(--vb-k8p-white); font-family:var(--t-text-font); font-size:13px; font-weight:700; line-height:1.15; text-align:center; text-decoration:none; white-space:normal; transition:background .2s ease,color .2s ease; }
.vb-k8p-menu__button:hover { color:var(--vb-k8p-white); background:transparent; }
@keyframes vb-k8p-card-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:959px) { .vb-k8p-menu__layout { grid-template-columns:1fr 1.55fr; } .vb-k8p-menu__promo { display:none; } .vb-k8p-menu__actions { display:none; } }
@media (max-width:639px) { .vb-k8p-menu__bar { grid-template-columns:1fr auto; min-height:62px; padding:0 18px; } .vb-k8p-menu__brand { font-size:20px; } .vb-k8p-menu__nav { min-height:62px; } .vb-k8p-menu__nav-item:not(:first-child) { display:none; } .vb-k8p-menu__trigger { padding:0 2px 0 14px; font-size:14px; } .vb-k8p-menu__panel { padding:20px 18px 26px; } .vb-k8p-menu__layout { display:block; } .vb-k8p-menu__categories { margin-bottom:18px; } .vb-k8p-menu__title { margin-bottom:10px; } .vb-k8p-menu__category-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; } .vb-k8p-menu__category-link { padding:7px 0; font-size:15px; } .vb-k8p-menu__cards { grid-template-columns:1fr; gap:8px; } .vb-k8p-menu__card { display:grid; grid-template-columns:52px minmax(0,1fr); align-items:center; gap:12px; padding:5px 0; animation:none; } .vb-k8p-menu__photo { width:52px; aspect-ratio:1; } .vb-k8p-menu__card-name { padding:0; font-size:16px; } }
@media (max-width:374px) { .vb-k8p-menu__category-list { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { .vb-k8p-menu *, .vb-k8p-menu *::before, .vb-k8p-menu *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } }
</style>
<header class="vb-k8p-menu__bar">
<a class="vb-k8p-menu__brand" href="#">floré</a>
<nav class="vb-k8p-menu__nav" aria-label="Основная навигация">
<div class="vb-k8p-menu__nav-item">
<button class="vb-k8p-menu__trigger" type="button" aria-expanded="false" aria-controls="vb-k8p-panel">Каталог <span class="vb-k8p-menu__chevron" aria-hidden="true"></span></button>
</div>
<div class="vb-k8p-menu__nav-item"><a class="vb-k8p-menu__nav-link" href="#buyers">Покупателям</a></div>
<div class="vb-k8p-menu__nav-item"><a class="vb-k8p-menu__nav-link" href="#about">О нас</a></div>
</nav>
<div class="vb-k8p-menu__actions"><a class="vb-k8p-menu__action" href="#search">Поиск</a><a class="vb-k8p-menu__action" href="#cart">Корзина</a></div>
</header>
<div id="vb-k8p-panel" class="vb-k8p-menu__panel" aria-hidden="true">
<div class="vb-k8p-menu__layout">
<aside class="vb-k8p-menu__categories" aria-label="Категории растений"><p class="vb-k8p-menu__title">Все растения</p><ul class="vb-k8p-menu__category-list"><li><a class="vb-k8p-menu__category-link" href="#large">Крупные растения</a></li><li><a class="vb-k8p-menu__category-link" href="#easy">Неприхотливые</a></li><li><a class="vb-k8p-menu__category-link" href="#flowering">Цветущие</a></li><li><a class="vb-k8p-menu__category-link" href="#pet">Для дома с питомцами</a></li><li><a class="vb-k8p-menu__category-link" href="#pots">Кашпо и аксессуары</a></li><li><a class="vb-k8p-menu__category-link" href="#care">Уход за растениями</a></li></ul></aside>
<div class="vb-k8p-menu__cards" aria-label="Популярные категории">
<a class="vb-k8p-menu__card" href="#monstera"><span class="vb-k8p-menu__photo"><img src="https://static.tildacdn.com/tild6664-3936-4432-a635-303261656132/magnific__-__83005.png" alt="Монстера в интерьере"></span><span class="vb-k8p-menu__card-name">Монстеры</span></a>
<a class="vb-k8p-menu__card" href="#calathea"><span class="vb-k8p-menu__photo"><img src="https://static.tildacdn.com/tild6664-3130-4330-b238-633361343566/magnific__-__83006.png" alt="Калатея в домашнем интерьере"></span><span class="vb-k8p-menu__card-name">Калатеи</span></a>
<a class="vb-k8p-menu__card" href="#cacti"><span class="vb-k8p-menu__photo"><img src="https://static.tildacdn.com/tild3765-6266-4637-b131-366463326264/magnific__-__83007.png" alt="Коллекция кактусов"></span><span class="vb-k8p-menu__card-name">Кактусы</span></a>
<a class="vb-k8p-menu__card" href="#orchids"><span class="vb-k8p-menu__photo"><img src="https://static.tildacdn.com/tild3662-3066-4632-a262-326530383163/magnific__-__83008.png" alt="Цветущая орхидея"></span><span class="vb-k8p-menu__card-name">Орхидеи</span></a>
<a class="vb-k8p-menu__card" href="#care-tools"><span class="vb-k8p-menu__photo"><img src="https://static.tildacdn.com/tild6439-6234-4265-b161-623834356337/magnific__-__83009.png" alt="Инструменты для ухода за растениями"></span><span class="vb-k8p-menu__card-name">Уход</span></a>
<a class="vb-k8p-menu__card" href="#easy"><span class="vb-k8p-menu__photo"><img src="https://static.tildacdn.com/tila6636-6166-4131-a362-626263623264/magnific__-__83011.png" alt="Зелёное растение для дома"></span><span class="vb-k8p-menu__card-name">Для начинающих</span></a>
</div>
<aside class="vb-k8p-menu__promo" aria-label="Специальное предложение"><div class="vb-k8p-menu__promo-content"><h2 class="vb-k8p-menu__promo-title">Зелёный дом начинается здесь</h2><p class="vb-k8p-menu__promo-text">Подберём растение под ваш свет, ритм жизни и интерьер.</p><a class="t-btnflex t-btnflex_sm vb-k8p-menu__button" href="#selection"><span class="t-btnflex__text">Подобрать растение</span></a></div></aside>
</div>
</div>
<script>
(function () {
var root = document.getElementById('vb-k8p-menu');
if (!root) return;
var trigger = root.querySelector('.vb-k8p-menu__trigger');
var panel = root.querySelector('.vb-k8p-menu__panel');
var closeTimer;
var cartIcons = [];
function toggleCartIcons(isHidden) {
if (isHidden) {
document.querySelectorAll('.t706__carticon').forEach(function (icon) {
if (cartIcons.some(function (item) { return item.element === icon; })) return;
cartIcons.push({ element: icon, display: icon.style.display, priority: icon.style.getPropertyPriority('display') });
icon.style.setProperty('display', 'none', 'important');
});
} else {
cartIcons.forEach(function (item) {
if (item.display) item.element.style.setProperty('display', item.display, item.priority);
else item.element.style.removeProperty('display');
});
cartIcons = [];
}
}
function setOpen(isOpen) { root.classList.toggle('vb-k8p-menu--open', isOpen); trigger.setAttribute('aria-expanded', String(isOpen)); panel.setAttribute('aria-hidden', String(!isOpen)); toggleCartIcons(isOpen); }
function cancelClose() { window.clearTimeout(closeTimer); }
function scheduleClose() { closeTimer = window.setTimeout(function () { setOpen(false); }, 120); }
trigger.addEventListener('click', function () { cancelClose(); setOpen(!root.classList.contains('vb-k8p-menu--open')); });
root.addEventListener('mouseenter', function () { if (window.matchMedia('(min-width: 640px)').matches) { cancelClose(); setOpen(true); } });
root.addEventListener('mouseleave', function () { if (window.matchMedia('(min-width: 640px)').matches) scheduleClose(); });
root.addEventListener('focusin', cancelClose);
root.addEventListener('focusout', function () { window.setTimeout(function () { if (!root.contains(document.activeElement)) setOpen(false); }, 0); });
document.addEventListener('keydown', function (event) { if (event.key === 'Escape') { setOpen(false); trigger.focus(); } });
}());
</script>
</section>
Что выбрать, промпт или код?
Копируйте промпт, если хотите получить похожий результат, но ввести информацию о своём бизнесе и задать свои требования. Например, изменить кнопки, тексты, цвета, фотографии или другие элементы.
Копируйте код, если хотите получить точно такой же блок. Чтобы его изменить, придётся отредактировать html-код.
