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

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

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

Можешь почитать и вот эту статейку " CSS3 и jQuery эффект при наведении на картинку"

Опрос

Ваше мнение

На каком движке ваш сайт?
Результаты

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

Теги

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

Статистика

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