All for Joomla All for Webmasters
HTML5/CSS3

Хлебные крошки с использованием CSS3

хлебные крошки в формате css блог веб студии везом

Как разметить хлебные крошки на сайте с помощью CSS3

Навигация оформленная по принципу «хлебных крошек» позволяет пользователям: точно определять в каком разделе сайта они находятся, легче и быстрее перемещаться между разделами, лучше понимать структурную иерархию сайта, совершать меньше действий для возвращения в предыдущие разделы. Для улучшения юзабилити сайта это верный шаг.

HTML разметка

Разметка будет максимально простой и оновой её будет служить не нумерованный список. (Это так же хорошо с точки зрения семантики кода. Потому что по сути — «хлебные крошки» и есть список ссылок.)

<ul id=»breadcrumbs-one»>
<li><a href=»»>Главная</a></li>
<li><a href=»»>Дизайн</a></li>
<li><a href=»»>Вдохновение</a></li>
<li><a href=»»>Полиграфия</a></li>
<li><a class=»current» href=»»>Текущая вкладка</a></li>
</ul>

Перейдем к CSS

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

Начало пройдено. Мы сделали html-каркас «хлебных крошек», сбросили стили для списка и теперь можем спокойно приступать к написанию основного блока CSS. В работе мы будем использовать псевдо-элементы.

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

Наш элемент будет строится с использованием прямоугольного блока и двух треугольников, которые расположенны один над другим. Темный треугольник будет находится ниже светлого, для создания рамки.

#breadcrumbs-one{
background: #eee;
border-width: 1px;
border-style: solid;
border-color: #f5f5f5 #e5e5e5 #ccc;
border-radius: 5px;//Скругление углов
//Тень для элемента с нулевым смещением по осям х и у, и с 2-х пиксельным размытием, черного цвета с прозрачность 20%
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;
}

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

Для этого примера понадобится изменить название идентификатора #breadcrumbs-one на #breadcrumbs-two. Наш элемент будет строится с использованием прямоугольного блока и двух пседоблоков расположенных, перед и после основного блока соответственно.

#breadcrumbs-two{
overflow: hidden;
width: 100%;
}
#breadcrumbs-two li{
float: left;
margin: 0 .5em 0 1em;
}
#breadcrumbs-two a{
background: #ddd;
padding: .7em 1em;
float: left;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
position: relative;
}
#breadcrumbs-two a:hover{
background: #99db76;
}
#breadcrumbs-two a::before{
content: «»;
position: absolute;
top: 50%;
margin-top: -1.5em;
border-width: 1.5em 0 1.5em 1em;
border-style: solid;
border-color: #ddd #ddd #ddd transparent;
left: -1em;
}
#breadcrumbs-two a:hover::before{
border-color: #99db76 #99db76 #99db76 transparent;
}
#breadcrumbs-two a::after{
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 #ddd;
right: -1em;
}
#breadcrumbs-two a:hover::after{
border-left-color: #99db76;
}
#breadcrumbs-two .current, #breadcrumbs-two .current:hover{
font-weight: bold;
background: none;
}
#breadcrumbs-two .current::after, #breadcrumbs-two .current::before{
content: normal;
}

Похожие материалы

Нет комментариев

Отставить комментарий