Как адаптивно сверстать два горизонтальных меню?

Question

[Дмитрий Спиридонов]

Всем доброго!

На сайте должно быть два горизонтальных меню:
- одно меню в самом верху
потом идёт длинная горизонтальная картинка
- и второе меню - ниже картинки
Это на больших экранах
А на маленьких нужно эти два меню свести в одно, мобильное, раскрывающееся.

Вот так должно быть на больших экранах:


А вот так - на маленьких:


Есть у кого-нибудь готовое решение, ссылка?

Comments

[Ankhena]

flex order

На мобильных меняете местами, блок с картинкой ставите ниже второго меню. Или наоборот, на десктопе картинку устанавливаете между меню.

Answer 1

[Beliyadm]

На JS соберите пункты меню (LI наверно) от первого и второго меню в отдельный объект и поместите в скрытое для десктопа мобильное меню
https://jsfiddle.net/beliyadm/d895fbhn/

Answer 2

[азаза]

https://ruseller.com/lessons.php?rub=2&id=1502

Comments

[Дмитрий Спиридонов]

Должно быть два отдельных меню, разделённых между собой картинкой
на маленьких экранах должно быть одно меню (в котором будут пункты из первого и второго меню), раскрывающееся по клику

[азаза]

Дмитрий Спиридонов,
регулируйте медиазапросами
одно скройте при определенном разрешении

Answer 3

[Александр Решетняк]

Ещё можно так https://codepen.io/AxeLVaisper/pen/Xyqjqr