Background Image

Хлебные крошки для форума

Script

by — Category Script on

Навигационная цепочка (дублирующее меню, «хлебные крошки», англ. 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

    Мини скрипты для uCoz

    Набор всевозможных скриптов

    View More
    1 396 17:22
    Автоматический слайдер для контента

    Автоматический слайдер для кон...

    Очень легкий слайдер для контента с автоматический п...

    View More
    0 401 16:25
    Вид похожих материалов [для uCoz]

    Вид похожих материалов [для uC...

    Данная функция часто встречается на кино сайтах, вид...

    View More
    4 1464 22:19
    Сворачивание и разворачивание форума с запоминанием

    Сворачивание и разворачивание ...

    Сейчас в сети достаточно много подобных скриптов для...

    View More
    0 277 17:10
Метки: breadcrumbs, UCOZ, Forum
Feedback: 3
Safron
В статье не хватает color: white
iMadeas
0
Да, надо добавить еще несколько пунктов:

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;}
Таким образом мы удалили флажок у первого элемента цепочки при помощи псевдоэлемента child

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
inCorWeb
Спасибо огромное! Давно такое искал

Leave a Comment

Имя *:
Email *:
Код *:
Menu