Навигация в виде "хлебных крошек" помогает посетителям сайта ориентироваться в иерархической структуре документов и находить путь на верхний уровень. Поэтому, если на сайте размешается большое количество документов, то его надо снабдить "хлебными крошками". В данном уроке будет представлен CSS код для создания различных вариантов дизайна такого нужного навигационного инструмента. "Хлебные крошки" помогут найти путь Разметка HTML Разметка проста и минимальна. Она основана на неупорядоченном списке. 1 <ul id="breadcrumbs-one"> 2 <li><a href="">Lorem ipsum</a></li> 3 <li><a href="">Vivamus nisi eros</a></li> 4 <li><a href="">Nulla sed lorem risus</a></li> 5 <li><a href="">Nam iaculis commodo</a></li> 6 <li><a href="" class="current">Вы здесь</a></li> 7 </ul> CSS Для начала сделаем небольшой сброс CSS для нашего неупорядоченного списка: 1 ul{ 2 margin: 0; 3 padding: 0; 4 list-style: none; 5 } Для дизайна наших "хлебных крошек" будут использоваться псевдо-элементы. Первый пример В данном примере используется очень простая техника. Создается треугольник на рамке справа с помощью псевдо-элементов, размещаемых один над другим. Темный треугольник смещается, чтобы создать эффект рамки. Первый вариант дизайна "хлебных крошек" 01 #breadcrumbs-one{ 02 background: #eee; 03 border-width: 1px; 04 border-style: solid; 05 border-color: #f5f5f5 #e5e5e5 #ccc; 06 border-radius: 5px; 07 box-shadow: 0 0 2px rgba(0,0,0,.2); 08 overflow: hidden; 09 width: 100%; 10 } 11 12 #breadcrumbs-one li{ 13 float: left; 14 } 15 16 #breadcrumbs-one a{ 17 padding: .7em 1em .7em 2em; 18 float: left; 19 text-decoration: none; 20 color: #444; 21 position: relative; 22 text-shadow: 0 1px 0 rgba(255,255,255,.5); 23 background-color: #ddd; 24 background-image: linear-gradient(to right, #f5f5f5, #ddd); 25 } 26 27 #breadcrumbs-one li:first-child a{ 28 padding-left: 1em; 29 border-radius: 5px 0 0 5px; 30 } 31 32 #breadcrumbs-one a:hover{ 33 background: #fff; 34 } 35 36 #breadcrumbs-one a::after, 37 #breadcrumbs-one a::before{ 38 content: ""; 39 position: absolute; 40 top: 50%; 41 margin-top: -1.5em; 42 border-top: 1.5em solid transparent; 43 border-bottom: 1.5em solid transparent; 44 border-left: 1em solid; 45 right: -1em; 46 } 47 48 #breadcrumbs-one a::after{ 49 z-index: 2; 50 border-left-color: #ddd; 51 } 52 53 #breadcrumbs-one a::before{ 54 border-left-color: #ccc; 55 right: -1.1em; 56 z-index: 1; 57 } 58 59 #breadcrumbs-one a:hover::after{ 60 border-left-color: #fff; 61 } 62 63 #breadcrumbs-one .current, 64 #breadcrumbs-one .current:hover{ 65 font-weight: bold; 66 background: none; 67 } 68 69 #breadcrumbs-one .current::after, 70 #breadcrumbs-one .current::before{ 71 content: normal; 72 } Второй пример Формы CSS строятся с помощью псевдо-элементов, размещаемых перед и после элемента. Второй пример "хлебных крошек" 01 #breadcrumbs-two{ 02 overflow: hidden; 03 width: 100%; 04 } 05 06 #breadcrumbs-two li{ 07 float: left; 08 margin: 0 .5em 0 1em; 09 } 10 11 #breadcrumbs-two a{ 12 background: #ddd; 13 padding: .7em 1em; 14 float: left; 15 text-decoration: none; 16 color: #444; 17 text-shadow: 0 1px 0 rgba(255,255,255,.5); 18 position: relative; 19 } 20 21 #breadcrumbs-two a:hover{ 22 background: #99db76; 23 } 24 25 #breadcrumbs-two a::before{ 26 content: ""; 27 position: absolute; 28 top: 50%; 29 margin-top: -1.5em; 30 border-width: 1.5em 0 1.5em 1em; 31 border-style: solid; 32 border-color: #ddd #ddd #ddd transparent; 33 left: -1em; 34 } 35 36 #breadcrumbs-two a:hover::before{ 37 border-color: #99db76 #99db76 #99db76 transparent; 38 } 39 40 #breadcrumbs-two a::after{ 41 content: ""; 42 position: absolute; 43 top: 50%; 44 margin-top: -1.5em; 45 border-top: 1.5em solid transparent; 46 border-bottom: 1.5em solid transparent; 47 border-left: 1em solid #ddd; 48 right: -1em; 49 } 50 51 #breadcrumbs-two a:hover::after{ 52 border-left-color: #99db76; 53 } 54 55 #breadcrumbs-two .current, 56 #breadcrumbs-two .current:hover{ 57 font-weight: bold; 58 background: none; 59 } 60 61 #breadcrumbs-two .current::after, 62 #breadcrumbs-two .current::before{ 63 content: normal; 64 } Третий пример С помощью свойства border-radius скругляются углы прямоугольника и квадратов. Квадрат поворачивается, чтобы сделать из него бриллиант. Третий пример "хлебных крошек" 01 #breadcrumbs-three{ 02 overflow: hidden; 03 width: 100%; 04 } 05 06 #breadcrumbs-three li{ 07 float: left; 08 margin: 0 2em 0 0; 09 } 10 11 #breadcrumbs-three a{ 12 padding: .7em 1em .7em 2em; 13 float: left; 14 text-decoration: none; 15 color: #444; 16 background: #ddd; 17 position: relative; 18 z-index: 1; 19 text-shadow: 0 1px 0 rgba(255,255,255,.5); 20 border-radius: .4em 0 0 .4em; 21 } 22 23 #breadcrumbs-three a:hover{ 24 background: #abe0ef; 25 } 26 27 #breadcrumbs-three a::after{ 28 background: #ddd; 29 content: ""; 30 height: 2.5em; 31 margin-top: -1.25em; 32 position: absolute; 33 right: -1em; 34 top: 50%; 35 width: 2.5em; 36 z-index: -1; 37 transform: rotate(45deg); 38 border-radius: .4em; 39 } 40 41 #breadcrumbs-three a:hover::after{ 42 background: #abe0ef; 43 } 44 45 #breadcrumbs-three .current, 46 #breadcrumbs-three .current:hover{ 47 font-weight: bold; 48 background: none; 49 } 50 51 #breadcrumbs-three .current::after{ 52 content: normal; 53 } Четвертый пример С помощью псевдо-элементов добавляются два прямоугольника. Затем им скругляются углы. Четвертый пример "хлебных крошек" 01 #breadcrumbs-four{ 02 overflow: hidden; 03 width: 100%; 04 } 05 06 #breadcrumbs-four li{ 07 float: left; 08 margin: 0 .5em 0 1em; 09 } 10 11 #breadcrumbs-four a{ 12 background: #ddd; 13 padding: .7em 1em; 14 float: left; 15 text-decoration: none; 16 color: #444; 17 text-shadow: 0 1px 0 rgba(255,255,255,.5); 18 position: relative; 19 } 20 21 #breadcrumbs-four a:hover{ 22 background: #efc9ab; 23 } 24 25 #breadcrumbs-four a::before, 26 #breadcrumbs-four a::after{ 27 content:''; 28 position:absolute; 29 top: 0; 30 bottom: 0; 31 width: 1em; 32 background: #ddd; 33 transform: skew(-10deg); 34 } 35 36 #breadcrumbs-four a::before{ 37 38 left: -.5em; 39 border-radius: 5px 0 0 5px; 40 } 41 42 #breadcrumbs-four a:hover::before{ 43 background: #efc9ab; 44 } 45 46 #breadcrumbs-four a::after{ 47 right: -.5em; 48 border-radius: 0 5px 5px 0; 49 } 50 51 #breadcrumbs-four a:hover::after{ 52 background: #efc9ab; 53 } 54 55 #breadcrumbs-four .current, 56 #breadcrumbs-four .current:hover{ 57 font-weight: bold; 58 background: none; 59 } 60 61 #breadcrumbs-four .current::after, 62 #breadcrumbs-four .current::before{ 63 content: normal; 64 } Преимущества дизайна "хлебных крошек" на основе CSS3 Нет изображений, поэтому просто обновлять и поддерживать. Легко масштабируется. Обратная совместимость со старыми браузерами.