Как правильно сделать адаптивное раскрывающееся меню с логотипом по центру?

Question

[Genri_Rus]

Например есть такая верстка:

<a href="/" class="logo"><img src="logo.svg" alt="Логотип" class="logo__image"></a>
<nav class="menu-primary">
	<ul class="menu-primary__list">
		<li class="menu-primary__item"><a href="#" class="menu-primary__link">Пункт меню 1</a></li>
		<li class="menu-primary__item"><a href="#" class="menu-primary__link">Пункт меню 2</a></li>
		<li class="menu-primary__item"><a href="#" class="menu-primary__link">Пункт меню 3</a></li>
		<li class="menu-primary__item"><a href="#" class="menu-primary__link">Пункт меню 4</a></li>
		<li class="menu-primary__item"><a href="#" class="menu-primary__link">Пункт меню 5</a></li>
		<li class="menu-primary__item"><a href="#" class="menu-primary__link">Пункт меню 6</a></li>
	</ul>
</nav>

Как вообще можно сделать логотип по центру и в мобильной версии меню скрытым ?

раскрыть

Comments

[Ankhena]

Как вообще можно сделать логотип по центру

Прибить в центр гридами или абсолютами.

и в мобильной версии меню скрытым ?

Тут совсем не понятно, что у вас не получилось. Обычный display: none.

[Genri_Rus]

Ankhena, доброго времени суток.
Вот как пример сделал логотип абсолютом, но как тогда сделать отступы у меню?

[Ankhena]

Genri_Rus, любым удобным вам способом
- margin
- грид
- флекс
можно в сочетании с nth-child

[Genri_Rus]

Ankhena,

можно в сочетании с nth-child

Вот тоже думал на этот счет, но что-то не получается

[Genri_Rus]

Ankhena, а вы бы как сделали с использованием flex и nth-child?

[Ankhena]

Genri_Rus,

Вот тоже думал на этот счет, но что-то не получается

Да прекрасно всё получается.

Если предполагается, что элементов может быть больше, то номера нужно указывать через n.
6n - 3 типа того

Также нужно подумать, если в доп строке будет 4 элемента, то куда он должен попасть. Под 6ой или под 4.
Если под 6ой, то margin-left auto только у 4 элемента в строке.

[Genri_Rus]

Ankhena, а могли бы как-то показать на примере и я бы ваш ответ отметил?

[Ankhena]

Genri_Rus, что именно написать на примере
:nth-child(6n-2) {margin-left: auto}?
Или display: flex?

Как-то вы меня смутили... там и писать-то больше нечего

[Genri_Rus]

Ankhena, просто с nth-child не совсем понятно

Допустим если нужно отступ между логотипом другой сделать ?

[Ankhena]

Genri_Rus, флекс-то где?
Для инлайн-блоков margin auto не сработает.

Допустим если нужно отступ между логотипом другой сделать ?

Если вам нужно четко в px, то ради бога.
Собственно вопрос переполнения такого меню это скорее вопрос к дизайнеру.

[Genri_Rus]

Ankhena, ну вот тут как поступить?

Допустим если между логотипом нужно чтобы 40px было ?

[Ankhena]

Genri_Rus,
Можно:
- Посчитать ширину пунктов меню и отступы между ними.
- Задать justify-content: center при равных значениях ширины для li и этот ваш фикс отступ в (ширина лого + 2х40px) 4му элементу.
- Равномерно распределить гридами, задав средней ячейке ширину логотипа. Если отступы между li и вокруг лого разные, то учитывать это при создании центральной ячейки

Что-то типа
repeat(3, 1fr) ширина-лого repeat(3, 1fr)
и gap

[Genri_Rus]

Ankhena, просто если пунктов меню будет 10, то все равно меню на логотип наезжает

[Ankhena]

Genri_Rus, https://codepen.io/AnnaSummer/pen/MWGRzRN

[Genri_Rus]

Ankhena, спасибо, а вот на флексах это как бы выглядело?

Просто мне понятнее на flex с использованием nth-child.

[Ankhena]

Genri_Rus, выглядело бы также
width calc((100% - 40*6 - лого)/6)
и margin-left auto для 6n-2

[Genri_Rus]

Ankhena,

.menu-primary__list {width calc((100% - 40px*6)/6)}

Получается тут нужно вот так?

[Genri_Rus]

Ankhena, похоже что я опять делаю что-то не так

Допустим если отступы между меню по 20px, а между логотипом по 40px?

[Ankhena]

Genri_Rus,
Всего 100%
Отступы между пунктами 20
Всего их 4
Ещё 2 отступа по 40
И какая-то там ширина логотипа.

Вычислите ширину пункта, если их 6?

[Ankhena]

Genri_Rus, в песочнице у вас два минуса перед шириной лого

[Genri_Rus]

Ankhena, доброго времени суток.

Только что понял, что из-за ширины все равно отступы не получится сделать, т.к. везде ширина одинаковая.
Вот про это я имел ввиду:

показать

Мне нужно, чтобы пункты меню были прилеплены к логотипу
При использовании margin-left: auto они наоборот разъезжаются:

показать

[Genri_Rus]

Ankhena,

в песочнице у вас два минуса перед шириной лого

Почему-то все равно такая же проблема

[Ankhena]

Genri_Rus, у вас в макете разные расстояния между крайними буквами ссылок.
Можно попытаться вычислить ширину и/или отступы.
Имея на руках макет это сделать легче, особенно если он в фигме, а дизайнер немножко в своем уме.
Вы можете хоть фикс значения ширины поставить, можно в vw, чтобы это немножко адаптировалось.

