Автор

05 05.2017
Хлебные крошки & многоэтапный Индикатор на CSS3

Хлебные крошки & многоэтапный Индикатор на CSS3


Пользователи, очевидно, не любят чувствовать себя потерянными, когда они перемещаются по сайту. Именно поэтому мы представили UX-шаблоны, чтобы показать, как они попали на конкретную страницу (хлебные крошки) и что будет дальше (индикаторы с несколькими шагами).

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

 

ДЕМО
ИСХОДНИКИ

 

Создание структуры

Структура HTML очень проста: упорядоченный список элементов, завернутый в элемент <nav>.

<nav>
<ol class="cd-breadcrumb">
<li><a href="#0">Home</a></li>
<li><a href="#0">Gallery</a></li>
<li><a href="#0">Web</a></li>
<li class="current"><em>Project</em></li>
</ol>
</nav>

 

Добавление стиля

Мы создали два основных класса для элемента ol: .cd-breadcrumb и .cd-multi-steps. Хотя они имеют схожий стиль, мы хотели провести различие между двумя веб-компонентами, поскольку они служат для другой цели.

Для базовой версии мы использовали псевдоэлемент :: after элементов списка, чтобы создать разделительный элемент:

.cd-breadcrumb li::after, .cd-multi-steps li::after {
  display: inline-block;
  content: '\00bb';
  margin: 0 .6em;
  color: #959fa5;
}

Мы создали набор классов CSS - для добавления в элемент ol, который изменит стиль веб-компонента.

Например: если вы хотите использовать пользовательский значок в качестве разделителя между элементами (пример № 2), просто используйте класс .custom-separator.

<nav>
<ol class="cd-breadcrumb custom-separator">
<li><a href="#0">Home</a></li>
<li><a href="#0">Gallery</a></li>
<li><a href="#0">Web</a></li>
<li class="current"><em>Project</em></li>
</ol>
</nav>

Затем не забудьте обновить фоновое изображение :: after псевдоэлемента элемента списка:

.cd-breadcrumb.custom-separator li::after, 
.cd-multi-steps.custom-separator li::after {
  /* replace the default separator with a custom icon */
  content: '';
  height: 16px;
  width: 16px;
  background: url(../img/cd-custom-separator.svg) no-repeat center center;
  vertical-align: middle;
}

Класс .custom-icons предназначен для добавления пользовательских значков перед каждым элементом списка. Еще раз вам нужно обновить CSS в соответствии с изображениями, которые вы хотите использовать. В нашей демонстрации мы использовали файл .svg как спрайты для изображений:

.cd-breadcrumb.custom-icons li > *::before, 
.cd-multi-steps.custom-icons li > *::before {
  /* add a custom icon before each item */
  content: '';
  display: inline-block;
  height: 20px;
  width: 20px;
  margin-right: .4em;
  margin-top: -2px;
  background: url(../img/cd-custom-icons-01.svg) no-repeat 0 0;
  vertical-align: middle;
}
.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(2) > *::before, 
.cd-multi-steps.custom-icons li:not(.current):nth-of-type(2) > *::before {
  /* change custom icon using image sprites */
  background-position: -20px 0;
}
.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(3) > *::before, 
.cd-multi-steps.custom-icons li:not(.current):nth-of-type(3) > *::before {
  background-position: -40px 0;
}
.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(4) > *::before, 
.cd-multi-steps.custom-icons li:not(.current):nth-of-type(4) > *::before {
  background-position: -60px 0;
}
.cd-breadcrumb.custom-icons li.current:first-of-type > *::before, 
.cd-multi-steps.custom-icons li.current:first-of-type > *::before {
  /* change custom icon for the current item */
  background-position: 0 -20px;
}
.cd-breadcrumb.custom-icons li.current:nth-of-type(2) > *::before, 
.cd-multi-steps.custom-icons li.current:nth-of-type(2) > *::before {
  background-position: -20px -20px;
}
.cd-breadcrumb.custom-icons li.current:nth-of-type(3) > *::before, 
.cd-multi-steps.custom-icons li.current:nth-of-type(3) > *::before {
  background-position: -40px -20px;
}
.cd-breadcrumb.custom-icons li.current:nth-of-type(4) > *::before, 
.cd-multi-steps.custom-icons li.current:nth-of-type(4) > *::before {
  background-position: -60px -20px;
}

Класс .triangle генерирует треугольники CSS после каждого элемента списка. Чтобы создать разделение между элементами, мы использовали трюк, который мы нашли в CSS-Tricks.

.cd-breadcrumb.triangle li::after, 
.cd-breadcrumb.triangle li > *::after {
/*
li > *::after is the colored triangle after each item
li::after is the white separator between two items
*/
content: '';
position: absolute;
top: 0;
left: 100%;
content: '';
height: 0;
width: 0;
/* 48px is the height of the <a> element */
border: 24px solid transparent;
border-right-width: 0;
border-left-width: 20px;
}
.cd-breadcrumb.triangle li::after {
/* this is the white separator between two items */
z-index: 1;
-webkit-transform: translateX(4px);
-moz-transform: translateX(4px);
-ms-transform: translateX(4px);
-o-transform: translateX(4px);
transform: translateX(4px);
border-left-color: #ffffff;
/* reset style */
margin: 0;
}
.cd-breadcrumb.triangle li > *::after {
/* this is the colored triangle after each element */
z-index: 2;
border-left-color: inherit;
}
.cd-breadcrumb.triangle li:last-of-type::after,
.cd-breadcrumb.triangle li:last-of-type > *::after {
/* hide the triangle after the last step */
display: none;
}

Другие классы, которые следует иметь в виду: .text-center, .text-top и .text-bottom для использования с классом .cd-multi-steps для установки положения меток и .count, если вы хотите добавить Счетчик к индикатору нескольких этапов.

<nav>
<ol class="cd-multi-steps text-bottom count">
<li class="visited"><a href="#0">Cart</a></li>
<li class="visited" ><a href="#0">Billing</a></li>
<li class="current"><em>Delivery</em></li>
<li><em>Review</em></li>
</ol>
</nav>

Самый простой способ понять, как работает этот ресурс, - проверить исходные файлы: большинство классов можно комбинировать, и мы рассмотрели все возможные комбинации в 9 примерах демонстрации.

Наслаждайтесь!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеCSS3

06 06.2017
Хлебные крошки & многоэтапный Индикатор на CSS3

В последнее время мы экспериментировали с анимацией SVG. Сегодняшний урок показывает вам, как анимировать сразу несколько путей SVG, чтобы создать стильный фоновый эффект для модального окна.


24 04.2013
Хлебные крошки & многоэтапный Индикатор на CSS3

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


26 03.2013
Хлебные крошки & многоэтапный Индикатор на CSS3

Неприятно, когда ты тратишь несколько часов на то, чтобы написать какую статью, размещаешь ее на своем сайте, а потом она оказывается еще на нескольких ресурсах без указания ссылки на первоисточник. Эти методы не дают стопроцентной гарантии, однако снизить количество подобных случаем помогают. Существуют и другие эффективные средства – защита от копирования текста средствами JavaScript. Использование скриптов помогает затруднить работу копипастерам, заставив их тратить больше времени на копирование контента.


19 01.2016
Хлебные крошки & многоэтапный Индикатор на CSS3

Многие уже сталкивались с этой задачей как на сайте установить карту с правильным маршрутом до пункта назначения из своего города! У меня уже есть публикация Как проложить маршрут на карте Google, но мне она показалась не удобной. Вот и я решил реализовать на одном из своих проектов такую, на мой взгляд удобную функцию.


105 Публикаций

Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close