Developing an adaptive mega menu for mobile 1C-Bitrix

Developing a Responsive Mega Menu for Mobile in 1C-Bitrix

A desktop mega menu with hover dropdowns does not work on mobile: there is no hover, and there is no room for a multi-column layout. A separate UX concept is required for mobile: a drawer (slide-out panel), hierarchical navigation with transitions between levels, and touch gestures. One codebase, different behaviour.

Concept: Drawer + Slide-Based Navigation

On mobile, first-level categories occupy the full screen width. Tapping a category that has subcategories triggers an animated transition to the next screen. Going back is handled by a swipe or a back button. On desktop, the same HTML operates as a hover dropdown via CSS.

HTML Structure (Shared for Both Variants)

<!-- Mobile menu trigger -->
<button class="menu-toggle" aria-expanded="false" aria-controls="site-nav" aria-label="Menu">
    <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="Main navigation" 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">Catalogue</span>
            <button class="megamenu__close" aria-label="Close menu">×</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="Back">
                <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">
                    All products in this section
                </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 on Mobile, Hover on Desktop

/* === Mobile (up to 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%);
}

/* === Desktop (1024px and above) === */
@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 and Slide Management

class MegaMenu {
    constructor(nav) {
        this.nav     = nav;
        this.toggle  = document.querySelector('.menu-toggle');
        this.panels  = nav.querySelectorAll('.megamenu__panel');
        this.stack   = []; // history of open panels

        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());

        // Navigate to sub-panel
        this.nav.querySelectorAll('.has-children').forEach(link => {
            link.addEventListener('click', e => {
                if (window.innerWidth < 1024) {
                    e.preventDefault();
                    this.goTo(link.dataset.panel);
                }
            });
        });

        // Back button
        this.nav.querySelectorAll('.megamenu__back').forEach(btn => {
            btn.addEventListener('click', () => this.goBack());
        });

        // Close on Escape
        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 = '';
        // Reset panel state
        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);
});

Mobile Performance

• Subcategory images: loading="lazy", WebP via <picture>, size 40×40
• Animations via CSS transform and opacity only — GPU-accelerated, no reflow
• overscroll-behavior: contain — the panel does not scroll the body
• height: 100dvh — correct height accounting for the browser address bar

Implementation Timeline