Как реализовать адаптивное меню в моем случае?

Question

[Toster777]

У меня имеется следующий шаблон:

Это полная версия сайта. Обратите внимание на "Меню 1" и "Меню 2"
Меню 1 содержит ссылки на основные разделы сайта
Меню 2 содержит список из 13 категорий и находится с сайдбаре справа

А так выглядит адаптивный шаблон:


В адаптивном шаблоне Меню 1 переносится в раскрывающийся список при нажатии
а сайдбар смещается ниже блока с контентом, соответственно меню 2 в сайдбаре тоже.

Оба меню важны для самого сайта. Я хочу, чтобы в мобильной версии сайта и меню 1, и меню 2 раскрывались одним списком ниже логотипа. Как это реализовать?

Была идея продублировать меню 2 и засунуть в меню 1, скрыв это в полной версии, а в мобильной показать и прописать стили. Но это же дополнительные дубликаты для ссылок. Как на продвижении сайта это скажется?

Comments

[Сергей delphinpro]

Берем ждаваскрипт и делаем одно мобильное меню из двух.

[Александр Севиринов]

Берем bootstrap 4 и сортируем порядок вывода блоков

[Pavel Karinin]

Toster777, Вы представили довольно типичный макет, и приятно, что озабочены вопросами SEO с самого начала. Но есть два нюанса:

1. Если для сайта Меню-2 также важно как и Меню-1, то опускать его вниз не желательно ни для пользователя ни для SEO. Но, если это устраивает заказчика, то так тому и быть.
   
2. Планируется ли вы использовать какие-либо CSS-frameworks? Если да, то ответ на ваш вопрос будет во многом зависеть от того какой Framework вы выбрали. Если же вы хотите использовать только чистый HTML и CSS, то ответ на ваш вопрос будет другим.
   

Разумеется, можно сделать так, чтоб обойтись без дублирования контента Меню-1 и Меню-2, когда они представлены на разных устройствах и разных размерах экрана и достигается это средствами CSS с использованием media query.

[Pavel Karinin]

Toster777, Я не совсем понимаю почему это будет проблемно реализовать?
если у вас сайдбар в одном блоке с контентом, то вынесете его.
Конечно, вы можете продублировать контент меню и закрыть его <noindex>, но это в том случае, если вы не стремитесь к элегантным решениям или надо реально быстро все сделать.

Личный совет:
Если вам пока еще не достает опыта (это совершенно нормально), то сделайте пока так, как видите, но обязательно в свободное время сделайте "по-нормальному", чтоб знать как это делать и разбираться в этом до конца.

[Toster777]

Pavel Karinin, опыта у меня недостаточно, но я точно вижу, что это будет проблемно в моем макете.

Я нашел другое решение:
Через JS: $("#1").appendTo("#2");

Это перемещает один блок в другой. Далее уже через var mediaQuery реализую в мобильной версии. Это более простой способ на данный момент, чем полностью переделывать структуру сайта.

[Pavel Karinin]

Toster777, вам виднее, поскольку я не вижу разметки. Вы спросили мое мнение, я вам его дал, а решение остается за вами, так как только вы полностью владеете ситуацией.