Главная › Новости

Красивые хлебные крошки (breadcrumbs) для обычного сайта и для блогов WordPress на CSS3

Опубликовано: 06.10.2017

Урок 8. Верстаем слайдер и хлебные крошки - верстка шаблона Joomla 2.5

Здравствуйте, дорогие читатели блога . В этот день мы будем учиться создавать красивые хлебные крошки (breadcrumbs) для обычных сайтов, а так же для блогов WordPress . Я советую не пропускать этот момент, потому что крошки показывают путь к Вашей статье или информации на сайте, что существенно облегчит навигацию по сайту, а так же это ещё и дополнительные внутренние ссылки.

Хочу сказать, что данная статья будет делиться на две части. В первой части мы будем делать само оформление хлебных крошек, примеров будет 4. А во второй части мы будем прикреплять одно из понравившихся оформлений на блог  WordPress . В общем надеюсь, что Вам всё понятно, теперь приступаем к работе.

Хлебные крошки WordPress (Breadcrumb NavXT)

Для начала нам нужно будет создать обычный html файл, например, index.html. Затем открыть его с помощью любого текстового редактора (например блокнот) и добавить следующее:

HTML

<ul id="breadcrumbs-one"> <li><a href="">Крошки1</a></li> <li><a href="">Крошки2</a></li> <li><a href="">Крошки3</a></li> <li><a href="">Крошки4</a></li> <li><a href="" class="current">Крошки5</a></li> </ul>

Далее для тега <ul> добавляем стили CSS :

Хлебные крошки Реклама

CSS

ul{ margin: 0; padding: 0; list-style: none; }

Всё, первый не маловажный шаг сделали. А сейчас давайте всё таки добавим красивый вид нашим крошкам.

Первый пример

Сам вид элемента будет состоять из трёх частей, которые соединены в одну целую часть. Чтобы было понятнее смотрите рисунок ниже:

#breadcrumbs-one{ background: #eee; border-width: 1px; border-style: solid; border-color: #f5f5f5 #e5e5e5 #ccc; border-radius: 5px; box-shadow: 0 0 2px rgba(0,0,0,.2); overflow: hidden; width: 100%; } #breadcrumbs-one li{ float: left; } #breadcrumbs-one a{ padding: .7em 1em .7em 2em; float: left; text-decoration: none; color: #444; position: relative; text-shadow: 0 1px 0 rgba(255,255,255,.5); background-color: #ddd; background-image: linear-gradient(to right, #f5f5f5, #ddd); } #breadcrumbs-one li:first-child a{ padding-left: 1em; border-radius: 5px 0 0 5px; } #breadcrumbs-one a:hover{ background: #fff; } #breadcrumbs-one a::after, #breadcrumbs-one a::before{ content: ""; position: absolute; top: 50%; margin-top: -1.5em; border-top: 1.5em solid transparent; border-bottom: 1.5em solid transparent; border-left: 1em solid; right: -1em; } #breadcrumbs-one a::after{ z-index: 2; border-left-color: #ddd; } #breadcrumbs-one a::before{ border-left-color: #ccc; right: -1.1em; z-index: 1; } #breadcrumbs-one a:hover::after{ border-left-color: #fff; } #breadcrumbs-one .current, #breadcrumbs-one .current:hover{ font-weight: bold; background: none; } #breadcrumbs-one .current::after, #breadcrumbs-one .current::before{ content: normal; }

Второй пример

Тут как и в первом примере, элемент состоит из трёх частей, которые соеденяются в одну часть с помощью CSS.