Exore LTD » CSS3 » «Хлебные крошки» как у Google
Лого SiteHere.ru

Июль 16, 2014 Запись была обновлена

Время чтения: 2 мин. Прочитать позже

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

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

Навигационное меню со ссылками, возможно, является наиболее важным компонентом на сайте. Ведь это является возможностью для пользователя перемещаться по страницам сайта и взаимодействовать с сайтом. Хлебные крошки — это своего рода меню. С их помощью человек легко понимает где находится и понимает иерархию сайта. Похожий стиль меню использует 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-gradient(linear,left bottom,left top,
                                           color-stop(0.45, rgb(241,241,241)),
                                           color-stop(0.73, rgb(245,245,245)));
 
	background-image: -moz-linear-gradient( center bottom, 
                                                rgb(241,241,241) 45%, 
                                                rgb(245,245,245) 73%);
	/* IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#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-gradient(linear,left bottom,left top,
                                           color-stop(0.45, rgb(241,241,241)),
                                           color-stop(0.73, rgb(248,248,248)));
	background-image: -moz-linear-gradient( center bottom, 
                                                rgb(241,241,241) 45%, 
                                                rgb(248,248,248) 73%);
	/* IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#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-gradient(linear,left bottom,left top,
                                           color-stop(0.45, rgb(224,224,224)),
                                           color-stop(0.73, rgb(235,235,235)));
	background-image: -moz-linear-gradient( center bottom, 
                                                rgb(224,224,224) 45%, 
                                                rgb(235,235,235) 73%);
	/* IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#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))«. Она задает точку перехода, в которой цвет меняется. И с помощью таких точек можно сделать красивый градиент без использования изображений.



Вывод

Красивый стиль для «хлебных крошек». Но в таком стиле можно сделать и простое меню, оно также будет выглядеть неплохо — решать вам! 🙂


Успехов!

Источник: http://www.hongkiat.com/blog/breadcrumb-menu-css3/

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

7 комментариев к записи
  • Николай

    Я не пойму, зачем мне нужны хлебные крошки, если меню сайта направляет посетителя в нужное место — новости, обо мне, главная и т.п. Разве это не одно и то же?

     
    Ответить
    • Юрий

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

       
      Ответить
  • Вера

    Спасибо, Юрий за очередную информативную статью. Кстати, о форуме. Подскажите, пожалуйста, что именно нужно написать в файле style.css и, может быть где-то что-то ещё??? Ситуация такая. На отдельной странице создан форум с помощью плагина mingle-forum, так же создана копия страницы page.php и названа pageforum.php. Нужно убрать сайдбар, чтобы форум располагался по ширине всей страницы. Где и как это нужно написать? Я чего только и где только не сочиняла, но ничего не получается.
    Попутно вторая проблема: тему для форума бросаю в нужную папку, но в скинах плагина она выглядит как чистый белый лист и на странице форума отображает лишь надписи. Единственный скин, присутствовавший по умолчанию, делает страницу немного похожей на форум, но хотелось бы его цвета немножно подправить, но где он спрятан — для меня загадка, чего-то я его никак не могу найти.
    Спасибки!

     
    Ответить
    • Юрий

      Вера, напишите мне на e-mail: nemetsyuriy@gmail.com.

       
      Ответить
      • Вера

        Юра, огромнейшее спасибо за помощь!!! Без Вас бы у меня ничего никогда не получилось.

         
        Ответить
  • Кирилл

    Спасибо за стили хлебных крох, очень добротно выглядят 🙂

     
    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *