Адаптивный хедер с изменением структуры элементов?

Question

[Элизабет Лоуренс]

Всем здравствуйте. У меня возникла задача, сделать хедер сайта адаптивным, но проблема в том, что в адаптиве сильно меняется структура элементов. Я начертила на картинке как есть на десктопе и как надо расположить элементы на версии для планшета. На данный момент я просто в коде скопировала блок с главным меню и отображаю его только на планшете, но беда в том, что в коде дважды одно и то же главное меню фигурирует и поисковые системы это не одобрят, а мне важно в поисковиках нормально сидеть. Можете предположить как бы вы решали эту задачу без дублирования кода?

Comments

[Rustam Bainazarov]

Либо делайте отдельную шапку, либо CSS Flexbox (в вашем случае потребует дублирования блока поиска), либо CSS Grid.

P. S. Сомневаюсь, что удастся поместить такое количество информации в мобильную шапку с учётом более чем живого разрешения 320 пикселей. Только если шрифт уменьшать сильно.

P. P. S. Это не та задача, что претендует на ярлык «сложная».

[Элизабет Лоуренс]

SmthTo, у меня на флексах, но так как лого занимает две строки, то там такая структура флексов, что ордерами не перенести поиск в строку с главным меню. О гридах думаю, но не знаю как сделать нормальное отображение, если пользователей зайдет с неподдерживаемого браузера. Отдельную шапку, тогда выйдет что код будет задублирован.

[Rustam Bainazarov]

Элизабет Лоуренс, как и написал выше, поиск, в случае с Flex'ом, нужно будет дублировать.

Grid можно приспособить и под IE11, если у вас, конечно, не заявлена поддержка более старых его версий.

Я обычно делаю отдельную шапку, чтобы не было геморроя со стилями, разметкой и пр. В конечном итоге, это проще получается для других разработчиков. Если этой потребности нет, то тогда не нужно дублировать. У вас структура достаточно простая. Не знаю, правда, что насчёт стилей.

[Rustam Bainazarov]

Элизабет Лоуренс, ну вообще, если не хотите Grid, можно сделать хаком: один контейнер, логотип на абсолютном позиционировании, отступ по размеру лого слева и отрицательный margin + увеличение ширины главного меню по размеру логотипа.

А для адаптивности уже расставляйте все элементы с помощью order. Придётся только высчитать размеры, LOL.

[Rustam Bainazarov]

Но вообще, делайте нормально — либо делайте на Grid, либо поиск дублируйте.

[Элизабет Лоуренс]

SmthTo, а вы случайно не можете подсказать литературу на тему адаптации грид для браузеров без поддержки? Я сама хотела бы гридами, так как это самый подходящий способ, но все же нужно как-то тогда и подстраховаться для старых браузеров.

[Rustam Bainazarov]

Элизабет Лоуренс, литературы нет.

Только опыт и страницы по типу:
https://ru.stackoverflow.com/questions/774842/grid...

Я вам советую просто скопировать блок поиска. У вас только один блок, это несколько строк CSS для управления. Стили селекторов блоков вообще можете объединить.

[Элизабет Лоуренс]

SmthTo, да, склоняюсь к этому сейчас. Дубль одного поиска не так критичен будет. Спасибо за ваши ответы.

[Rustam Bainazarov]

Элизабет Лоуренс, не за что!

Answer 1

[Виталий Инчин ☢]

Раньше код дублировали или js-магию воплощали :)
Но теперь есть фишки CSS: display: flex; и order:1;

Comments

[Rustam Bainazarov]

Структура не позволяет, как понимаю, этого сделать. У неё поиск и меню в разных родителях.

[Виталий Инчин ☢]

SmthTo, ну тут можно logo вынести из этой схемы (к примеру абсолютно спозиционировать). И останется четкий flex

[Rustam Bainazarov]

Виталий Инчин ☢, да-да, я так же написал :))

Но это как хак. Лучше либо дублировать блок поиска, либо на Grid.

[Виталий Инчин ☢]

SmthTo, гриды это дааа) но освоить труднее)

[Rustam Bainazarov]

Виталий Инчин ☢, да на самом деле даже проще, если бы не проблемы с IE11, но они тоже решаемы в 85% случаев. Но автор вопроса осилил Flex, поэтому не думаю, что будут проблемы с Grid.

P. S. Но я бы просто дублировал блок поиска на месте автора.

[Виталий Инчин ☢]

SmthTo, я бы тоже xD