Навигационная цепочка (дублирующее меню, «хлебные крошки», англ. Breadcrumbs) — элемент навигации, представляющий собой путь по системе от корня до рабочего каталога, который в данный момент просматривает пользователь (место, которое просматривает пользователь в настоящее время).
Название «хлебные крошки» является иронической отсылкой к немецкой сказке «Гензель и Гретель», в которой дети, когда их завели в лес во второй раз, не смогли найти обратную дорогу, так как на этот раз вместо маленьких камешков они оставляли за собой хлебные крошки, впоследствии склёванные лесными птицами.
Разберём подробнее на примере нашего сайта. Обычно цепочка представляет собой полосу в верхней части форума примерно такого вида:
Основной форум → Раздел → Форум → Подфорум → Тема
Структурное расположение хлебных крошек на форуме
Все элементы, кроме последнего, обычно являются ссылками на соответствующее расположение. Последним элементом является, как правило, название материала. За все эти элементы цепочки, кроме последнего, на форуме uCoz отвечает класс .forumBar . Его мы и будем стилизовать ниже.
Некоторые "SEO-гуру" рекомендуют удалять из цепочки последний элемент, так как в хлебных крошках достаточно показать полный путь до темы, чтобы читатель мог быстро перейти на уровень (уровни) выше. В этом случае вы можете пойти путём удаления класса .forumBarA, отвечающего за отображение названия темы на форуме.
.forumBarA {display: none}
И так, давайте разберём, из чего же состоит эта внутренняя навигация.
Основы
Изначально навигация на всех форумах uCoz выглядит примерно так:
Форум - madeas.ru » Основной технический раздел » Новости и объявления » Профилактика » Профилактические работы
* На некоторых форумах могут отстутствовать элементы цепочки, такие как Подфорумы.
И первое, на чем основывается цепочка - это последовательность её элементов. Для вашего удобства мы сразу объединили два основных класса .forumBar, и .forumBarA общими свойствами:
.forumBar,
.forumBarA {
float: left;
height: 20px;
background: #2980b9;
text-align: center;
padding: 3px 4px 0 15px;
position: relative;
margin: 0 10px 0 0;
text-decoration: none;
}
Таким образом мы обозначили наше начало и путь для переходов.
Не хватает стрелок направления? Давайте сделаем их, добавив псевдоэлементы :after и :before и свойство border
Первый псевдоэлемент будет отвечать за правую стрелку, указывающую направление от начала пути, до конечной точки
.forumBar:after,
.forumBarA:after {
content: "";
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #2980b9;
position: absolute; right: -10px; top: 0;
z-index: 1;
}
Теперь создадим заднюю стрелку, так называемый флажок, при помощи псевдоэлемента :before
.forumBar:before,
.forumBarA:before {
content: "";
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #fff;
position: absolute; left: 0; top: 0;
}
В завершение выше написанного хочется добавить, что для полноценного отображения хлебных крошек, вам необходимо задать еще один параметр для класса .forumNamesBar. Это важный момент, поскольку оба рассмотренных класса находятся в нём.
.forumNamesBar {font-size:11px;padding:3px 0}
Вот и всё! На этом установка закончена.
| View demo |
|
Понравился материал? Поделитесь с друзьями |
С этим материалом смотрят:
![Вид похожих материалов [для uCoz]](/_pu/0/37897523.png)
| Feedback: 3 | |
Кирилл Сафронов 18 @Safron 28/11/2016 13:421
+1
материал
 
Да, надо добавить еще несколько пунктов:
1. Цвет, который будет отображаться на темном фоне в хлебных крошках. Мы сделали его белым. Код a.forumBarA, a.forumBar { color:#fff; } 2. Hover эффекты. У каждого сайта свой стиль и каждый дизайнер делает цвета под него, поэтому мы просто обозначим пункты, которые вам необходимо указать обоим классам в соответствии со своим стилем: Код .forumBar:hover, .forumBarA:hover { background: ; color: ; } Заметьте! Если для классов мы использовали свойства background и color, то для псевдоэлементов, строящихся на свойстве border, мы будем использовать это же свойство: Код .forumBar:hover:after, .forumBarA:hover:after { [b]border-left-color: ; } 3. Третьим пунктом у нас идет закругление первого пункта в классе .forumBar: Код .forumBar:first-child {border-top-left-radius: 4px; border-bottom-left-radius: 4px;} .forumBar:first-child:before {display: none;} 4. Следующий и он же последний пункт - удаление стрелки на последних элементах цепочки: Код .forumBar:last-child, .forumBarA:last-child {padding-right: 20px; border-top-right-radius: 4px; border-bottom-right-radius: 4px;} .forumBar:last-child:after, .forumBarA:last-child:after {display: none;} Здесь мы так же сделали закругление финального элемента и удалили стрелку псевдоэлемента :after 
| |