Как правильно верстать меню?

Question

[Millerish]

Как правильно верстать такой элемент(т.е. какими свойствами)?



Задавать фиксированную ширину элементов нельзя, но и у каждого элемента разная ширина.

<nav>
				<a class="select" href="#">
					<i class="fa fa-bars" aria-hidden="true"></i>
                    <h2>КАТАЛОГ ТОВАРОВ</h2>
                    <i class="fa fa-angle-down displayIn767min" aria-hidden="true"></i>
				</a>
				<a href="#">
					<i class="fa fa-home" aria-hidden="true"></i>
                    <h2>УСЛОВИЯ РАБОТЫ</h2>
				</a>
				<a href="#">
					<i class="fa fa-search" aria-hidden="true"></i>
                    <h2>СКИДКИ</h2>
				</a>
				<a href="#">
					<i class="fa fa-shopping-cart" aria-hidden="true"></i>
                    <h2>ОПЛАТА И ДОСТАВКА</h2>
				</a>
				<a href="#">
					<i class="fa fa-user-plus" aria-hidden="true"></i>
                    <h2>ДОКУМЕНТЫ</h2>
				</a>
				<a href="#">
					<i class="fa fa-phone" aria-hidden="true"></i>
                    <h2>КОНТАКТЫ</h2>
				</a>
</nav>

Comments

[Андрей]

Чет я про меню подумал в целом, а про какой элемент речь? Про иконку в каждом пункте меню?
Через :before/:after и абсолютное позиционирование как вариант.

[Millerish]

нет, у каждого блока разный размер. При этом этот размер нельзя задавать фиксированным.

[Андрей]

Millerish: и чем это помешает абсолютному позиционированию?
Допустим:
a{position: relative}
a:before{position: absolute; top: 0; right: -5px}
Какой бы длины пункт меню не был, иконка будет на 5px выходить за предел пункта..

[Millerish]

Андрей Причем тут псевдоэлементы? Посмотрите внимательно, на картинке сетка, каждая ячейка имеет разный размер, но при этом выглядит адекватно.

[Андрей]

Millerish: Окей, я не угадал с иконками, если вопрос заключается в том, что как-то надо растянуть пункты меню на всю длину, то попробуй flexbox. контейнеру содержащему непосредственно пункты задать justify-content: space-between и они равномерно распределятся.

[Millerish]

piccy.info/view3/11451955/b8737c6285870d28d247562a...

Так уже пробовал, не оно. (((

[Андрей]

Millerish: «a» или где там у тебя текст white-space: nowrap Тогда в пунктах не будет переноса слов, но сдается мне ты впихиваешь невпихуемое)) И чего ты хочешь добиться не ясно)

[Millerish]

да делаю тестовое, написано пиксель в пиксель... хз как его пиксель в пиксель сверстать

[kulaeff]

Чет я так и не вкурил чо надо-то? Сверстать пиксель в пиксель? И в чем проблема? Каждый пункт меню разной ширины, но расстояние между ними, судя по скрину, одинаковое. Разве что первый пункт меню как-то особняком стоит.

[Millerish]

kulaeff так если так сделать, они не смогут использовать макет для CMS и т.д.

[vaux]

А можно нескромный вопрос? Почему текст элементов меню у вас оформлен как заголовки второго уровня?

Answer 1

[Егор Живагин]

Для меню

display: flex
justify-content: space-between

Остальное через отступы и привычные стили

Comments

[Millerish]

картинка

Так уже пробовал, не оно. (((

[Егор Живагин]

Millerish: по ссылке ничего не нахожу...

Может всё таки пример на codepen ?

[Millerish]

Егор Живагин: обновил ссылку

Answer 2

[Froggyweb]

Вот этот элемент - это второй уровень меню которого у тебя нет в принципе. Меню принято верстать через список. оберnка li достаточно удобна

Comments

[Millerish]

Froggyweb, в html5 есть тег для меню

[Андрей]

Millerish: ага, nav, а вот в него проще вложить неупорядоченный список, удобней меню второго уровня делать будет. Да и вообще, как сказали выше, обертка каждого элемента в li удобна.

[Froggyweb]

Millerish: Круто а где у тебя второй уровень который должен выпадать? ты его в ссылку будешь пихать?

[Millerish]

Froggyweb, до него еще дожить нужно. И вообще вопрос не в этом! Вопрос в том, что каждый li по вашему или по моему a имеет разную ширину, а располагается адекватно (не назализует на другие и нет свободного места).

Answer 3

[Николай Каргин]

— Выравнивание по горизонтали на ваш вкус, как уже написали.
— Выравнивание по высоте с помощью line-height.
— Отступы через padding + margin, либо только padding, чтобы по ссылочке было удобно попадать пальцем.

Comments

[Millerish]

Николай Каргин, как сделать разные элементы разной шири, как на макете(первый больше и т.д.)

[Николай Каргин]

За счёт padding, margin будет формироваться разная ширина.

[Millerish]

padding задавать индивидуально нельзя, потом макет не натянуть на CMS.

[Андрей]

Millerish: ну какая cms? ты меню сверстать не можешь. и вопрос корректно задать.

[Николай Каргин]

Millerish: padding задается на каждый элемент одинаковый. Почитайте про CSS селекторы.

[Millerish]

Что именно вам не понятно в этой фразе: "Задавать фиксированную ширину элементов нельзя, но и у каждого элемента разная ширина. " ? И рядом картинка с сеткой.

[Николай Каргин]

Millerish: а что вам непонятно в том, что ширина будет формироваться из динамической ширины текста + фиксированного отступа?