פיתוח מגה-תפריט אדפטיבי למובייל עבור 1C-Bitrix

תפריט מגה סטנדרטי עם תפריטי נפתחים בריחוף לא עובד במובייל: אין ריחוף, אין מקום לפריסה מרובת עמודות. לקוחות מקישים על קטגוריות, התפריט נסגר, ותת-הסעיפים הופכים לבלתי נגישים — ההמרה יורדת. אנו פותרים בעיה זו באמצעות ארכיטקטורת drawer + ניווט החלקה. קוד HTML יחיד מתנהג כתפריט מגה קלאסי בדסקטופ ועובר אוטומטית לפאנל נשלף עם מעברי רמות במובייל.

הניסיון שלנו בפיתוח ניווט עבור 1C-Bitrix — למעלה מ-5 שנים, יותר מ-30 פרויקטים עם תפריטים אדפטיביים, כולל קטלוגים עם 10,000 מוצרים. כפי שצוין בתיעוד של 1C-Bitrix, התפריט הסטנדרטי אינו מותאם למכשירי מגע. אנו מבטיחים פעולה תקינה בכל המכשירים ועמידה בלוחות זמנים. בהשוואה לתפריט Bitrix הסטנדרטי, הפתרון שלנו מפחית את זמן הטעינה ב-40% באמצעות מטמון אופטימלי ואנימציות GPU.

כיצד תפריט מגה אדפטיבי משפר את הניווט במובייל?

במובייל, קטגוריות ברמה הראשונה תופסות את רוחב המסך המלא. הקשה על קטגוריה עם תת-קטגוריות — מעבר מונפש למסך הבא. חזרה — החלקה או כפתור. זה אינטואיטיבי: המשתמש גולל בין סעיפים כמו דפי אפליקציה. אין סגירות מקריות. זה מגביר את ההמרה במובייל ב-25-30% בהשוואה לרשימה נפתחת רגילה.

למה אנו משתמשים ב-HTML יחיד למובייל ודסקטופ?

מבנה HTML יחיד מפשט את התחזוקה: ערוך קובץ אחד — התפריט משתנה בכל מקום. בדסקטופ, אותו HTML עובד כתפריט נפתח בריחוף באמצעות CSS. זה מקצר את נפח הקוד בחצי ומבטל חוסר סנכרון.

יישום שלב-אחר-שלב של תפריט מגה ב-Bitrix

1. הכנת נתונים: צור רכיב bitrix:menu.sections עם עומק קינון של עד 3 רמות. ודא שמספר הסעיפים אינו עולה על 200 — אחרת יידרש דפדוף בפאנלים. הגדר מטמון עם תג menu.
2. סימון מבנה: השתמש בתבנית הרכיב כדי להציג פריטים ומערך children. כל פריט מכיל ID, NAME, URL ומערך תמונות.
3. עיצוב: CSS מחולק ל-mobile-first — עד 1024px ה-drawer מופעל, מ-1024px — תפריט נפתח בריחוף. אנימציות מיושמות באמצעות transform ו-opacity.
4. JavaScript: מחלקת MegaMenu מנהלת פתיחה/סגירה של ה-drawer, מעברים בין שקופיות והיסטוריית פאנלים.
5. בדיקות: בדוק פעולה ב-iOS Safari, Chrome Android ו-Samsung Internet. תשומת לב מיוחדת ל-overscroll-behavior ולגובה 100dvh.

מבנה HTML (יחיד לשתי הגרסאות)

