Друзья, я только начала изучать верстку, передо мной стоит задача сверстать вот такую шапку
Как это лучше сделать если на мобилке меню преобразуется в гамбургер?
Изначально я вообще всю шапку обернула в ul, потом решила разбить все на col (первые два пункта, лого, последние пункты ?а куда гамбургер?) , но выходит криво :D
Плохой вариант. Продублировать меню.
Еще хуже. При помощи js перемещать блок с логотипом по DOM дереву.
Нормальный. Сделать логотип относительно позиционированым. Вставить по центру, в мобильной версии делать статичным или просто изменить позицию.
Чем плох вариант с перемещением логотипа по дереву? мне в большинстве проектов из-за прихотей дизайнеров приходится подобное делать. Обычно не логотип, а какие-то куски меню или социалки, но все же. Чтоб знать на будущее. И почему дублировать меню это лучше, я наоборот стараюсь этого избегать, потому и решения на js
Антон Литвиненко, тут самый верх страницы, в определенных условиях будет выглядить стремно, пока не прогрузится js. А так ничего особенного, если не увлекаться. Частый перерендер довольно затратное действие. Поддерживать становится еще чуть сложнее. В данной задаче, дублирование будет лучше, но подобного стоит избегать вообще.
Makssof, увеличивается размер страницы, но в данном случае незначительный эффект. Сеошнику задолбаешься объяснять, что страница не попадет в спам, так как для разных устройств она не будет дублировать код.
Руководитель frontend направления, предприниматель
Можно сделать грид сетку для шапки, где будет 3 колонки (auto [ширина лого] auto), где навигация будет занимать с первой по последнюю колонку первой строки. А лого будет занимать вторую колонку. Схему же навигации повторить, чтобы образовалось негативное пространство под лого, где оно должно быть.
Скорее всего потребуется пошаманить с событиями мышки (это описывается на уровне CSS), снимая отлов событий с контейнеров элементов и присваивая их вложенным.
Простой
Средний
