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

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

irbees2008 irbees2008 Опубликовано - 27 - февраля Интерфейс
2051 - 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>
Вот и все пользуемся.

Можешь почитать и вот эту статейку "С Днём Победы !"

Опрос

Ваше мнение

Вы нашли что искали?
Результаты

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

Теги

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

Статистика

  • Caйту: 4544 дня
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 671
  • Онлайн всего: [3]
  • Гости: [3]
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 31
  • Генерация страницы: 1.304сек
  • Потребление памяти: 5.159 Mb 
  •   Яндекс.Метрика