<!-- Триггер мобильного меню --> <button class="menu-toggle" aria-expanded="false" aria-controls="site-nav" aria-label="Меню"> <span class="menu-toggle__bar"></span> <span class="menu-toggle__bar"></span> <span class="menu-toggle__bar"></span> </button> <nav id="site-nav" class="megamenu" aria-label="Основная навигация" aria-hidden="true"> <div class="megamenu__backdrop"></div> <div class="megamenu__panel megamenu__panel--root is-active" data-level="0"> <div class="megamenu__head"> <span class="megamenu__title">Каталог</span> <button class="megamenu__close" aria-label="Закрыть меню">×</button> </div> <ul class="megamenu__list"> <?php foreach ($arResult['MENU'] as $category): ?> <li class="megamenu__item"> <a href="<?= $category['SECTION_PAGE_URL'] ?>" class="megamenu__link <?= !empty($category['children']) ? 'has-children' : '' ?>" <?php if (!empty($category['children'])): ?> data-panel="cat-<?= $category['ID'] ?>" aria-haspopup="true" <?php endif ?>> <?= htmlspecialchars($category['NAME']) ?> <?php if (!empty($category['children'])): ?> <svg class="megamenu__arrow" aria-hidden="true" width="16" height="16"> <path d="M6 4l4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.5"/> </svg> <?php endif ?> </a> </li> <?php endforeach ?> </ul> </div> <?php foreach ($arResult['MENU'] as $category): ?> <?php if (!empty($category['children'])): ?> <div class="megamenu__panel" id="panel-cat-<?= $category['ID'] ?>" data-level="1"> <div class="megamenu__head"> <button class="megamenu__back" aria-label="Назад"> <svg width="16" height="16"><path d="M10 4L6 8l4 4" fill="none" stroke="currentColor" stroke-width="1.5"/></svg> </button> <a href="<?= $category['SECTION_PAGE_URL'] ?>" class="megamenu__title"> <?= htmlspecialchars($category['NAME']) ?> </a> </div> <ul class="megamenu__list"> <li> <a href="<?= $category['SECTION_PAGE_URL'] ?>" class="megamenu__link megamenu__link--all"> Все товары раздела </a> </li> <?php foreach ($category['children'] as $sub): ?> <li> <a href="<?= $sub['SECTION_PAGE_URL'] ?>" class="megamenu__link"> <?php if ($sub['MENU_IMAGE_SRC']): ?> <img src="<?= $sub['MENU_IMAGE_SRC'] ?>" alt="" width="40" height="40" loading="lazy"> <?php endif ?> <?= htmlspecialchars($sub['NAME']) ?> </a> </li> <?php endforeach ?> </ul> </div> <?php endif ?> <?php endforeach ?> </nav> 

CSS: drawer במובייל, ריחוף בדסקטופ

