Хлебные крошки как у Google

Навигационное меню со ссылками, возможно, является наиболее важным компонентом на сайте. Ведь это является возможностью для пользователя перемещаться по страницам сайта и взаимодействовать с сайтом. Хлебные крошки это своего рода меню. С их помощью человек легко понимает где находится и понимает иерархию сайта. Похожий стиль меню использует Google.

В этом уроке мы создадим меню и хлебные крошки, которые будут красиво оформлены с помощью CSS3.

Пример можно увидеть здесь:

Посмотреть примерСкачать

HTML часть

В структуре документа нет ничего необычного, поэтому перейдем сразу к созданию хлебных крошек:

1 2 3 4 5 6 7 8

&lt,div id=breadcrumb&gt, &lt,ul class=crumbs&gt, &lt,li class=first&gt,&lt,a href=# style=z-index:9,&gt,&lt,span&gt,&lt,/span&gt,Главная&lt,/a&gt,&lt,/li&gt, &lt,li&gt,&lt,a href=# style=z-index:8,&gt,Архивы&lt,/a&gt,&lt,/li&gt, &lt,li&gt,&lt,a href=# style=z-index:7,&gt,Личное&lt,/a&gt,&lt,/li&gt, &lt,li&gt,&lt,a href=# style=z-index:6,&gt,Разное&lt,/a&gt,&lt,/li&gt, &lt,/ul&gt, &lt,/div&gt,

Основным контейнером, в котором содержатся все хлебные крошки является блок с идентификатором breadcrumb.

А также еще один вид хлебных крошек, которые не используют изображения:

1 2 3 4 5 6 7 8

&lt,div id=breadcrumb2&gt, &lt,ul class=crumbs2&gt, &lt,li class=first&gt,&lt,a href=#&gt,Главная&lt,/a&gt,&lt,/li&gt, &lt,li&gt,&lt,a href=#&gt,Архивы&lt,/a&gt,&lt,/li&gt, &lt,li&gt,&lt,a href=#&gt,Личное&lt,/a&gt,&lt,/li&gt, &lt,li class=last&gt,&lt,a href=#&gt,Разное&lt,/a&gt,&lt,/li&gt, &lt,/ul&gt, &lt,/div&gt,

CSS часть

Сперва пропишем стили для хлебных крошек, которые используют изображение:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

.crumbs display: block, .crumbs li display: inline, .crumbs li.first padding-left: 8px, .crumbs li a, .crumbs li a:link, .crumbs li a:visited color: #666, display: block, float: left, font-size: 12px, margin-left: -13px, padding: 7px 17px 11px 25px, position: relative, text-decoration: none, .crumbs li a background-image: url’../img/bg-crumbs.png’, background-repeat: no-repeat, background-position: 100% 0, position: relative, .crumbs li a:hover color: #333, background-position: 100% -48px, cursor: pointer, .crumbs li a:active color: #333, background-position: 100% -96px, .crumbs li.first a span height: 29px, width: 3px, border-left: 1px solid #d9d9d9, position: absolute, top: 0px, left: 0px,

А сейчас зададим стили для хлебных крошек без изображений(их будет чуть больше):

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92

.crumbs2 display: block, margin-left: -13px, padding: 0, .crumbs2 li display: inline, .crumbs2 li a, .crumbs2 li a:link, .crumbs2 li a:visited color: #666, display: block, float: left, font-size: 12px, padding: 7px 16px 7px 19px, position: relative, text-decoration: none, border: 1px solid #d9d9d9, border-right-width: 0px, .crumbs2 li a background-image: -webkit-gradientlinear,left bottom,left top, color-stop0.45, rgb241,241,241, color-stop0.73, rgb245,245,245, background-image: -moz-linear-gradient center bottom, rgb241,241,241 45%, rgb245,245,245 73%, /* IE 5.5 – 7 */ filter: progid:DXImageTransform.Microsoft.gradientstartColorstr=#f1f1f1, endColorstr=#f5f5f5, /* IE 8 */ -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f1f1f1, endColorstr=#f5f5f5), .crumbs2 li.first a border-top-left-radius: 5px, -moz-border-radius-topleft: 5px, – webkit-border-top-left-radius: 5px, .crumbs2 li.last a border-right-width: 1px, border-bottom-right-radius: 5px, -moz-border-radius-bottomright: 5px, -webkit-border-bottom-right-radius: 5px, .crumbs2 li a:hover border-top-color: #c4c4c4, border-bottom-color: #c4c4c4, background-image: -webkit-gradientlinear,left bottom,left top, color-stop0.45, rgb241,241,241, color-stop0.73, rgb248,248,248, background-image: -moz-linear-gradient center bottom, rgb241,241,241 45%, rgb248,248,248 73%, /* IE 5.5 – 7 */ filter: progid:DXImageTransform.Microsoft.gradientstartColorstr=#f8f8f8, endColorstr=#f1f1f1, /* IE 8 */ -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8, endColorstr=#f1f1f1), color: #333, -moz-box-shadow: 0px 2px 2px #e8e8e8, -webkit-box-shadow: 0px 2px 2px #e8e8e8, box-shadow: 0px 2px 2px #e8e8e8, .crumbs2 li a:active border-top-color: #c4c4c4, border-bottom-color: #c4c4c4, background-image: -webkit-gradientlinear,left bottom,left top, color-stop0.45, rgb224,224,224, color-stop0.73, rgb235,235,235, background-image: -moz-linear-gradient center bottom, rgb224,224,224 45%, rgb235,235,235 73%, /* IE 5.5 – 7 */ filter: progid:DXImageTransform.Microsoft.gradientstartColorstr=#ebebeb, endColorstr=#e0e0e0, /* IE 8 */ -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ebebeb, endColorstr=#e0e0e0), color: #333, box-shadow: -1px 1px 1px 0px #dadada inset, -webkit-box-shadow: -1px 1px 1px 0px #dadada inset, -moz-box-shadow: -1px 1px 1px 0px #dadada inset,

Возможно для вас будет чем-то новым данная запись color-stop(0.45, rgb(224,224,224)). Она задает точку перехода, в которой цвет меняется. И с помощью таких точек можно сделать красивый градиент без использования изображений.