Каковы best practices при вёрстке мега меню и мобильного меню без дублирования кода?

Question

[Сергей Толкачев]

Собственно, сабж. Задача типовая: сверху sticky меню строчкой. При ховере на пункту меню выпадают подпункты с картинками, формами и т. д. Реализовать адаптивом. Посмотрел немало примеров на крупных и модных сайтах. Везде для мобильного меню дублируется код навигации с другими стилями. Мобильное прячут на десктопе и десктопное на мобилах. Но при этом все эти огромные списки ссылок в коде страницы остаются, дублируются. А это как-то не рационально, да и с точки зрения СЕО не совсем хорошо. Там что-то с математикой распределения весов происходит.
Вопрос: есть ли пример успешной вёрстки Мега меню так, чтоб оно же было мобильным?

Comments

[Ankhena]

Применить те же стили, которые для мобильного через media для одного куска кода.
Дублировать могут потому что не могут перенести/спозиционировать его в нужное место на мобилках.
Тут нужно смотреть конкретные макеты и придумывать как сделать без дублирования.

В любом случае можно переместить на JS без дублирования.

[Сергей Толкачев]

Обычная верстка мобильного (да и десктопного нередко тоже) меню (например, аккордеоном) предполагает вложенные списки

<ul>
<li><a href="#">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li><a href="#">Пункт 3</a>
<ul>
<li><a href="#">Подпункт 1</a></li>
<li><a href="#">Подпункт 2</a></li>
<li><a href="#">Подпункт  3</a></li>
</ul>
</li>
</ul>

В то время как в мега меню - это пункты меню верхнего уровня в рядок, а остальные выносятся в свой контейнер и показываются не по ховеру, а через js.

<ul>
<li><a href="#">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li data-target="submenu-1"><a href="#">Пункт 3</a></li>
</ul>
<div id="submenu-container">
<ul id="submenu-1">
<li><a href="#">Подпункт 1</a></li>
<li><a href="#">Подпункт 2</a></li>
<li><a href="#">Подпункт  3</a></li>
</ul>
</div>

Вот и думается о том, как совместить эти 2 подхода.

[cssfish]

проблема может быть
1)в дизайне или в коде нафигачено такого, что проще отдельно - например, вложили на десктопе так, что на мобильной потом уже и не вытащищь куда надо.
2) если дизайн постоянно меняется - тогда точно проще делать отдельно.
3) Или если сделано на абы как - тогда тоже проще отдельно.

а в остальном, если сам делаешь то проблемы нет, все верстается нормально. все лишнее десктопное (кроме названия пункта) заворачиваешь в враппер и скрываешь

Answer 1

[Антон Шаманов]

адаптивность подразумевает то, что верстка должна быть рассчитана скорее на определенный диапазон разрешений, а не на "все в одном", поэтому оптимальный вариант - сверстать отдельную версию для мобильных устройств т.е. под разрешения менее 700-800px. это займет меньше времени в плане разработки/тестирования и позволит ускорить загрузку сайта т.к. ассеты будут разделены

Comments

[Сергей Толкачев]

У меня не реактивный фронт, просто адаптив с небольшим js. Поэтому собственно и есть эта сложность. А грузить всю навигацию по аяксу как-то неправильным кажется.

[Антон Шаманов]

У меня не реактивный фронт,

Я говорю не о конкретном меню, а о верстке страниц в общем. У большинства cms есть возможность задать мобильную тему дизайна.

А грузить всю навигацию по аяксу как-то неправильным кажется.

передавай объектом и генерируй меню при загрузке страницы

// сгенерированный объект
const menuItems = [
    {url: '/', title: 'Home', items: []},
    {url: '/foo/', title: 'Foo', items: [{url: '/foo/bar/', title: 'Bar', items: []}]}
];
// добавляем пункты меню
function renderMenu(parentElement, items)
{
    for (let item of items) {
        const itemElement = document.createElement('a');
        itemElement.href = item.url;
        itemElement.innerHTML = title;
        parentElement.append(itemElement);

        if (item.items.length > 0) {
            const menuElement = document.createElement('div');
            menuElement.className = 'submenu';
            parentElement.append(menuElement);

            renderMenu(menuElement, item.items);
        }
    }
}

document.addEventListener(
    'DOMContentLoaded',
    () => {
        if ((window.screen.availWidth || window.screen.width) <= 800) {
            // добавляем компактное меню
            renderMenu(document.getElementById('#mobile-menu'), menuItems);
        } else {
            // добавляем стандартное меню
            renderMenu(document.getElementById('#menu'), menuItems);
        }
    }
);

Answer 2

[Andrew Ruwz]

Согласен с мнением человека выше, рациональнее всего сделать два меню, под мобильную и десткопную версию, практически нет добротных кейсов на 2е версии сразу

Comments

[Сергей Толкачев]

Но в таком случае будет как раз дублирование кода навигации в теле страницы. А этого хотел бы избежать.