Онлайн заработок, создание и монетизация сайтов, веб-разработка, SEO и SMO продвижение, фриланс, партнерки, полезные сервисы вебмастерам, блоггинг.

Главная » Web разработка » Верстка » Вертикальные разделители в меню на CSS (2 метода решения)

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

разделители в меню на 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 для меню/пунктов, поэтому следует подставлять данный код с поправкой на это. Возможно, придется указать отступы влево/вправо для того чтобы вертикальная полоска располагалась по центру.

08.06.19

Категории: Верстка.

Теги: , , ,

1 Comment
  1. devarts

    Пора уже переходить на Флексы и Гриды. Технология мощнейшая.

Добавить комментарий

Ваш e-mail не публикуется. Обязательные поля помечены *
Если вы комментируете впервые, то текст будет отправлен на модерацию.