Создание вертикальных разделителей в меню на CSS

Если вы реализуете вертикальное меню в одну строку, то, как правило, между пунктами добавляются специальные разделители (как показано на иллюстрации слева). Это позволяет визуально отделить несколько ссылок между собой. Обычно для этих целей используется вертикальная полоска, но могут встречаться и любые другие символы. В статье найдете 2 метода верстки, позволяющих легко и быстро сделать разделители в меню на CSS.

В обоих случаях подразумевается, что ваша навигация создана через конструкцию списка, то есть имеет плюс-минус такое вид:

<ul id="top-menu">
	<li class="menu-item>Пункт1</a></li>
	<li class="menu-item>Пункт2</a></li>
	<li class="menu-item>Пункт3</a></li>
</ul>

В данном случае не забывайте убрать отображение элемента списка (кружок, квадрат и т.п.):

ul#top-menu {
    list-style: none;
}

А также добавляйте всех вывод пунктов в один ряд:

ul#top-menu li {
    display: inline;
}

Последнюю фишку можно также сделать через float: left; (но тут все зависит от вашей верстки). Перейдем непосредственно к нашему заданию.

Вариант1

В первом примере будем использовать добавление границы (border) для элементов. Вставляете в стили следующую конструкцию:

#top-menu li {
	border-right: 1px solid #ffffff;
}
#top-menu li:last-child {
	border-right: none
}

Во второй части кода селектор :last-child позволяет задать стиль последнему пункту, для которого мы рамку справа убираем. Таким образом, разделители получаются только внутри менюшки.

Вариант2

Этот подход использует селектор ::after для добавления символа после объекта. В коде ниже используется вертикальная черточка «|», но вместо нее можете подставить любой другой символ. Это делает данный метод более гибким.

#top-menu li::after {
	content: "|";
	color: #fff;
}
#top-menu li:last-child::after {
	display: none;
}

Здесь тоже нужно добавить строку с last-child дабы скрыть ненужный разделитель в меню после последнего пункта.

Как видите, в данном случае полоски меньше, т.к. у нас используется символ, а не граница блока. Иногда приходится дополнительно подправить их местоположение по высоте с помощью padding.

Также учитывайте, что в ваших сайтах используются другие ID и Class для меню/пунктов, поэтому следует подставлять данный код с поправкой на это. Возможно, придется указать отступы влево/вправо для того чтобы вертикальная полоска располагалась по центру.