Как лучше сделать меню при уменьшении экрана?

Question

[Norum]

Посоветуйте, как лучше сделать меню при уменьшении экрана? Ведь уже при разрешении экрана до 1300px все начинает съезжать. Правильно ли будет уже при таком разрешении сделать меню гамбургер? Нужны советы

Весь код https://jsfiddle.net/2k6g7efw/

Answer 1

[tempick]

На мой взгляд, лучше будет вынести в подвал часть пунктов меню и оставить сверху только то, что понадобится клиенту в первую очередь. Например, "порядок работы", "этапы работы" и уж точно "новости" лучше вынести в футер. Оставьте действительно важные ссылки сверху - услуги, прайс, контакты. Остальное можно объединить и сделать лишь один пункт с выпадающим меню, например. Я не маркетолог, конечно, не скажу что именно куда выносить, но основной посыл - избавьтесь от лишнего в шапке.

Answer 2

[Алексей Дубровин]

Если есть возможность то лучше спросить у дизайнера.
Адаптив подразумевает корректное отображение на всех устройствах.

Правильно ли будет уже при таком разрешении сделать меню гамбургер?

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

1. Регулировка размеров отступа
   
2. Уменьшение размера шрифта
   
3. Скрытие элементов
   

Всё делается интуитивно. Что кажется лучше то и делается.
Думаешь что бургер будет смотреться нормально, почему нет.

Answer 3

[danilich44]

Гамбургер спасёт.

Comments

[Norum]

то есть его уместно делать при 1300px?

[danilich44]

Norum, нет желательно под мобилы 768px

[Norum]

так меню уже съезжается при 1000px, как тогда лучше поступить?

Answer 4

[Арсений Матыцин]

Нус, для начала нет смысла в ссылке «Главная», т.к. давно уже стало нормой делать ссылкой лого для этого функционала. Во-вторых пункты «Порядок работы» и «Этапы работы» мало того, что по своей сути являются дублирующим контентом, так еще и могут быть расположены прямо на главной странице, т.к. заводить под них отдельную ссылку не имеет смысла, а если это лендос, то могут быть перенесены в первый экран, а не в шапку.

Портфолио может быть заменено словом Кейсы, если, конечно, по содержанию это именно они, а не скриншотики проектов.

Все нужные контакты перечислены справа в шапке же, поэтому ссылка может располагаться в подвале или быть элементом выпадашки «О нас».

Итого:
1. Минус половина ненужной навигации.
2. Проблема плохого дизайна.

ЗЫ: Если же не в твоих силах сделать что-то с дизайном, то можно прибегнуть к выстраиванию навигации в 2 строки либо на медиазапросах экрана, либо плясать от медиазапроса контейнера. А на мобилке, конечно, прятать под бургер. Также можно прибегнуть к прокручиваемой области (как в приложениях часто делают).

Comments

[Norum]

это тестовое задание, поэтому мне не повлиять. А дизайн полная параша, согласен