"Хлібні крихти" як у google

Відео: Хлібні крихти Wordpress без плагіна - Костянтин Хмельов

Навігаційне меню з посиланнями, можливо, є найбільш важливим компонентом на сайті. Адже це є можливістю для користувача переміщатися по сторінках сайту і взаємодіяти з сайтом. Хлібні крихти - це свого роду меню. З їх допомогою людина легко розуміє де знаходиться і розуміє ієрархію сайту. Схожий стиль меню використовує Google.

У цьому уроці ми створимо меню і хлібні крихти, які будуть красиво оформлені за допомогою CSS3.

Приклад можна побачити тут:

Відео: Як розмістити "хлібні крихти" за допомогою плагіна Yoast SEO?

Подивитися прімерСкачать

HTML частина

У структурі документа немає нічого незвичайного, тому перейдемо відразу до створення «хлібних крихт»:

12345678

lt;div id="Breadcrumb"gt;lt;ul class="Crumbs"gt;lt;li class="First"gt; lt;a href="#" style="Z-index: 9;"gt; lt;spangt; lt;/spangt; Головнаlt;/agt; lt;/ligt;lt;ligt; lt;a href="#" style="Z-index: 8;"gt; Архівиlt;/agt; lt;/ligt;lt;ligt; lt;a href="#" style="Z-index: 7;"gt; Приватнеlt;/agt; lt;/ligt;lt;ligt; lt;a href="#" style="Z-index: 6"gt; Різнеlt;/agt; lt;/ligt;lt;/ulgt;lt;/divgt;

Основним контейнером, в якому містяться всі «хлібні крихти» є блок з ідентифікатором breadcrumb.

Відео: Уроки WordPress. Хлібні крихти - https://wp-voprosov.net

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

12345678

lt;div id="Breadcrumb2"gt;lt;ul class="Crumbs2"gt;lt;li class="First"gt; lt;a href="#"gt; Головнаlt;/agt; lt;/ligt;lt;ligt; lt;a href="#"gt; Архівиlt;/agt; lt;/ligt;lt;ligt; lt;a href="#"gt; Приватнеlt;/agt; lt;/ligt;lt;li class="Last"gt; lt;a href="#"gt; Різнеlt;/agt; lt;/ligt;lt;/ulgt;lt;/divgt;

CSS частина

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

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849

.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.jpg`)-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-}

А зараз поставимо стилі для «хлібних крихт» без зображень (їх буде трохи більше):

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192

.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))«. Вона задає точку переходу, в якій колір змінюється. І за допомогою таких точок можна зробити красивий градієнт без використання зображень.