Навигационное меню со ссылками, возможно, является наиболее важным компонентом на сайте. Ведь это является возможностью для пользователя перемещаться по страницам сайта и взаимодействовать с сайтом. Хлебные крошки это своего рода меню. С их помощью человек легко понимает где находится и понимает иерархию сайта. Похожий стиль меню использует Google.
В этом уроке мы создадим меню и хлебные крошки, которые будут красиво оформлены с помощью CSS3.
Пример можно увидеть здесь:
Посмотреть примерСкачать
HTML часть
В структуре документа нет ничего необычного, поэтому перейдем сразу к созданию хлебных крошек:
1 2 3 4 5 6 7 8 | <,div id=breadcrumb>, <,ul class=crumbs>, <,li class=first>,<,a href=# style=z-index:9,>,<,span>,<,/span>,Главная<,/a>,<,/li>, <,li>,<,a href=# style=z-index:8,>,Архивы<,/a>,<,/li>, <,li>,<,a href=# style=z-index:7,>,Личное<,/a>,<,/li>, <,li>,<,a href=# style=z-index:6,>,Разное<,/a>,<,/li>, <,/ul>, <,/div>, |
Основным контейнером, в котором содержатся все хлебные крошки является блок с идентификатором breadcrumb.
А также еще один вид хлебных крошек, которые не используют изображения:
1 2 3 4 5 6 7 8 | <,div id=breadcrumb2>, <,ul class=crumbs2>, <,li class=first>,<,a href=#>,Главная<,/a>,<,/li>, <,li>,<,a href=#>,Архивы<,/a>,<,/li>, <,li>,<,a href=#>,Личное<,/a>,<,/li>, <,li class=last>,<,a href=#>,Разное<,/a>,<,/li>, <,/ul>, <,/div>, |
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)). Она задает точку перехода, в которой цвет меняется. И с помощью таких точек можно сделать красивый градиент без использования изображений.
Вывод
Красивый стиль для хлебных крошек. Но в таком стиле можно сделать и простое меню, оно также будет выглядеть неплохо решать вам! 🙂