Увы, шаблон недоступен для скачивания или покупки, в связи с обращением правообладателя! По всем вопросам обращайтесь к Администратору.
Навигационная цепочка в виде "хлебных крошек" помогает посетителям сайта быстрей и удобней ориентироваться в иерархической структуре документов и находить путь на верхний уровень. Поэтому, если на сайте размешается большое количество документов, то его надо снабдить "хлебными крошками". В этом уроке будет представлен CSS-код для создания различных вариантов дизайна такого нужного навигационного элемента.
Разметка HTML
Разметка проста и минимальна. Она основана на неупорядоченном списке:
Для начала сделаем небольшой сброс CSS для нашего неупорядоченного списка, он одинаков для всех примеров:
Код
ul{ margin: 0; padding: 0; list-style: none;}
Для дизайна наших "хлебных крошек" будут использоваться псевдо-элементы.
Первый пример (id="breadcrumbs-one")
В данном примере используется очень простая техника. Создается треугольник на рамке справа с помощью псевдо-элементов, размещаемых один над другим. Темный треугольник смещается, чтобы создать эффект рамки.