Красивая и оригинальная подборка на хлебные крошки, что выполнены в плоском дизайне, с использованием CSS3, на разную палитру оттенков. Безусловно видимость навигаций, виде кнопок отлично помогает как пользователю сайта, так и гостям, это ориентироваться на интернет ресурсе, где можно переходить по ключевым фразам, что нам будут выводить. Но и под стилистику отлично подходит, все больше можно заметить, что некоторые устанавливают на модуль форума, не говоря о современном дизайне.

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

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

Оформление хлебных крошек

1. В светло желтом оттенке:

2. Светлая палитра с зеленой гаммой:

3. В малиновом цвете

4. Выполнен в синей палитре:

Это будет простой прямой список с фоном и дополнением и некоторыми другими стилями. После этого я создам треугольную структуру в правой части каждого анкера списка, используя CSS, играя со свойствами broder.

Как можете видеть в demo версии, когда наводим на панировочные сундуки любой анкер списка, он дает эффект, что будет означать, посещен или находитесь в этом разделе.

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

Приступаем к установке:

CSS

Стиль списка не будет, чтобы избежать черной точки списка или другого стиля, который по умолчанию. Каждый список inline div будет list-inline, чтобы сделать его горизонтальным списком, используя css display: list-inline.

#breadcrumb-isanchogives1 {
text-align: center;
margin-top:30px;
}

#breadcrumb-isanchogives1 ul {
list-style: none;
display: inline-table;
}
#breadcrumb-isanchogives1 ul li {
display: inline;
}

#breadcrumb-isanchogives1 ul li a {
display: block;
float: left;
height: 50px;
background: #ffd928;
text-align: center;
padding: 30px 40px 0 80px;
position: relative;
margin: 0 10px 0 0;

Font-size: 20px;
text-decoration: none;
color: #fff;

}
#breadcrumb-isanchogives1 ul li a:after {
content: "";

border-left: 40px solid #ffd928;
z-index: 1;

#breadcrumb-isanchogives1 ul li a:before {
content: "";
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;

}

#breadcrumb-isanchogives1 ul li:first-child a {
}
#breadcrumb-isanchogives1 ul li:first-child a:before {
display: none;
}

#breadcrumb-isanchogives1 ul li:last-child a {
padding-right: 80px;
}
#breadcrumb-isanchogives1 ul li:last-child a:after {
display: none;
}

#breadcrumb-isanchogives1 ul li a:hover {
background: #ff9a2d;
}
#breadcrumb-isanchogives1 ul li a.wesove-readcrum{
background: #ff9a2d;
}
#breadcrumb-isanchogives1 ul li a:hover:after {
border-left-color: #ff9a2d;
}
#breadcrumb-isanchogives1 ul li a.wesove-readcrum:after {
border-left-color: #ff9a2d;
}

#breadcrumb-isanchogives2 {
text-align: center;
margin-top:30px;
}

#breadcrumb-isanchogives2 ul {
list-style: none;
display: inline-table;
}
#breadcrumb-isanchogives2 ul li {
display: inline;
}

#breadcrumb-isanchogives2 ul li a {
display: block;
float: left;
height: 50px;
background: #56e9ae;
text-align: center;
padding: 30px 40px 0 80px;
position: relative;
margin: 0 10px 0 0;

Font-size: 20px;
text-decoration: none;
color: #fff;

}
#breadcrumb-isanchogives2 ul li a:after {
content: "";
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #56e9ae;
position: absolute; right: -40px; top: 0;
z-index: 1;

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

#breadcrumb-isanchogives2 ul li:first-child a {
}

#breadcrumb-isanchogives2 ul li:last-child a {
padding-right: 80px;
}

#breadcrumb-isanchogives2 ul li a:hover {
background: #49c593;
}
#breadcrumb-isanchogives2 ul li a.wesove-readcrum {
background: #49c593;
}
#breadcrumb-isanchogives2 ul li a:hover:after {
border-left-color: #49c593;
}
#breadcrumb-isanchogives2 ul li a.wesove-readcrum:after {
border-left-color: #49c593;
}

#breadcrumb-isanchogives3 {
text-align: center;
margin-top:30px;
}

#breadcrumb-isanchogives3 ul {
list-style: none;
display: inline-table;
}
#breadcrumb-isanchogives3 ul li {
display: inline;
}

#breadcrumb-isanchogives3 ul li a {
display: block;
float: left;
height: 50px;
background: #ff818b;
text-align: center;
padding: 30px 40px 0 80px;
position: relative;
margin: 0 10px 0 0;

Font-size: 20px;
text-decoration: none;
color: #fff;

}
#breadcrumb-isanchogives3 ul li a:after {
content: "";
height:80px;
width:40px;
background: #ff818b;
position: absolute; right: -40px; top: 0;
z-index: 1;

