Красивые хлебные крошки (breadcrumbs) для обычного сайта и для блогов WordPress на CSS3

Разместил / Просмотров: 23 554 / комментариев 95

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

Пример

Хочу сказать, что данная статья будет делиться на две части. В первой части мы будем делать само оформление хлебных крошек, примеров будет 4. А во второй части мы будем прикреплять одно из понравившихся оформлений на блог WordPress. В общем надеюсь, что Вам всё понятно, теперь приступаем к работе.

Часть 1. Создаём красивые хлебные крошки

Для начала нам нужно будет создать обычный html файл, например, index.html. Затем открыть его с помощью любого текстового редактора (например блокнот) и добавить следующее:

HTML

<ul id="breadcrumbs-one">
 <li><a href="">Крошки1</a></li>
 <li><a href="">Крошки2</a></li>
 <li><a href="">Крошки3</a></li>
 <li><a href="">Крошки4</a></li>
 <li><a href="" class="current">Крошки5</a></li>
 </ul>

Далее для тега <ul> добавляем стили CSS:

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

Далее выбираем вторую вкладку Current Item и на против строчки Link Current Item ставим галочку. Обязательно после того как всё сделаете,  не забудьте сохраниться.

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

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

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

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

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

<div id="breadcrumbs-two">
<?php
if(function_exists('bcn_display'))
{
 bcn_display();
}
?>
</div>

Важно

Обратите внимание, что сама функция вызова крошек стоит между тегами <div></div> id которых breadcrumbs-two, не забудьте поменять данный id на пример который  добавили в стили. Например, если это первый пример (который выше) тогда должно быть так: <div id=»breadcrumbs-one»> и так далее. (Извиняюсь за ребус) :-)

