Автор

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

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

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

Галерея iLoad позволит вам удобно и эффектно показать фотографии вашим посетителям. Внешний вид галереи легко изменяется и вы быстро сможете настроить галерею под стиль своего сайта. iLoad позволяет показывать одиночные изображения, группировать изображения и создавать слайд шоу. Галерея поддерживает все современные браузеры, а так же InternetExplorer с 6 по 9 версию. iLoad не использует сторонние фреймворки, такие как jQuery, Prototype и так далее!


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

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


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close