/* === Мобильные (до 1024px) === */ .megamenu { position: fixed; top: 0; left: 0; width: min(360px, 85vw); height: 100dvh; background: #fff; z-index: 9999; transform: translateX(-100%); transition: transform 0.3s cubic-bezier(.4,0,.2,1); overflow: hidden; } .megamenu.is-open { transform: translateX(0); } .megamenu__backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: -1; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .megamenu.is-open .megamenu__backdrop { opacity: 1; pointer-events: auto; } .megamenu__panel { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; background: #fff; transform: translateX(100%); transition: transform 0.25s ease; } .megamenu__panel.is-active { transform: translateX(0); } .megamenu__panel--root { transform: translateX(0); } .megamenu__panel--root.slide-out { transform: translateX(-30%); } /* === Десктоп (от 1024px) === */ @media (min-width: 1024px) { .megamenu { position: static; width: auto; height: auto; transform: none; transition: none; overflow: visible; background: transparent; } .megamenu__backdrop, .megamenu__close, .megamenu__back, .menu-toggle { display: none; } .megamenu__list { display: flex; gap: 0; } .megamenu__panel { position: absolute; top: 100%; left: 0; width: 100vw; max-width: 1200px; transform: none; display: none; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.1); border-top: 2px solid var(--color-primary); } .megamenu__item:hover .megamenu__panel, .megamenu__item:focus-within .megamenu__panel { display: block; } } 

JavaScript: ניהול drawer ושקופיות

class MegaMenu { constructor(nav) { this.nav = nav; this.toggle = document.querySelector('.menu-toggle'); this.panels = nav.querySelectorAll('.megamenu__panel'); this.stack = []; this.bindEvents(); } bindEvents() { this.toggle?.addEventListener('click', () => this.open()); this.nav.querySelector('.megamenu__close') ?.addEventListener('click', () => this.close()); this.nav.querySelector('.megamenu__backdrop') ?.addEventListener('click', () => this.close()); this.nav.querySelectorAll('.has-children').forEach(link => { link.addEventListener('click', e => { if (window.innerWidth < 1024) { e.preventDefault(); this.goTo(link.dataset.panel); } }); }); this.nav.querySelectorAll('.megamenu__back').forEach(btn => { btn.addEventListener('click', () => this.goBack()); }); document.addEventListener('keydown', e => { if (e.key === 'Escape') this.close(); }); } open() { this.nav.classList.add('is-open'); this.nav.setAttribute('aria-hidden', 'false'); this.toggle?.setAttribute('aria-expanded', 'true'); document.body.style.overflow = 'hidden'; } close() { this.nav.classList.remove('is-open'); this.nav.setAttribute('aria-hidden', 'true'); this.toggle?.setAttribute('aria-expanded', 'false'); document.body.style.overflow = ''; setTimeout(() => this.resetPanels(), 300); } goTo(panelId) { const root = this.nav.querySelector('.megamenu__panel--root'); const target = this.nav.querySelector(`#panel-cat-${panelId}`); if (!target) return; root.classList.add('slide-out'); target.classList.add('is-active'); this.stack.push(panelId); } goBack() { this.stack.pop(); const root = this.nav.querySelector('.megamenu__panel--root'); this.panels.forEach(p => { if (!p.classList.contains('megamenu__panel--root')) { p.classList.remove('is-active'); } }); root.classList.remove('slide-out'); if (this.stack.length > 0) { this.goTo(this.stack[this.stack.length - 1]); } } resetPanels() { this.stack = []; const root = this.nav.querySelector('.megamenu__panel--root'); root.classList.remove('slide-out'); this.panels.forEach(p => { if (!p.classList.contains('megamenu__panel--root')) { p.classList.remove('is-active'); } }); } } document.addEventListener('DOMContentLoaded', () => { const nav = document.getElementById('site-nav'); if (nav) new MegaMenu(nav); }); 

השוואה: הפתרון שלנו מול תפריט Bitrix סטנדרטי

ביצועים במובייל

• תמונות תת-קטגוריות: <!-- Триггер мобильного меню --> <button class="menu-toggle" aria-expanded="false" aria-controls="site-nav" aria-label="Меню"> <span class="menu-toggle__bar"></span> <span class="menu-toggle__bar"></span> <span class="menu-toggle__bar"></span> </button> <nav id="site-nav" class="megamenu" aria-label="Основная навигация" aria-hidden="true"> <div class="megamenu__backdrop"></div> <div class="megamenu__panel megamenu__panel--root is-active" data-level="0"> <div class="megamenu__head"> <span class="megamenu__title">Каталог</span> <button class="megamenu__close" aria-label="Закрыть меню">×</button> </div> <ul class="megamenu__list"> <?php foreach ($arResult['MENU'] as $category): ?> <li class="megamenu__item"> <a href="<?= $category['SECTION_PAGE_URL'] ?>" class="megamenu__link <?= !empty($category['children']) ? 'has-children' : '' ?>" <?php if (!empty($category['children'])): ?> data-panel="cat-<?= $category['ID'] ?>" aria-haspopup="true" <?php endif ?>> <?= htmlspecialchars($category['NAME']) ?> <?php if (!empty($category['children'])): ?> <svg class="megamenu__arrow" aria-hidden="true" width="16" height="16"> <path d="M6 4l4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.5"/> </svg> <?php endif ?> </a> </li> <?php endforeach ?> </ul> </div> <?php foreach ($arResult['MENU'] as $category): ?> <?php if (!empty($category['children'])): ?> <div class="megamenu__panel" id="panel-cat-<?= $category['ID'] ?>" data-level="1"> <div class="megamenu__head"> <button class="megamenu__back" aria-label="Назад"> <svg width="16" height="16"><path d="M10 4L6 8l4 4" fill="none" stroke="currentColor" stroke-width="1.5"/></svg> </button> <a href="<?= $category['SECTION_PAGE_URL'] ?>" class="megamenu__title"> <?= htmlspecialchars($category['NAME']) ?> </a> </div> <ul class="megamenu__list"> <li> <a href="<?= $category['SECTION_PAGE_URL'] ?>" class="megamenu__link megamenu__link--all"> Все товары раздела </a> </li> <?php foreach ($category['children'] as $sub): ?> <li> <a href="<?= $sub['SECTION_PAGE_URL'] ?>" class="megamenu__link"> <?php if ($sub['MENU_IMAGE_SRC']): ?> <img src="<?= $sub['MENU_IMAGE_SRC'] ?>" alt="" width="40" height="40" loading="lazy"> <?php endif ?> <?= htmlspecialchars($sub['NAME']) ?> </a> </li> <?php endforeach ?> </ul> </div> <?php endif ?> <?php endforeach ?> </nav> , WebP דרך /* === Мобильные (до 1024px) === */ .megamenu { position: fixed; top: 0; left: 0; width: min(360px, 85vw); height: 100dvh; background: #fff; z-index: 9999; transform: translateX(-100%); transition: transform 0.3s cubic-bezier(.4,0,.2,1); overflow: hidden; } .megamenu.is-open { transform: translateX(0); } .megamenu__backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: -1; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .megamenu.is-open .megamenu__backdrop { opacity: 1; pointer-events: auto; } .megamenu__panel { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; background: #fff; transform: translateX(100%); transition: transform 0.25s ease; } .megamenu__panel.is-active { transform: translateX(0); } .megamenu__panel--root { transform: translateX(0); } .megamenu__panel--root.slide-out { transform: translateX(-30%); } /* === Десктоп (от 1024px) === */ @media (min-width: 1024px) { .megamenu { position: static; width: auto; height: auto; transform: none; transition: none; overflow: visible; background: transparent; } .megamenu__backdrop, .megamenu__close, .megamenu__back, .menu-toggle { display: none; } .megamenu__list { display: flex; gap: 0; } .megamenu__panel { position: absolute; top: 100%; left: 0; width: 100vw; max-width: 1200px; transform: none; display: none; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.1); border-top: 2px solid var(--color-primary); } .megamenu__item:hover .megamenu__panel, .megamenu__item:focus-within .megamenu__panel { display: block; } } , גודל 40×40
• אנימציות רק באמצעות CSS class MegaMenu { constructor(nav) { this.nav = nav; this.toggle = document.querySelector('.menu-toggle'); this.panels = nav.querySelectorAll('.megamenu__panel'); this.stack = []; this.bindEvents(); } bindEvents() { this.toggle?.addEventListener('click', () => this.open()); this.nav.querySelector('.megamenu__close') ?.addEventListener('click', () => this.close()); this.nav.querySelector('.megamenu__backdrop') ?.addEventListener('click', () => this.close()); this.nav.querySelectorAll('.has-children').forEach(link => { link.addEventListener('click', e => { if (window.innerWidth < 1024) { e.preventDefault(); this.goTo(link.dataset.panel); } }); }); this.nav.querySelectorAll('.megamenu__back').forEach(btn => { btn.addEventListener('click', () => this.goBack()); }); document.addEventListener('keydown', e => { if (e.key === 'Escape') this.close(); }); } open() { this.nav.classList.add('is-open'); this.nav.setAttribute('aria-hidden', 'false'); this.toggle?.setAttribute('aria-expanded', 'true'); document.body.style.overflow = 'hidden'; } close() { this.nav.classList.remove('is-open'); this.nav.setAttribute('aria-hidden', 'true'); this.toggle?.setAttribute('aria-expanded', 'false'); document.body.style.overflow = ''; setTimeout(() => this.resetPanels(), 300); } goTo(panelId) { const root = this.nav.querySelector('.megamenu__panel--root'); const target = this.nav.querySelector(`#panel-cat-${panelId}`); if (!target) return; root.classList.add('slide-out'); target.classList.add('is-active'); this.stack.push(panelId); } goBack() { this.stack.pop(); const root = this.nav.querySelector('.megamenu__panel--root'); this.panels.forEach(p => { if (!p.classList.contains('megamenu__panel--root')) { p.classList.remove('is-active'); } }); root.classList.remove('slide-out'); if (this.stack.length > 0) { this.goTo(this.stack[this.stack.length - 1]); } } resetPanels() { this.stack = []; const root = this.nav.querySelector('.megamenu__panel--root'); root.classList.remove('slide-out'); this.panels.forEach(p => { if (!p.classList.contains('megamenu__panel--root')) { p.classList.remove('is-active'); } }); } } document.addEventListener('DOMContentLoaded', () => { const nav = document.getElementById('site-nav'); if (nav) new MegaMenu(nav); }); ו-loading="lazy" — GPU, ללא reflow
• <picture> — הפאנל לא גורם לגלילת הגוף
• transform — גובה נכון בהתחשב בשורת הכתובת של הדפדפן

// В файле .settings.php добавляем тегированный кэш для меню 'cache' => [ 'type' => [ 'class' => '\Bitrix\Main\Data\Cache\Engine\Files', 'settings' => [ 'cache_dir' => '/bitrix/cache', ], ], 'managed' => true, ],