Если у Вас шаблон на блоге похож на мой, в том смысле, что бэкграунд серый а сам блок с контентом белый, крошки лучше всего ставить над блоком, как у меня. Потому что они могут перенестись на новую строку если название слишком длинное и, поверьте, это не очень красиво. :-)

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

  • Сергей

    я так понял что это для новичков?и куда всё это цеплять
    обычный html файл, например, index.html. Затем открыть его с помощью любого текстового редактора (например блокнот) и добавить следующее:
    HTML

    Крошки1
    Крошки2
    Крошки3
    Крошки4
    Крошки5

    Далее для тега добавляем стили CSS:
    CSS
    ul{
    margin: 0;
    padding: 0;
    list-style: none;
    }
    ты вводишь новичков в заблуждения,зачем создавать?куда вставлять?

  • Сергей, Крошки1Крошки2Крошки3 и тд это примеры, их все вставлять не нужно. Зачем их создавать я писал в самом начале статьи.
    ul{
    margin: 0;
    padding: 0;
    list-style: none;
    }
    это общий стиль для примера, когда вставлять на сайт можно без него.
    Вставлять туда куда нужно вам, например у меня они стоят в index.php.
    И с чего Вы взяли, что я новичков ввожу в заблуждение? :-)

  • Сергей

    ну тогда зачем создавать html файл,index.html,новичку допустим вообще не понятно,создал,а потом куда девать?куда вставлять?т.е. Часть 1 походу только заморачивает…

  • Сергей

    т.е.логичней начать с примера 1,и далее..,скопировал вставил,…скопировал вставили т.д.

  • Ну почему заморачивает? Я бы советовал всё это сначала делать в отдельном файле, потому что сразу не получиться их ровно прикрепить, а после того как всё устраивает, лепить уже на сайт. А без первой части не получится сделать всё в новом файле.

  • Да, 1 часть для нового или пробного файла.

  • Сергей

    ну все таки для новичков -Создаём красивые хлебные крошки,а новичку всегда проще скопировал-вставил,так вообщем всё хорошо вот начало только…..пересмотрел-бы,по бодробней и попонятней

  • Тут в принципе так и есть скопировал вставил. Но всё равно, спасибо огромное за совет, я обязательно учту на будущее :-)

  • Скажите пожалуйста, всё получилось но хотелось бы их высоту немного поменьше сделать. Вот как у вас в блоге) Что нужно изменить?

  • Александр, если я Вас правильно понял за высоту крошек, то она изменяется следующим образом:

    Измените в стилях вот эти параметры: margin: 0 .5em 0 1em; или padding: .7em 1em; это стандартные значения. Их нужно уменьшить, просто поставьте меньшие цифры

  • Спасибо вам огромное всё получилось! Изменил padding: .5em 1em;

  • Александр, рад был помочь :-)

  • Ch.shwets

    Александр, спасибо за статью!
    Давно уже хочу сделать «хлебные крошки», но руки никак не дойдут. Всё работает )

  • Ch.shwets, очень рад, что они Вам пригодились :-)

  • Я не знаю мне такие примеры не нравятся!!!!

  • Ну, всем не угодишь :-)

  • Отличный урок и отличные крошки! Вот только я захотел немного изменить вид, но не знаю, как. Мне нужно поменять фон крошек. Это возможно?

  • Юрий, конечно возможно. В классе #breadcrumbs-one a в первых крошках, измените цвет бекграунда background-color: #ddd;

  • Так в том-то и дело, что мне интересны вторые крошки, я вместо цвета ставил background-image, но тогда крошка в квадрат превращается…

  • Юрий, ещё нужно здесь цвет поменять #breadcrumbs-two a:

  • Да я не настолько нуб! Я поменял. Меняется только центр, а боковые элементы нет. Которые after и before. Я почитал,что эти уголки задаются через изменение параметра border.Так вот и думаю — текстуру же на border нельзя добавить?

  • иван

    Александр,а как сделать больше отступ крошек?

  • Иван, где именно отступ изменить? Сверху и снизу?

  • иван

    ну вот как во втором примере.между самими стрелочками.просто получается что они у меня как бы слиплись.

  • иван

    и еще один вопрос как изменить цвет при наведении?
    заранее благодарен

  • Иван, здесь #breadcrumbs-two li{ float: left; margin: 0 .5em 0 1em;} измените значение margin

  • В классе #breadcrumbs-two a измените background: #ddd;

  • иван

    спасибо Александр за крошки,очень красиво смотрятся.

  • На здоровье, Иван :-)

  • иван

    Блин,неувязочка.когда нахожусь на сайте как админ,то крошки есть,как только перехожу в разряд посетители то пропадают.в чем причина?

  • Сайт на вордпрессе?

  • иван

    да

  • Это скорее всего проблема в плагине. Какой плагин для крошек стоит?

  • иван

    ну который вы указали в начале статьи.можете подсказать какие-нибудь другие плагины?

  • Иришка))

    Возможно у Вас какие-то плагины между собой конфликтуют :) у меня так с меню было :)

  • Поддерживаю Иришку. Возможно какие то плагины конфликтуют.

  • Иришка))

    Юрий, вероятно, Вы использовали одну картинку (квадрат/прямоугольник)?

  • иван

    с меню такое было раньше,удали плагин hypercahe.но тут вообще не понятно.

  • Иришка))

    Иван, если у Вас в меню подсвечивается рубрика в которой открыта запись (как у меня), то скорей всего крошки конфликтуют именно с кодом самого меню :)

  • иван

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

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

  • иван

    нет,шаблон платный от Гудвина Make Progress,все работало хорошо,а потом раз и все.Его шаблоны очень качественные

  • иван

    Александр,можете посмотреть мой сайт,как например у вас отображается сайт.russian-bizness.ru.в середине должно быть видео,но у меня оно не отображается

  • Иришка))

    Иван, если у Вас платный шаблон, почему Вы не обратитесь к разработчику?

  • иван

    обращался,он незнаает

  • Иришка))

    Иван, возможно Вы удалили часть кода. Попробуйте проверить на другом шаблоне. Или сделайте резервную копию (со всеми изменениями) текущего шаблона и установите исходный купленный шаблон. По идее должно сработать :) а потом из резервной копии можно скопировать нужные изменения.

  • Не спорю, у Гудвина шаблоны качественные.

  • У меня вместо видео написано «Здесь скоро будет видео приветствие»

  • Иришка, правильно всё пишет :-) И всё же меняйте шаблон и попробуете вставить видео. Хотя бы знать будете в шаблоне проблема или нет.

  • иван

    поменял шаблон,все тоже.как админ вижу изменения,а как посетитель нет

  • Ивна, а Вы с ютуба видео поставить пытаетесь?

  • иван

    да,но пробывал и другие плееры,такие как флоу плеер,jw player идр

  • иван

    самое непонятное почему я как админ сразу вижу изменения,но как посетитель нет

  • Честно, даже не знаю, что посоветовать :-) А версия вп какая? Я так понял Вы просто ссылку ставите с ютуба и ничего не работает?

  • иван

    WordPress от Lecactus Версия 3.4.2,ну как ссылка?код плеера,при чем код изменял также для в разделе для разработчиков

  • иван

    может быть это каким то боком связано с базой данных?я уже не знаю что думать

  • Иришка))

    Вряд ли это база :) Это скорее похоже на лаг обновления или на настройки доступа. Хотя.. всякое может быть…

  • Я так понял вп не с официального сайта? Может быть в этом причина. Честно я сам уже не знаю, но интересно. Попробуйте код на видео плеер поставить с друго го сайта, например, с вимео или рутюба.

  • Я тоже думаю, что с базой данных врядли что, иначе просто бы комментариев не было и статьи пропали бы :-)

  • иван

    вот так выглядит сайт если я зайду как админ:http://russian-bizness.ru/ik.jpg

  • Иришка))

    Вот то, что обновление не с оф сайта, больше похоже на причину. Попробуйте обновиться на codex.wordpress.org/Version_3.4.2

  • А где этот текст ставится? Здесь скоро будет видео приветствие

  • иван

    да ну смысла нет менять видео,потому что я проводил ряд измнений на сайте,изменения опять таки видны когда я нахожусь на сайте как админ.Может и правда дело в движке,ну тогда почему сначала все хорошо работало,а потом раз и все?загадка прям.движок я изначально поставил от лекактус последней версии

  • Иван, я понимаю, почему я вижу эту запись «Здесь скоро будет видео приветствие» а Вы видите видео. Следует вопрос, где эта запись стоит «Здесь скоро будет видео приветствие»? Вот вместо неё нужно ставить код видео

  • иван

    текст ставится в самой рамке его я еще вчера удалил,но он по преженму отображается.если быть точнее то здесь:

    Можете даже посмотреть исходный код. Здесь скоро будет видео приветствие его нет блин,но он все равно отображается

  • иван

    да ставил видео вместо текста,и рамку убирал,и просто текст ставил.дело не в видео точно.

  • Иришка))

    Иван, возможно еще, у Вас включено кэширование. Попробуйте его отключить. Или проверьте наличие плагина «Hyper Cache» (который отвечает за кэш) и его настройки.

  • Вот за кеш, это в точку, Иришка. Отключайте его , а потом чистите кеш браузера и проверяйте.

  • иван

    c плагином Hyper Cache была такая проблема как раз в меню,его я давно удалил.я деактивировал все плагины,не помогает

  • иван

    попробую на новый домен загрузить другой движок и посмотрим что будет

  • Иришка))

    Иван, я так понимаю? на FTP в /wp-content/cache — папка Hyper Cache удалена!? возможно там еще остался файл advanced-cache.php, его тоже нужно удалить.

    Еще, перед удалением плагин нужно было деактивировать.
    Как вариант, можно данный плагин переустановить, затем деактивировать и удалить, потом почистить /wp-content/cache.

  • иван

    Иришка)) ВЫ ПРОСТО УМНИЦА!!!Большое вам спасибо все работает!

  • иван

    ну это тестовое видео,так что вы не пугайтесь,сниму профессиональную презентацию.поскольку сайт совсем недавно сделал

  • Иришка))

    Спасибо! :) Приятно, что общими усилиями таки удалось вопрос решить :)

  • Ура :-) Спасибо Иришке!!

  • Иришка))

    Спасибо хорошему учителю!!! :)

  • иван

    Александр,а можно ли убрать продолжение после крошек в примере one,мне кажется что они ни к чему http://russian-bizness.ru/rrr.jpg

  • В смысле самый последний блок крошек?

  • иван

    я на картинке показал

  • Это плагин нужно настроить.

  • иван

    Александр, а как?буду очень признателен если вы мне в очередной раз поможете

  • Иван, зайдите в настройки плагина, выберете раздел Текущая позиция, и уберите там галочку.

  • Валерий

    Будет ли это работать на IE6-9?

  • Валерий, в IE6 точно не будет, в других версиях не проверял.

  • Саша, сколько всего интересного у вас, аж глаза разбегаются. Это я удачно зашла :)
    И сам блог приятный, сразу видно, автор знает, о чем пишет. Только вот слепая, наверное, формы подписки не нашла или у вас ее нет?

  • Ольга, спасибо Вам. Я к Вам тоже удачно зашёл, много чего для себя интересного узнал :-) Конечно же есть подписка, она в сайтбаре. :-)

  • Точно слепая, без формы подписку не признала :)

  • Дмитрий

    Здравствуйте Александр ! Подскажите пожалуйста как сделать, что бы та страница на которой находишься тоже была выделена этими «треугольниками» . Я про первый пример там три фигуры (прямоугольник, 2 треугольника) Что нужно добавить в CSS чтобы последняя ссылка (крошка) тоже была выделена этими фигурами. Перепробовал всё и не понятно вообще как они выводятся !!!

  • Здравствуйте, Дмитрий. Вы пытаетесь на Вордпресс крошки прикрепить?

  • Дмитрий

    Да Александр ! Но не с помощью плагина а с помощью файла function.php . Всё выводится как у вас описано, но хотелось бы статья (последняя крошка) тоже выводилась так же красиво как предыдущие.

  • Дмитрий, попробуйте сделать её ссылкой (последнюю крошку) И всё будет работать.

  • mcmerphy

    Вы бы css коде хоть комменты подписали а то так не разберешь !

  • Мир детских эмоций и чувств

    Жаль, что не видела вашей статьи раньше. У меня стоит второй вариант, который я корректировала под первый через css. Головная боль еще та. Подскажите, пожалуйста, как можно убрать ссылку с последней крошки, т.е. открытой статьи, напрмиер, как в интернет-магазине Озон: там последняя надпись не подсвечивается, и она неактивна (не знаю, насколько понятно написала). Спасибо, если ответите

  • Всё есть в настройках плагина

  • Xacho

    у меня кроме первого примера, остальные не работают
    не включаются стили
    показывает как обычный список