Подковыристое меню через Flex?

Question

[Ярослав Иванов]

Здравствуйте!

Ссылка на код

Делаю mobile-first. Мобильное меню должно быть выпадающим и не влиять на поток (ну с этим вроде бы проблем нет).
Проблема заключается в том, что мне ну ооооочень не нравится как я подгоняю друг под друга через абсолют два независимых списка (menu--1 и menu--2). Конечно, в идеале было бы все меню обернуть в один блок, задать ему posa и показывать при клике на "гамбургер", но это, наверное, невозможно реализовать, потому что задача у меня изменять визуальный порядок списков и логотипа (через order) в зависимости от разрешения, т.е. логотип должен быть в ОДНОМ контейнере с этими списками.
Плодить еще одно меню просто для мобилки... Плодить логотип?! Ну как-то именно в этой ситуации не хочется лишние элементы. Кажется, что я что-то упускаю.

Вопрос к знатокам: как бы Вы вышли максимально красиво из этой ситуации? Спасибо! :)

Answer 1

[Сергей Горячев]

Перемудрил ты с абсолютом.
https://jsfiddle.net/bnjoyboq/

/***MOBILE***/
.header__nav {
  flex-direction: column;
}

Вообще, ты фигню какую-то сделал...
https://jsfiddle.net/bnjoyboq/1/
Для mobile - column, для tablet - row.

А вообще, тут нужен другой подход.
В этом варианте, разные по длине пункты меню будут сбивать логотип.
https://jsfiddle.net/bnjoyboq/2/

В общем, мне кажется, тут нужно как-то так.
https://jsfiddle.net/gxjy91du/

Comments

[Ярослав Иванов]

Я благодарю вас за попытку, Сергей, но не совсем понимаю ваших вариантов. У меня макет, которому я должен следовать. Вольности тут ни к чему.
Я прекрасно понимаю как работает fd: column, но как это решает мою проблему?! Различные меню находятся без обертки в одном контейнере с логотипом (для смены порядка вывода через order). Можно всему контейнеру, который содержит логотип и 2 менюшки, задать fd: column, но тогда это будет влиять на поток и сдвигать следующую секцию. Чтоб не влияло -- position: absolute, но тогда менюшки собьются в кучу как на моем примере.

[Сергей Горячев]

Игорь Яровой: И что тут непонятного? https://jsfiddle.net/gxjy91du/

[Сергей Горячев]

Игорь Яровой: собственно, все ваши хотелки реализованы. Просто код переписал немного. А структуру я не нарушал.