Благодаря развитию CSS и CSS3 за последние годы, мы достигли момента, когда многие старые программные решения, включающие фоновые изображения, теперь могут быть созданы полностью на CSS. В этом уроке мы рассмотрим создание последовательности ссылок навигации, называемой «хлебными крошками», в плоском стиле, без необходимости в ранее популярном методе работы с фоновым изображением, называемом методом «раздвижных дверей».
«Хлебные крошки», которые мы создадим, стилизованы в форме шевронов, чтобы визуализировать идею структурированного содержимого. Раньше мы бы использовали фоновое изображение в формате PNG, чтобы создать эту форму шеврона, а теперь с помощью хитрой техники границ можно создать такой же эффект, используя только CSS.
Мы начнем с создания ссылок навигации «хлебных крошек» как ненумерованного списка. Каждая «хлебная крошка» будет элементом
с установленным элементом якоря.
![](https://i1.wp.com/dejurka.ru/wp-content/uploads/2014/03/111-590x393.jpg)
#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;, чтобы те абсолютно спозиционированные элементы отображались относительно этого родительского элемента.
![](https://i0.wp.com/dejurka.ru/wp-content/uploads/2014/03/210-590x393.jpg)
#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, так что как Вы можете видеть в предыдущем изображении, голубой треугольник может быть создан, применяя границы верха и низа, чтобы пересечь область накрывания. Эти границы окрашены красным для наглядности, но если они будут прозрачными, то получится голубой треугольник. Этот эффект границы потом передвигается на свое место с помощью абсолютного позиционирования.
![](https://i2.wp.com/dejurka.ru/wp-content/uploads/2014/03/310-590x393.jpg)
Border-top
: 40px
solid
transparent
;
border-bottom
: 40px
solid
transparent
;
border-left
: 40px
solid
#3498db
;
Эффект границы с правильными значениями цвета создаст желаемый треугольник, который придаст «хлебным крошкам» популярную форму шеврона.
![](https://i0.wp.com/dejurka.ru/wp-content/uploads/2014/03/410-590x393.jpg)
#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
;
}
Используя те же самые принципы, другая треугольная форма может быть применена к левой части «хлебной крошки». В этот раз задан такой же цвет границы, как и цвет фона, чтобы скрыть части голубого фонового цвета ссылки.
![](https://i1.wp.com/dejurka.ru/wp-content/uploads/2014/03/52-590x393.jpg)
Padding
: 30px
40px
0
80px
;
![](https://i1.wp.com/dejurka.ru/wp-content/uploads/2014/03/61-590x366.jpg)
По мере добавления ссылок в HTML, последовательность «хлебных крошек» увеличивается, они разделены интересной формы шевронами, благодаря треугольному эффекту границ CSS и небольшому правому внешнему отступу.
![](https://i2.wp.com/dejurka.ru/wp-content/uploads/2014/03/71-590x376.jpg)
#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.
![](https://i1.wp.com/dejurka.ru/wp-content/uploads/2014/03/81-590x358.jpg)
#crumbs
ul li a:hover
{
background
: #fa5ba5
;
}
#crumbs
ul li a:hover
:after
{
border-left-color
: #fa5ba5
;
}
Все, что осталось, — применить к ссылкам эффект, возникающий при наведении указателя мыши. Не забудьте изменить значение свойства border-left-color для эффекта треугольника в состоянии, возникающем при наведении указателя мыши, чтобы вся «хлебная крошка» поменяла цвет.
Перевод — Дежурка
Здравствуйте, дорогие читатели . В этот день мы будем учиться создавать красивые хлебные крошки (breadcrumbs) для обычных сайтов, а так же для блогов WordPress
. Я советую не пропускать этот момент, потому что крошки показывают путь к Вашей статье или информации на сайте, что существенно облегчит навигацию по сайту, а так же это ещё и дополнительные внутренние ссылки.
CSS
ul{
margin: 0;
padding: 0;
list-style: none;
}
Всё, первый не маловажный шаг сделали. А сейчас давайте всё таки добавим красивый вид нашим крошкам.
Первый пример
Сам вид элемента будет состоять из трёх частей, которые соединены в одну целую часть. Чтобы было понятнее смотрите рисунок ниже:
![](https://i2.wp.com/beloweb.ru/wp-content/uploads/2012/02/social-icons-6802.png)
#breadcrumbs-one{
background: #eee;
border-width: 1px;
border-style: solid;
border-color: #f5f5f5 #e5e5e5 #ccc;
border-radius: 5px;
box-shadow: 0 0 2px rgba(0,0,0,.2);
overflow: hidden;
width: 100%;
}
#breadcrumbs-one li{
float: left;
}
#breadcrumbs-one a{
padding: .7em 1em .7em 2em;
float: left;
text-decoration: none;
color: #444;
position: relative;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
background-color: #ddd;
background-image: linear-gradient(to right, #f5f5f5, #ddd);
}
#breadcrumbs-one li:first-child a{
padding-left: 1em;
border-radius: 5px 0 0 5px;
}
#breadcrumbs-one a:hover{
background: #fff;
}
#breadcrumbs-one a::after,
#breadcrumbs-one a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
border-left: 1em solid;
right: -1em;
}
#breadcrumbs-one a::after{
z-index: 2;
border-left-color: #ddd;
}
#breadcrumbs-one a::before{
border-left-color: #ccc;
right: -1.1em;
z-index: 1;
}
#breadcrumbs-one a:hover::after{
border-left-color: #fff;
}
#breadcrumbs-one .current,
#breadcrumbs-one .current:hover{
font-weight: bold;
background: none;
}
#breadcrumbs-one .current::after,
#breadcrumbs-one .current::before{
content: normal;
}
Второй пример
Тут как и в первом примере, элемент состоит из трёх частей, которые соеденяются в одну часть с помощью CSS.
![](https://i2.wp.com/beloweb.ru/wp-content/uploads/2012/02/social-icons-6803.png)
#breadcrumbs-two{
overflow: hidden;
width: 100%;
}
#breadcrumbs-two li{
float: left;
margin: 0 .5em 0 1em;
}
#breadcrumbs-two a{
background: #ddd;
padding: .7em 1em;
float: left;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
position: relative;
}
#breadcrumbs-two a:hover{
background: #99db76;
}
#breadcrumbs-two a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-width: 1.5em 0 1.5em 1em;
border-style: solid;
border-color: #ddd #ddd #ddd transparent;
left: -1em;
}
#breadcrumbs-two a:hover::before{
border-color: #99db76 #99db76 #99db76 transparent;
}
#breadcrumbs-two a::after{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
border-left: 1em solid #ddd;
right: -1em;
}
#breadcrumbs-two a:hover::after{
border-left-color: #99db76;
}
#breadcrumbs-two .current,
#breadcrumbs-two .current:hover{
font-weight: bold;
background: none;
}
#breadcrumbs-two .current::after,
#breadcrumbs-two .current::before{
content: normal;
}
Третий пример
В третьем предмете элементы состоят из двух частей.
![](https://i2.wp.com/beloweb.ru/wp-content/uploads/2012/02/social-icons-6804.png)
#breadcrumbs-three{
overflow: hidden;
width: 100%;
}
#breadcrumbs-three li{
float: left;
margin: 0 2em 0 0;
}
#breadcrumbs-three a{
padding: .7em 1em .7em 2em;
float: left;
text-decoration: none;
color: #444;
background: #ddd;
position: relative;
z-index: 1;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
border-radius: .4em 0 0 .4em;
}
#breadcrumbs-three a:hover{
background: #abe0ef;
}
#breadcrumbs-three a::after{
background: #ddd;
content: "";
height: 2.5em;
margin-top: -1.25em;
position: absolute;
right: -1em;
top: 50%;
width: 2.5em;
z-index: -1;
transform: rotate(45deg);
border-radius: .4em;
}
#breadcrumbs-three a:hover::after{
background: #abe0ef;
}
#breadcrumbs-three .current,
#breadcrumbs-three .current:hover{
font-weight: bold;
background: none;
}
#breadcrumbs-three .current::after{
content: normal;
}
Четвёртый пример
![](https://i1.wp.com/beloweb.ru/wp-content/uploads/2012/02/social-icons-6805.png)
#breadcrumbs-four{
overflow: hidden;
width: 100%;
}
#breadcrumbs-four li{
float: left;
margin: 0 .5em 0 1em;
}
#breadcrumbs-four a{
background: #ddd;
padding: .7em 1em;
float: left;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
position: relative;
}
#breadcrumbs-four a:hover{
background: #efc9ab;
}
#breadcrumbs-four a::before,
#breadcrumbs-four a::after{
content:"";
position:absolute;
top: 0;
bottom: 0;
width: 1em;
background: #ddd;
transform: skew(-10deg);
}
#breadcrumbs-four a::before{
left: -.5em;
border-radius: 5px 0 0 5px;
}
#breadcrumbs-four a:hover::before{
background: #efc9ab;
}
#breadcrumbs-four a::after{
right: -.5em;
border-radius: 0 5px 5px 0;
}
#breadcrumbs-four a:hover::after{
background: #efc9ab;
}
#breadcrumbs-four .current,
#breadcrumbs-four .current:hover{
font-weight: bold;
background: none;
}
#breadcrumbs-four .current::after,
#breadcrumbs-four .current::before{
content: normal;
}
Пример
Вот и всё, я считаю, что очень стильные и одновременно простые крошки. Тем более нет никаких изображений, соответственно быстрее загружаются.
Во всех примерах в стилях используется тег hover
, который меняет цвет элемента при , так же если Вам не нравится не один из представленных цветов, Вы с лёгкость сможете заменить его на свой.
Теперь пришло время перейти к второй части, а именно, будем прикреплять один из примеров на свой блог WordPress, поехали.
Часть 2. Как прикрепить данные хлебные крошки на блог WordPress
И так, для начала нам нужно скачать плагин Breadcrumb NavXT,
скачать его Вы сможете . После того как плагин будет скачан и активирован, нужно будет произвести некоторые настройки:
Настройки находятся в параметрах. Во вкладке General
нужно найти строчку Breadcrumb Separator
и удалить стандартное значение, которое там стоит, другими словами, нужно оставить поле пустым.
![](https://i1.wp.com/beloweb.ru/wp-content/uploads/2012/02/Bezyimyannyiy89.jpg)
![](https://i0.wp.com/beloweb.ru/wp-content/uploads/2012/02/Bezyimyannyiy90.jpg)
Всё, с плагином закончили, теперь нужно выбрать то оформление, которое Вам больше всего понравилось. В данном случае на примере будет вот этот стиль:
![](https://i2.wp.com/beloweb.ru/wp-content/uploads/2012/02/social-icons-6803.png)
Это второй пример
, который находится выше в статье.
Берём и просто копируем данные стили, а затем добавляем их в style.css
Вашей темы, в любое место, которое больше всего Вам понравится, советую выделить начало и конец стилей крошек, потому что если в будущем захочется что либо там изменить, запутаетесь.
Теперь нужно хлебные крошки добавить непосредственно на блог.
В админке блога находим внешний вид
, затем редактор
, и выбираем single.php
. Далее добавьте следующее:
Важно
Обратите внимание, что сама функция вызова крошек стоит между тегами
id которых breadcrumbs-two
, не забудьте поменять данный id на пример который добавили в стили. Например, если это первый пример (который выше) тогда должно быть так: и так далее. (Извиняюсь за ребус) :-)
Если у Вас шаблон на блоге похож на мой, в том смысле, что бэкграунд серый а сам блок с контентом белый, крошки лучше всего ставить над блоком, как у меня. Потому что они могут перенестись на новую строку если название слишком длинное и, поверьте, это не очень красиво. :-)
Вот и всё. Дорогие друзья, если возникнут какие то трудности обязательно спрашивайте в комментариях
. До скорых встреч.
В предыдущей статье “Навигация breadcrumbs с помощью треугольников на CSS” описывался способ создания меню с помощью чистого CSS, без использования графики.
Метод всем хорош, за исключением одного - поддержка такого меню в старых браузерах сомнительна. Но при переводе этой статьи упоминалась ссылка на способ создания навигации с помощью графики.
Статья написана достаточно давно, но метод абсолютно рабочий. Автор статьи Veerle Pieters, а сам пост называется “Simple scalable CSS based breadcrumbs”. Ниже привожу даже не вольный его перевод, а вольный пересказ.
Несколько дней назад у меня стояла задача создать навигационное меню в стиле “хлебные крошки” (breadcrumbs) для сайта, над которым я работал. Я не думаю, что такое меню необходимо для каждого сайта, но в некоторых случаях оно очень полезно и практично.
Однако этот пример является как бы основой, которую можно расширять и применять на практике. Меню будет создаваться при помощи обычного маркированного списка
.
Но сначала посмотрим на образец, с которым будем работать:
Меню достаточно простое, как и код, с помощью которого мы будем его создавать.
HTML код - маркированный список ul
Все пункты меню имеют ссылки, кроме последнего - “The page you are on right now” (Страница, на которой вы сейчас находитесь). При работе над меню я задавался вопросом - является ли список наиболее подходящей структурой для создания меню? Я полагаю, что применение списка в этом случае не является строгим правилом, но мне кажется - это наиболее семантичный и правильный вариант.
CSS код - создаем стили для меню
Задаем общие стили для меню - убираем маркеры и обнуляем отступы в браузерах Firefox, IE:
делаем плавающими через свойство равное высоте всего меню - . И задаем цвет текста . Далее помещаем для ссылки фоновое изображение, вырезанное из макета. Для этого нужно вырезать только саму “стрелку”:
… которую “задвигаем” вправо (100%) и размещаем точно по вертикали (50%). Также делаем у ссылки отступ справа
, в котором будет как раз и находиться фоновое изображение (вырезанная стрелка):
.crumbs
li
a
{
display
:
block
;
padding
:
0
15px
0
0
;
background
:
url(img/crumbs.gif)
100%
50%
no-repeat
;
}
Уже практически все сделано. Осталось задать стили для текста ссылок. Уберем стандартное подчеркивание и изменим ее цвет:
.crumbs
li
a
:link
,
.crumbs
li
a
:visited
{
text-decoration
:
none
;
color
:
#777
;
}
и
. При наведении курсора мыши или получения фокуса с клавиатуры цвет текста ссылки будет меняться:
.crumbs
li
a
:hover
,
.crumbs
li
a
:focus
{
color
:
#dd2c0d
;
}
Результат нашей работы представлен здесь:
Примечание переводчика:
Автор статьи максимально упростил пример и сам код соответственно, насколько я понимаю. Дело в том, что на примере хорошо виден линейный горизонтальный градиент для каждого из пунктов меню. Однако в коде это никак отображено не было. Ну, не беда - разве это проблема создать линейный градиент на CSS3? Сама задача ведь выполнена!
Навигация в виде "хлебных крошек" помогает посетителям сайта ориентироваться в иерархической структуре документов и находить путь на верхний уровень. Поэтому, если на сайте размешается большое количество документов, то его надо снабдить "хлебными крошками". В данном уроке будет представлен CSS код для создания различных вариантов дизайна такого нужного навигационного инструмента.
Разметка HTML
Разметка проста и минимальна. Она основана на неупорядоченном списке.
CSS
Для начала сделаем небольшой сброс CSS для нашего неупорядоченного списка:
Ul{
margin: 0;
padding: 0;
list-style: none;
}
Для дизайна наших "хлебных крошек" будут использоваться псевдо-элементы.
Первый пример
В данном примере используется очень простая техника . Создается треугольник на рамке справа с помощью псевдо-элементов, размещаемых один над другим. Темный треугольник смещается, чтобы создать эффект рамки.
![](https://i0.wp.com/ruseller.com/lessons/les1365/img_2.jpg)
#breadcrumbs-one{
background: #eee;
border-width: 1px;
border-style: solid;
border-color: #f5f5f5 #e5e5e5 #ccc;
border-radius: 5px;
box-shadow: 0 0 2px rgba(0,0,0,.2);
overflow: hidden;
width: 100%;
}
#breadcrumbs-one li{
float: left;
}
#breadcrumbs-one a{
padding: .7em 1em .7em 2em;
float: left;
text-decoration: none;
color: #444;
position: relative;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
background-color: #ddd;
background-image: linear-gradient(to right, #f5f5f5, #ddd);
}
#breadcrumbs-one li:first-child a{
padding-left: 1em;
border-radius: 5px 0 0 5px;
}
#breadcrumbs-one a:hover{
background: #fff;
}
#breadcrumbs-one a::after,
#breadcrumbs-one a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
border-left: 1em solid;
right: -1em;
}
#breadcrumbs-one a::after{
z-index: 2;
border-left-color: #ddd;
}
#breadcrumbs-one a::before{
border-left-color: #ccc;
right: -1.1em;
z-index: 1;
}
#breadcrumbs-one a:hover::after{
border-left-color: #fff;
}
#breadcrumbs-one .current,
#breadcrumbs-one .current:hover{
font-weight: bold;
background: none;
}
#breadcrumbs-one .current::after,
#breadcrumbs-one .current::before{
content: normal;
}
Формы CSS строятся с помощью псевдо-элементов, размещаемых перед и после элемента.
![](https://i2.wp.com/ruseller.com/lessons/les1365/img_3.jpg)
#breadcrumbs-two{
overflow: hidden;
width: 100%;
}
#breadcrumbs-two li{
float: left;
margin: 0 .5em 0 1em;
}
#breadcrumbs-two a{
background: #ddd;
padding: .7em 1em;
float: left;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
position: relative;
}
#breadcrumbs-two a:hover{
background: #99db76;
}
#breadcrumbs-two a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-width: 1.5em 0 1.5em 1em;
border-style: solid;
border-color: #ddd #ddd #ddd transparent;
left: -1em;
}
#breadcrumbs-two a:hover::before{
border-color: #99db76 #99db76 #99db76 transparent;
}
#breadcrumbs-two a::after{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
border-left: 1em solid #ddd;
right: -1em;
}
#breadcrumbs-two a:hover::after{
border-left-color: #99db76;
}
#breadcrumbs-two .current,
#breadcrumbs-two .current:hover{
font-weight: bold;
background: none;
}
#breadcrumbs-two .current::after,
#breadcrumbs-two .current::before{
content: normal;
}
С помощью свойства border-radius скругляются углы прямоугольника и квадратов. Квадрат поворачивается, чтобы сделать из него бриллиант.
![](https://i2.wp.com/ruseller.com/lessons/les1365/img_4.jpg)
#breadcrumbs-three{
overflow: hidden;
width: 100%;
}
#breadcrumbs-three li{
float: left;
margin: 0 2em 0 0;
}
#breadcrumbs-three a{
padding: .7em 1em .7em 2em;
float: left;
text-decoration: none;
color: #444;
background: #ddd;
position: relative;
z-index: 1;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
border-radius: .4em 0 0 .4em;
}
#breadcrumbs-three a:hover{
background: #abe0ef;
}
#breadcrumbs-three a::after{
background: #ddd;
content: "";
height: 2.5em;
margin-top: -1.25em;
position: absolute;
right: -1em;
top: 50%;
width: 2.5em;
z-index: -1;
transform: rotate(45deg);
border-radius: .4em;
}
#breadcrumbs-three a:hover::after{
background: #abe0ef;
}
#breadcrumbs-three .current,
#breadcrumbs-three .current:hover{
font-weight: bold;
background: none;
}
#breadcrumbs-three .current::after{
content: normal;
}
С помощью псевдо-элементов добавляются два прямоугольника. Затем им скругляются углы.
![](https://i1.wp.com/ruseller.com/lessons/les1365/img_5.jpg)
#breadcrumbs-four{
overflow: hidden;
width: 100%;
}
#breadcrumbs-four li{
float: left;
margin: 0 .5em 0 1em;
}
#breadcrumbs-four a{
background: #ddd;
padding: .7em 1em;
float: left;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
position: relative;
}
#breadcrumbs-four a:hover{
background: #efc9ab;
}
#breadcrumbs-four a::before,
#breadcrumbs-four a::after{
content:"";
position:absolute;
top: 0;
bottom: 0;
width: 1em;
background: #ddd;
transform: skew(-10deg);
}
#breadcrumbs-four a::before{
left: -.5em;
border-radius: 5px 0 0 5px;
}
#breadcrumbs-four a:hover::before{
background: #efc9ab;
}
#breadcrumbs-four a::after{
right: -.5em;
border-radius: 0 5px 5px 0;
}
#breadcrumbs-four a:hover::after{
background: #efc9ab;
}
#breadcrumbs-four .current,
#breadcrumbs-four .current:hover{
font-weight: bold;
background: none;
}
#breadcrumbs-four .current::after,
#breadcrumbs-four .current::before{
content: normal;
}
Преимущества дизайна "хлебных крошек" на основе CSS3
- Нет изображений, поэтому просто обновлять и поддерживать.
- Легко масштабируется.
- Обратная совместимость со старыми браузерами.
На этом уроке познакомитесь с процессом создания в Bootstrap 3 и 4 навигационных цепочек («хлебных крошек»).
Разметка навигационных цепочек
Навигационные цепочки («хлебные крошки», breadcrumbs) - это схема навигации, которая показывает текущее положение пользователя на сайте. Они применяются для отображения иерархически-организованной информации. Например, в интернет-магазине "хлебные крошки" обычно представляют собой цепочки разделов. С их помощью пользователь может определить, в каком разделе он находится сейчас, а также они позволяют перейти на разделы более высоких уровней, т.е. предоставляют ещё одну возможность навигации по структуре сайта.
"Хлебные крошки" в Bootstrap – это обычный упорядоченный список с классом breadcrumbs . Разделитель элементов списка автоматически добавляется с помощью CSS (bootstrap.min.css) через следующий класс:
Breadcrumbs > li + li:before {
color: #cccccc;
content: "/";
padding: 0 5px;
}
Пример создания "хлебных крошек" с помощью Bootstrap.
- Главная
- Главная
- Процессоры
- Главная
- Процессоры
- Intel
Оформление навигационных цепочек в Bootstrap
Ещё один пример:
- Главная
- 2013
- Ноябрь
Хлебные крошки для навигации по архивной информации
Не стандартный вариант оформления хлебных крошек
Рассмотрим пример создания следующего варианта оформления хлебных крошек:
Пример оформления хлебных крошек на сайте
Процесс создания хлебных крошек складывается из разработки 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 разметка:
-
Главная
-
Комплектующие
-
Процессы
-
Intel
Веделение текущего элемента (если он будет использоваться в цепочке) осуществляется с помощью добавления к элементу li класса current .