#breadcrumb-isanchogives3 ul li a:before {
content: "";
height:80px;
width:40px;
border-radius:0px 40px 40px 0px;
background:#f2f2f2;
position: absolute; left: 0; top: 0;
}

#breadcrumb-isanchogives3 ul li:first-child a {
border-top-left-radius: 10px; border-bottom-left-radius: 10px;
}
#breadcrumb-isanchogives3 ul li:first-child a:before {
display: none;
}

#breadcrumb-isanchogives3 ul li:last-child a {
padding-right: 80px;
border-top-right-radius: 10px; border-bottom-right-radius: 10px;
}
#breadcrumb-isanchogives3 ul li:last-child a:after {
display: none;
}

#breadcrumb-isanchogives3 ul li a:hover {
background: #ea606b;
}
#breadcrumb-isanchogives3 ul li a.wesove-readcrum {
background: #ea606b;
}
#breadcrumb-isanchogives3 ul li a:hover:after {
background: #ea606b;
}
#breadcrumb-isanchogives3 ul li a.wesove-readcrum:after {
background: #ea606b;
}

#breadcrumb-isanchogives4 {
text-align: center;
margin-top:30px;
}

#breadcrumb-isanchogives4 ul {
list-style: none;
display: inline-table;
}
#breadcrumb-isanchogives4 ul li {
display: inline;
}

#breadcrumb-isanchogives4 ul li a {
display: block;
float: left;
height: 50px;
background: #2b97cc;
text-align: center;
padding: 30px 40px 0 80px;
position: relative;
margin: 0 10px 0 0;

Font-size: 20px;
text-decoration: none;
color: #fff;

}
#breadcrumb-isanchogives4 ul li a:after {
content: "";
height:80px;
width:40px;
border-radius:0px 40px 40px 0px;
background:#2b97cc;
position: absolute; right: -40px; top: 0;
z-index: 1;

#breadcrumb-isanchogives4 ul li a:before {
content: "";
height:80px;
width:40px;
background:#f2f2f2;
border-radius:0px 40px 40px 0px;
position: absolute; left: 0; top: 0;
}

#breadcrumb-isanchogives4 ul li:first-child a {
border-top-left-radius: 0px; border-bottom-left-radius: 0px;
}

#breadcrumb-isanchogives4 ul li:last-child a {
padding-right: 80px;
border-top-right-radius: 0px; border-bottom-right-radius: 0px;
}

#breadcrumb-isanchogives4 ul li a:hover {
background: #207ca8;
}
#breadcrumb-isanchogives4 ul li a.wesove-readcrum {
background: #207ca8;
}
#breadcrumb-isanchogives4 ul li a:hover:after {
background: #207ca8;
}
#breadcrumb-isanchogives4 ul li a.wesove-readcrum:after {
background: #207ca8;
}

Прежде всего создайте структуру html на основе тегов div и ul li. Div содержит идентификатор, каждый идентификатор будет содержать другой стиль в таблице стилей, чтобы представить отдельный дизайн. Где мы используем нумерацию, как один, два, три, четыре.

Эти идентификаторы имеют одинаковую внутреннюю структуру, разделенную разными стилями в соответствии с их идентификатором.

Здравствуйте, дорогие читатели . В этот день мы будем учиться создавать красивые хлебные крошки (breadcrumbs) для обычных сайтов, а так же для блогов WordPress . Я советую не пропускать этот момент, потому что крошки показывают путь к Вашей статье или информации на сайте, что существенно облегчит навигацию по сайту, а так же это ещё и дополнительные внутренние ссылки.

CSS

ul{ margin: 0; padding: 0; list-style: none; }

Всё, первый не маловажный шаг сделали. А сейчас давайте всё таки добавим красивый вид нашим крошкам.

Первый пример

Сам вид элемента будет состоять из трёх частей, которые соединены в одну целую часть. Чтобы было понятнее смотрите рисунок ниже:

#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.

#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; }

Третий пример

В третьем предмете элементы состоят из двух частей.

#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; }

Четвёртый пример

#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 и удалить стандартное значение, которое там стоит, другими словами, нужно оставить поле пустым.

Всё, с плагином закончили, теперь нужно выбрать то оформление, которое Вам больше всего понравилось. В данном случае на примере будет вот этот стиль:

Это второй пример , который находится выше в статье.

Берём и просто копируем данные стили, а затем добавляем их в style.css Вашей темы, в любое место, которое больше всего Вам понравится, советую выделить начало и конец стилей крошек, потому что если в будущем захочется что либо там изменить, запутаетесь.

Теперь нужно хлебные крошки добавить непосредственно на блог.

В админке блога находим внешний вид , затем редактор , и выбираем single.php . Далее добавьте следующее:

Важно

Обратите внимание, что сама функция вызова крошек стоит между тегами

id которых breadcrumbs-two , не забудьте поменять данный id на пример который добавили в стили. Например, если это первый пример (который выше) тогда должно быть так: