Как при адаптиве объединить разные меню в одно?

Question

[Genri_Rus]

Вот пример структуры: ссылка

Как в мобильной версии объединить данные меню ?

spoiler

Возможно ли это сделать без использования js или с использованием и есть ли пример такой реализации ?
Заранее спасибо

Answer 1

[Алексей Илларионов]

У вас есть 2 варианта: грязный (простой) и чистый (сложный). JS не понадобится ни в одном из них.

1. Грязный (простой).
Просто дублируйте HTML второго меню в основном (если у вас не статичный html, то ничего сложного), через css media query его прячете для пк, для мобилок показываете, дописываете стили, чтобы все хорошо смотрелось.

2. Чистый (сложный).
Пишете с нуля всю вёрстку меню (и, скорее всего, даже верхних дивов) с учётом того, что это должно потом схлапываться в одно меню для мобилок. В этом варианте от верстальщика потребуется глубокое знание flex-модели, все эти flex-direction, flex-grow и т.д. Но технически это можно сделать.

Comments

[Genri_Rus]

Спасибо за ответ, а может вы видели похожие примеры таких меню ?

[Алексей Илларионов]

Genri_Rus, вообще да, но конкретных ссылок не припомню, к сожалению

[Сергей delphinpro]

Есть еще варик, но уже с js. Формировать мобильное меню скриптом из всех нужных.
Несколько раз использовал такой подход, даже плагинчик написал.

[Genri_Rus]

Сергей delphinpro, спасибо.
Правда в моем примере больше непонятно как меню в шапке объединить с меню в сайдбаре )

[Алексей Илларионов]

Genri_Rus, реализуйте первый вариант, там не должно быть сложностей. За 5к могу реализовать 2 вариант )

[Danny Arty]

а почему первый вариант грязный?

[Алексей Илларионов]

Danny Arty, дублирование кода редко можно назвать чистым решением )

[Danny Arty]

Алексей Илларионов, разве что для seo в некоторых случаях могло бы быть плохо, но в целом ничего в этом грязного не вижу

[Genri_Rus]

Алексей Илларионов, ))
Ну есть вариант с js или также считаете грязным вариантом ?

[Алексей Илларионов]

Genri_Rus, да ) это можно решить на чистой вёрстке, по идее, без дублирования html

[Genri_Rus]

Алексей Илларионов, чистая верстка это получается при перемещении блоков с помощью js ?

[Алексей Илларионов]

Genri_Rus, нет, это чистая вёрстка, без использования js )
С утра появилось время, вспомнил про вашу задачу, размял мозги )
https://codepen.io/illarionov_school/pen/YzeXPWJ
Решение без дублирования кода и без js (уменьшите размер экрана до мобилки, чтобы увидеть адаптив).

Но есть 2 ограничения:
1. Ширину .sidebar необходимо прописать явно (в пикселях или процентах - неважно).
2. Высоту .menu-primary надо тоже указать явно.

Точно знаю, что можно было бы сделать так, чтобы поддерживались произвольные размеры, но это уже перебор.

В остальном пользуйтесь )

[Genri_Rus]

Алексей Илларионов, доброе утро Алексей, спасибо вам большое и Божьих Благословений вам и вашим близким.
Может про вас оставить где-нибудь отзыв ?

spoiler

Напишите мне вк: https://vk.com/id354979644 или в вацап: https://wa.me/79094486096, я могу потом вас рекомендовать другим людям если что )

А такой небольшой вопрос, получается у меня на скриншоте при клике на стандарты раскрывается подменю и нужно абсолютом делать подменю ?

[Алексей Илларионов]

Genri_Rus, да нет, не стоит, можете просто кинуть ссылку на мой профиль ) раскрытие подменю тоже по-разному можно делать, но в вашем случае, кажется, нужна анимация высоты. Можете покопать в сторону анимации max-height https://stackoverflow.com/questions/3508605/how-ca... или написать на js

[Genri_Rus]

Алексей Илларионов, понял )
Просто у вас там идут 2 отдельных ul и получается нужно как-то во второй ul переместить первый ul, причем во-внутрь первого li.

С помощью js (я про перемещение во внутрь li) правильно будет такое сделать ?

[Алексей Илларионов]

Genri_Rus, да, в таком случае это будет оправдано