Как оформить в css хлебные крошки?

Опубликовано: 11.07.2017

Приветствую вас. Хлебные крошки — это достаточно полезный блок на любом сайте, потому что он позволяет вам видеть полный путь к странице, на которой вы сейчас. И сегодня я вам расскажу, как оформить в css хлебные крошки? Не создать, а именно оформить. Вообще вариантов много, я затрону два.

Простой вариант оформления — без картинки

HTml-код имитирует хлебные крошки. Пусть он будет таким:

<a href = "#">Главная</a>

<a href = "#">Рубрика</a>

<a href = "#">Страница</a>

</nav>

Обычно между ссылками в хлебных крошках делают какие-то разделители, давайте сделаем такой:

Джедай вёрстки #7. Часть 15: Вёрстка футера, создание прелоадера и кнопки «Наверх»

В принципе, можно просто проставить угловую скобку, но тогда не будет возможности управлять толщиной линии. Я предлагаю сделать по-другому, с помощью трансформаций. Вот такой код это сделает:
Создание сайта | Урок #8 - Пишем футер для сайта

.cumbs1 a:not(:last-child):after{ content: ''; display: inline-block; width: 5px; height: 5px; border-top: 2px solid black; border-right: 2px solid black; transform: rotate(45deg); margin-left: 5px } .cumbs1 a:hover{ color: orange; }

Возможно, для вас это будут сложноватые селекторы, тогда ознакомьтесь с этой статьей . Суть такова: с помощью псевдоэлемента (о том, что это и как использовать — здесь ) after добавляет в конец каждой ссылки наш разделитель. Он формируется с помощью двух рамок и поворота на 45 градусов. Также добавляем оранжевый цвет ссылкам по наведению. Вот, в принципе, и все оформление.

Другой вариант оформления — с картинкой

В этом случае хлебные крошки будут выглядеть интереснее, вот так:

Для этого нам понадобится картинка и немного стилей в css:

.cumbs2{ background: orange; max-width: 250px; } .cumbs2 a{ display: inline-block; padding: 7px 0; color: #000; } .cumbs2 a:not(:last-child){ background: url(arrow.png) no-repeat 100% 50%; padding-right: 33px; }

Html код я не привожу, потому что он такой же, как в первом случае. С чего тут начать? Во-первых, определяем фоновый цвет и размеры всего блока с хлебными крошками. Далее устанавливаем общие стили для ссылок — блочно-строчный тип, отступы сверху и внизу и цвет.

Следующий этап самый интересный — с помощью псевдокласса not выбираем все ссылки в блоке, кроме последней, и ставим для них фоновое изображение arrow.png, без повторения, с позицией фона посередине по высоте и в самом конце по ширине одной ссылки. Внутренний отступ справа первым двум ссылкам нужен как раз для того, чтобы разместить там картинку. Если бы его не было, картинка бы наезжала на текст.

Как работает псевдокласс not, я думаю, вы уже догадались — он выбирает все элементы, кроме того, что указывается в скобках. Если что, в будущем я напишу еще небольшую заметку о работе с псевдоклассом :not, где все будет более понятно. Что ж, вот такие 2 простых варианта оформления хлебных крошек, на основе которых вы можете сделать свой собственный.