Хаки и Скрипты Next Generation CMS

Красивое оформление "хлебных крошек" breadcrumbs

irbees2008 irbees2008 Опубликовано - 27 - февраля Интерфейс
1922 - 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
  • Демо:

Всем привет. Вот нашел довольно интересный вариант оформления breadcrumbs "хлебных крошек" на bootstrap . Смотрятся довольно интересно, и настроить под свой дизайн будет легко, кода минимум.
И так приступим .У нас должны быть подключены стили bootstrap и шрифтовые иконки font-awesome как показанно ниже, подключить можно и из других хранилищ или с вашего сайта:

Код:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
Далее стили оформления хлебных крошек, добавляем в файл стилей вашего шаблона:
Код:
.breadcrumb li a:hover{
text-decoration: none;
}
.breadcrumb{
padding: 15px 15px 15px 50px;
margin: 0;
background: #12abb3;
border-radius: 5px;
overflow: hidden;
}
.breadcrumb li{
float: left;
position: relative;
}
.breadcrumb li:first-child{
width: 70px;
height: 70px;
border-radius: 50%;
background: #12abb3;
box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.2);
text-align: center;
position: absolute;
top: -10px;
left: -10px;
z-index: 1;
transition: all 0.1s ease 0s;
}
.breadcrumb li:hover:first-child{ transform: scale(1.1); }
.breadcrumb li:first-child a{
font-size: 30px;
line-height: 70px;
}
.breadcrumb > li:first-child + li:before{ display: none; }
.breadcrumb li.active,
.breadcrumb li a{
font-size: 14px;
color: #fff;
}
Ну и последнее открываем templates\plugins\breadcrumbs\breadcrumbs.tpl и заменяем содержимое файла на вот это :
Код:
<ol class="breadcrumb" itemscope itemtуpe="http://schema.org/BreadcrumbList">
{% for loc in location %}
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemprop="item" href="{{ loc.url }}" ><span class="text-el" itemprop="name">{{ loc.title }}</span></a>
<meta itemprop="position" content="1" />
<span class="divider">/</span>
</li>
{% endfor %}
{% if (location_last) %}
<li class="active" itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemprop="item" href="{{ news.url.full }}">
<span class="text-el" itemprop="name">{{ location_last }}</span></a>
<meta itemprop="position" content="2" />
</li>
{% endif %}
</ol>
Вот и все пользуемся.

Можешь почитать и вот эту статейку "Верстаем на Twitter Bootstrap"

Опрос

Ваше мнение

Какой поисковой системой пользуетесь?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4365 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 660
  • Онлайн всего: [7]
  • Гости: [6]
  • Поисковики: [1] Google
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 31
  • Генерация страницы: 0.616сек
  • Потребление памяти: 5.160 Mb 
  •   Яндекс.Метрика