[Ankhena]

Genri_Rus, так как вы вырезали кусок макета, так там даже лого не по центру.

[Genri_Rus]

Ankhena,

так как вы вырезали кусок макета, так там даже лого не по центру.

Вот тут нормально?

[Genri_Rus]

Ankhena, а смогли на флексах показать пример, я ваш ответ отметил бы?)

Я вроде ранее ваши ответы отмечал.

[Ankhena]

Genri_Rus, https://codepen.io/AnnaSummer/pen/MWGRzRN

[Genri_Rus]

Ankhena, спасибо большое.

А margin в item'ах можно ли использовать вместо.list{column-gap}?
Или такой вариант нельзя сделать?

[Ankhena]

Genri_Rus, как вам удобнее

[Genri_Rus]

Ankhena, мне нужно вот так

spoiler

Пытался ограничить ширину и задать margin-left отступы, но все равно не получается ((

[Ankhena]

Genri_Rus, тут у дизайнера заметные проблемы с симметрией.

Я вижу два глобальных варианта:
1. Изменить разметку. (Разбить на два списка)
2. js

Смесь этих вариантов: включить лого в список и js.

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

[Genri_Rus]

Ankhena,

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

Доброго времени суток, извиняюсь за потраченное время.

1. Изменить разметку. (Разбить на два списка)

Вот изначально так делал, я вам тогда покажу свою реализацию, просто не совсем понятно как потом меню прятать в мобильной версии.

[Ankhena]

Genri_Rus, погуглите про display contents

[Genri_Rus]

Ankhena, все дело в том, что он на старых браузерах не поддерживается.

Моя реализация
Правильно ли так сделать?

[Ankhena]

Genri_Rus,

Правильно ли так сделать?

Нет, потому что лого будут по центру только при раной ширине пунктов меню.

Вам нужен либо грид либо задавать ширину спискам (через calc и всё время помнить ширину логотипа либо на js).

И я бы в коде сначала разместила лого, а потом менюшки.
Просто потому что мне кажется, что на слух будет странно, если сначала пойдет меню, потом пенёк-логотип, потом снова меню.

[Genri_Rus]

Ankhena,

Просто потому что мне кажется, что на слух будет странно, если сначала пойдет меню, потом пенёк-логотип, потом снова меню.

Доброго времени суток, а если дизайнер хочет логотип по середине?

[Антон Литвиненко]

Genri_Rus, она имела в виду, что в разметке должен сначала идти логотип, а потом два меню..
я за вами слежу...

[Ankhena]

Антон Литвиненко, да, Антон, спасибо, всё верно :)
Genri_Rus, в разметке в начале, потом order.

[Genri_Rus]

Ankhena, а как быть с мобильной версией?
Задавать position: fixed обоим меню?

[Genri_Rus]

Ankhena,

Я вижу два глобальных варианта:
1. Изменить разметку. (Разбить на два списка)
2. js

А как вам такой вариант?)

[Ankhena]

Genri_Rus,

А как вам такой вариант?)

Поставьте в него реальные тексты и узнаете.
И он ничем глобально не отличается от предыдущего, где лого было внутри nav и потом один список.

Задавать position: fixed обоим меню?

Я даже не знаю, что в макете.
Может, всему nav. Или гридом, а не fixed. Или скрыть всё и показывать только меню. Или ещё как-нибудь.
Просто так, без макета, я могу вам тут нафантазировать кучу вариантов. Только этот вопрос уже превращается в мою домашнюю работу.

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

[Genri_Rus]

Ankhena,

Поставьте в него реальные тексты и узнаете.

Смотрел это видео

Вам нужен ИЕ, если правильно понимаю ваши страдания?

Да все верно.

[Ankhena]

Genri_Rus, тут геометрия с арифметикой,а не верстка

[Genri_Rus]

Ankhena, ну допустим в макете так или тут отличается?

spoiler

[Ankhena]

Genri_Rus, по-моему, вы пошли по кругу.

Вам нужно, чтобы пункты + отступы слева и справа были равны. Любым способом. Я уже рассказала разные. Выберите наиболее приятный и сделайте.

ну допустим в макете так или тут отличается?

Кто от кого отличается?

[Genri_Rus]

Ankhena,

Кто от кого отличается?

Ну по примеру этого видео
Я же могу так сделать в своем макете?

spoiler

[Антон Литвиненко]

Genri_Rus, Друг, я не знаю откуда у Ankhena столько терпения, но мне кажется ты ее немного достал уже с этим меню.
Смотри Андриканича, он херни не скажет

[Ankhena]

Genri_Rus, мне не очень хочется смотреть видео.
Если его решение вас устраивает, возьмите и сделайте.

[Genri_Rus]

Антон Литвиненко, ну так ваш пример показали бы и я отметил.
Ankhena, спасибо за помощь. Просто мне хотелось узнать ваше мнение ツ.

[Антон Литвиненко]

Genri_Rus, я последний раз в такой ситуации использовал два меню

[Genri_Rus]

Антон Литвиненко, а как потом сделали меню для мобильной версии?
Имеется ввиду про его скрытие/показ?

[Антон Литвиненко]

Genri_Rus,

nav
  ul
  ul
/nav

Answer 1

[Олег]

@media only screen and (max-width: 768px) {

  .logo{
   display:none;
  }
}

Comments

[Genri_Rus]

Логотип в мобильной версии тоже должен быть