«Хлебные крошки» для сайта индивидуальной разработки

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Что такое «хлебные крошки»?

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

Но только этим не ограничивается целесообразность применения данного компонента. «Крошки» играют немаловажную роль в SEO-оптимизации и лояльности к вашему сайту поисковых систем. Один из весомых аргументов в пользу установки «хлебных крошек» с пользой для SEO, это конечно же Яндекс. Если он их применяет, то значит это правильно и действительно удобно. Помимо Яндекса, навигационные цепочки используют и другие монстры, такие как Google, Mail, DMOZ и другие крупные проекты.

На web-ресурсах такого рода компонент выглядит примерно следующим образом:
Главная страница → Раздел → Подраздел → Страница.

Краткая история названия

Да, действительно, интересное название дано этому элементу сайта. Перекочевало оно на страницу web-сайта из сказки братьев Гримм «Гензель и Гретель». Кто любит сказки, может прочесть её в Сети. Чтобы было понятно, откуда взялось такое название, я могу привести лишь краткое описание сказки.

Итак, у бедного дровосека с женой было двое детей: мальчик Гензель и девочка Гретель. Жили они очень бедно, постоянно голодали. И родители решили избавиться от детей - увести в лес и там оставить на верную гибель. (Ужас какой-то! Нравы средневековой Германии!) По законам жанра - это, конечно же, была инициатива мачехи.

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

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

Но, не стоит расстраиваться, сказка имеет happy end, то бишь, счастливый конец. В итоге, после многих приключений, дети победили злую ведьму и принесли отцу (мачеха к этому времени уже умерла) драгоценности старухи и зажили они втроём богато и счастливо.

Благодаря этой сказке и появилось такое ироничное название у элемента навигации сайта. Благо по web-страничкам голодные птички не летают!

Установка «хлебных крошек» на сайт

Процедура установки «крошек» очень проста. Нужно прописать стили и на странице вставить код вывода элемента. Я хочу представить вам два варианта.

Вариант 1. С использованием изображения.

На странице сайта этот вариант будет выглядеть примерно так:

1. Код в таблицу стилей:

#breadcrumbs1 {
width: auto; /* Ширина страницы */
font-size: 13px; /* Размер шрифта */
color: #000000; /* Цвет текста, который не является ссылкой */
text-shadow: #000000 0px 0px 0px; /* Тени для текста */
text-align: left; /* Выравнивание текста */
margin: 3px 30px 10px 30px; /* Внешние отступы */
padding-bottom: 5px; /* Внутренние отступы */
border-bottom: 1px solid #20B2AA; /* Разделительная черта снизу */
}

/* фоновое изображение ссылки */
#breadcrumbs1 a:not(:last-child){
background: url(/arrow.png) no-repeat 100% 50%;
padding-right: 32px;  /* отступ справа для размещения картинки */
}

/* цвет ссылок */
#breadcrumbs1 a, #breadcrumbs a:visited {
color: #00BFFF; /* Цвет ссылки */
text-decoration: underline; /* Подчеркивание ссылок */
}
/* цвет ссылок при наведении курсора */
#breadcrumbs1 a:hover, #breadcrumbs a:active {
color: #00BFFF; /* цвет ссылки при наведении курсора */
text-decoration: none; /* Отмена подчеркивания ссылок при наведении курсора */
}

В коде даны все пояснения. Изображение (arrow.png) можно скачать в Сети, изменить название, а так же размеры до необходимых и поместить в корневую папку сайта.

2. А это код на страницы сайта. Вставляйте перед названием статьи:

<div id="breadcrumbs1">
<p>
<a href="/">Главная</a> 
<a href="#">Категория</a> 
<a href="#">Подкатегория</a>  
<span>Статья</span>
</p>

Вариант 2. Без использования изображения.

А вот такую цепочку Вы сможете самостоятельно установить на свой сайт, используя только лишь html-код:

Для реализации второго варианта необходимо выполнить два простых шага.

1. В файл стилей вставить код:

.breadcrumbs2 {
width: auto; /* Ширина страницы */
font-size: 13px; /* Размер шрифта */
color: #000000; /* Цвет текста, который не является ссылкой */
text-shadow: #000000 1px 0px 0px; /* Тени для текста */
text-align: left; /* Выравнивание текста */
margin: 3px 30px 10px 30px; /* Внешние отступы */
padding-bottom: 5px; /* Внутренние отступы */
border-bottom: 1px solid #20B2AA; /* Разделительная черта снизу */
}

/* формируем подобие стрелочки */
.breadcrumbs2 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;
}
/* цвет ссылок при наведении курсора */
.breadcrumbs2 a:hover{
color: #B22222;
}

2. В файлы статей вставлять следующий код:

<div class="breadcrumbs2">
<a href="/">Главная</a>
<a href="#">Категория</a>
<a href="#">Подкатегория</a>
<span>Статья</span>
</div>

Мы рассмотрели два самых простых варианта создания «хлебных крошек» на сайте. Варианты безо всяких наворотов, но, я считаю, достойны внимания. На этом позвольте закрыть тему. Всех Вам благ! До свидания. Ваш Л.М.