Выравнивание меню по ширине страницы

Рассмотрим одну полезную фичу - выравнивание пунктов меню по ширине

Вперёд!
Флексбокс выравнивание
Выравнивание с помощью флексбоксов

Маленький но полезный хак

Небольшой воркхак про равномерное распределение элементов меню на всю ширину панели навигации, как вот примеры 4 и 5. Не раз сталкивался с такой задачей в последних работах.

Чтобы реализовать все удачно надо помнить одну маленькую особенность в text - align : justify, а именно то, что такой тип выравнивания НЕ РАБОТАЕТ при незаполненных на 100 % строчках. Если у нас несколько пунктов меню, то строка будет незаполненной и выравнивание будет по умолчанию по левому краю. Поэтому здесь есть определенный воркхак : создать псевдоэлемент после меню с пустым контентом, отображать его как инлайн - блок а также задать ширину 100 % и высоту 0. Посмотрим как это будет в коде, а также на примере. Кстати, вот статейка с хабра, где описаны различные виды горизонтальных меню и их реализации.

То что изображено на картинке выше — не относится к нашему коду, а служит лишь иллюстрацией желаемого результата

Вот такой нехитрый хтмл (без холиваров про меню с использованием списка или без оного, принцип один) :

    
<nav class="gradient_bg">
 <a href="#">About Us</a>
 <a href="#">Services</a>
 <a href="#">Products</a>
 <a href="#">Solutions</a>
</nav>        
		
Пример разметки

А вот и основные моменты в ЦСС, я специально не вписывал сюда детали, как шрифты, цвет и тд, все это есть в примере на джиесфидл, приведенном ниже

    
nav{
 width: 100%;
 text-align: justify;
 line-height: 0; /*сделано для того , чтобы пустая строка не влияла на высоту блока меню*/
}
 nav:after{
	content: '';
	width: 100%;
	height: 0;
	display: inline-block;
 }
 nav a{
	display: inline-block;  
 }        
		
Стили

Вот так будет выглядеть наше меню, кстати похожее есть в третьем задании по дивхаку )

Результат
Меню выровненное по ширине

Ну вот такая нехитрая штука, а много где выручает. Выравнивание по ширине не работает для незаполненых строк, так на всякий случай.


Поделиться в соцсетях

Понравился пост? — расскажите о нём своим друзьям