#crumbs ul li a { display : block ; float : left ; height : 50px ; background : #3498db ; text-align : center ; padding : 30px 40px 0 40px ; position : relative ; margin : 0 10px 0 0 ; font-size : 20px ; text-decoration : none ; color : #fff ; }

Изначальный код CSS задает каждому якорю элемента списка стиль аккуратного синего прямоугольника. Текст расположен в центре, и равные внутренние отступы добавлены со всех сторон. Для того, чтобы позиционировать абсолютно следующие элементы, этим элементам добавлено свойство position: relative;, чтобы те абсолютно спозиционированные элементы отображались относительно этого родительского элемента.

#crumbs ul li a:after { content : "" ; border-top : 40px solid red ; border-bottom : 40px solid red ; border-left : 40px solid blue ; position : absolute ; right : -40px ; top : 0 ; }

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

Border-top : 40px solid transparent ; border-bottom : 40px solid transparent ; border-left : 40px solid #3498db ;

Эффект границы с правильными значениями цвета создаст желаемый треугольник, который придаст «хлебным крошкам» популярную форму шеврона.

#crumbs ul li a:before { content : "" ; border-top : 40px solid transparent ; border-bottom : 40px solid transparent ; border-left : 40px solid #d4f2ff ; position : absolute ; left : 0 ; top : 0 ; }

Используя те же самые принципы, другая треугольная форма может быть применена к левой части «хлебной крошки». В этот раз задан такой же цвет границы, как и цвет фона, чтобы скрыть части голубого фонового цвета ссылки.

Padding : 30px 40px 0 80px ;

По мере добавления ссылок в HTML, последовательность «хлебных крошек» увеличивается, они разделены интересной формы шевронами, благодаря треугольному эффекту границ CSS и небольшому правому внешнему отступу.

#crumbs ul li:first-child a { border-top-left-radius: 10px ; border-bottom-left-radius: 10px ; } #crumbs ul li:first-child a:before { display : none ; } #crumbs ul li:last-child a { padding-right : 80px ; border-top-right-radius: 10px ; border-bottom-right-radius: 10px ; } #crumbs ul li:last-child a:after { display : none ; }

Полный блок «хлебных крошек» может быть далее стилизован путем удаления эффекта треугольника с первого и последнего элементов с помощью селекторов:first-child и:last-child , после чего можно придать небольшое скругление углам с помощью свойства border-radius.

#crumbs ul li a:hover { background : #fa5ba5 ; } #crumbs ul li a:hover :after { border-left-color : #fa5ba5 ; }

Все, что осталось, — применить к ссылкам эффект, возникающий при наведении указателя мыши. Не забудьте изменить значение свойства border-left-color для эффекта треугольника в состоянии, возникающем при наведении указателя мыши, чтобы вся «хлебная крошка» поменяла цвет.

Перевод — Дежурка

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

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

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

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

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 простых варианта оформления хлебных крошек, на основе которых вы можете сделать свой собственный.

На этом уроке познакомитесь с процессом создания в Bootstrap 3 и 4 навигационных цепочек («хлебных крошек»).

Разметка навигационных цепочек

Навигационные цепочки («хлебные крошки», breadcrumbs) - это схема навигации, которая показывает текущее положение пользователя на сайте. Они применяются для отображения иерархически-организованной информации. Например, в интернет-магазине "хлебные крошки" обычно представляют собой цепочки разделов. С их помощью пользователь может определить, в каком разделе он находится сейчас, а также они позволяют перейти на разделы более высоких уровней, т.е. предоставляют ещё одну возможность навигации по структуре сайта.

"Хлебные крошки" в Bootstrap – это обычный упорядоченный список с классом breadcrumbs . Разделитель элементов списка автоматически добавляется с помощью CSS (bootstrap.min.css) через следующий класс:

Breadcrumbs > li + li:before { color: #cccccc; content: "/"; padding: 0 5px; }

Пример создания "хлебных крошек" с помощью Bootstrap.

1. Главная

1. Главная
2. Процессоры

1. Главная
2. Процессоры
3. Intel

Ещё один пример:

1. Главная
2. 2013
3. Ноябрь

Не стандартный вариант оформления хлебных крошек

Рассмотрим пример создания следующего варианта оформления хлебных крошек:

Пример оформления хлебных крошек на сайте

Процесс создания хлебных крошек складывается из разработки HTML структуры и стилей (CSS).

CSS хлебных крошек:

/* хлебные крошки */ #breadcrumb { list-style: none; display: inline-block; padding-left: 0px; } #breadcrumb .icon { font-size: 14px; } #breadcrumb li { float: left; } #breadcrumb li a { color: #fff; display: block; background: #cc2eaa; text-decoration: none; position: relative; height: 34px; line-height: 34px; padding: 0 10px 0 5px; text-align: center; margin-right: 23px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #breadcrumb li:first-child a { padding-left: 15px; -moz-border-radius: 4px 0 0 4px; -webkit-border-radius: 4px; border-radius: 4px 0 0 4px; } #breadcrumb li:first-child a:before { border: none; } #breadcrumb li:last-child a { padding-right: 15px; -moz-border-radius: 0 4px 4px 0; -webkit-border-radius: 0; border-radius: 0 4px 4px 0; } #breadcrumb li:last-child a:after { border: none; } #breadcrumb li a:before, #breadcrumb li a:after { content: ""; position: absolute; top: 0; border: 0 solid #cc2eaa; border-width: 17px 10px; width: 0; height: 0; } #breadcrumb li a:before { left: -20px; border-left-color: transparent; } #breadcrumb li a:after { left: 100%; border-color: transparent; border-left-color: #cc2eaa; } #breadcrumb li a:hover { background-color: #a22587; } #breadcrumb li a:hover:before { border-color: #a22587; border-left-color: transparent; } #breadcrumb li a:hover:after { border-left-color: #a22587; } #breadcrumb li a:active { background-color: #a22587; } #breadcrumb li a:active:before { border-color: #a22587; border-left-color: transparent; } #breadcrumb li a:active:after { border-left-color: #a22587; } #breadcrumb li.current a { pointer-events: none; cursor: not-allowed; filter: alpha(opacity=65); -webkit-box-shadow: none; box-shadow: none; opacity: .65; }

Изменения цвета производится посредством редактирования значений соответствующих CSS свойств.

HTML разметка:

1. Главная
2. Комплектующие
3. Процессы
4. Intel

Веделение текущего элемента (если он будет использоваться в цепочке) осуществляется с помощью добавления к элементу li класса current .