Хлебные крошки на CSS и HTML
Девять разных красивых реализаций хлебных крошек (Breadcrumbs) для сайта.Как реализовать:
1. Разметка html (Разберём вариант #7)
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<section> <h2>7 - Basic Multi-Steps with Custom Icons</h2> <nav> <ol class="cd-multi-steps text-center custom-icons"> <li class="visited"><a href="#0">Cart</a></li> <li class="visited"><a href="#0">Billing</a></li> <li class="current"><em>Delivery</em></li> <li><em>Review</em></li> </ol> </nav> </section> |
2. Стили 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 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 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 |
.cd-breadcrumb, .cd-multi-steps { width: 90%; max-width: 768px; padding: 0.5em 1em; margin: 1em auto; background-color: #edeff0; border-radius: .25em; } .cd-breadcrumb:after, .cd-multi-steps:after { content: ""; display: table; clear: both; } .cd-breadcrumb li, .cd-multi-steps li { display: inline-block; float: left; margin: 0.5em 0; } .cd-breadcrumb li::after, .cd-multi-steps li::after { /* this is the separator between items */ display: inline-block; content: '\\00bb'; margin: 0 .6em; color: #959fa5; } .cd-breadcrumb li:last-of-type::after, .cd-multi-steps li:last-of-type::after { /* hide separator after the last item */ display: none; } .cd-breadcrumb li > *, .cd-multi-steps li > * { /* single step */ display: inline-block; font-size: 1.4rem; color: #2c3f4c; } .cd-breadcrumb li.current > *, .cd-multi-steps li.current > * { /* selected step */ color: #96c03d; } .no-touch .cd-breadcrumb a:hover, .no-touch .cd-multi-steps a:hover { /* steps already visited */ color: #96c03d; } .cd-breadcrumb.custom-separator li::after, .cd-multi-steps.custom-separator li::after { /* replace the default arrow separator with a custom icon */ content: ''; height: 16px; width: 16px; background: url(../img/cd-custom-separator.svg) no-repeat center center; vertical-align: middle; } .cd-breadcrumb.custom-icons li > *::before, .cd-multi-steps.custom-icons li > *::before { /* add a custom icon before each item */ content: ''; display: inline-block; height: 20px; width: 20px; margin-right: .4em; margin-top: -2px; background: url(../img/cd-custom-icons-01.svg) no-repeat 0 0; vertical-align: middle; } .cd-breadcrumb.custom-icons li:not(.current):nth-of-type(2) > *::before, .cd-multi-steps.custom-icons li:not(.current):nth-of-type(2) > *::before { /* change custom icon using image sprites */ background-position: -20px 0; } .cd-breadcrumb.custom-icons li:not(.current):nth-of-type(3) > *::before, .cd-multi-steps.custom-icons li:not(.current):nth-of-type(3) > *::before { background-position: -40px 0; } .cd-breadcrumb.custom-icons li:not(.current):nth-of-type(4) > *::before, .cd-multi-steps.custom-icons li:not(.current):nth-of-type(4) > *::before { background-position: -60px 0; } .cd-breadcrumb.custom-icons li.current:first-of-type > *::before, .cd-multi-steps.custom-icons li.current:first-of-type > *::before { /* change custom icon for the current item */ background-position: 0 -20px; } .cd-breadcrumb.custom-icons li.current:nth-of-type(2) > *::before, .cd-multi-steps.custom-icons li.current:nth-of-type(2) > *::before { background-position: -20px -20px; } .cd-breadcrumb.custom-icons li.current:nth-of-type(3) > *::before, .cd-multi-steps.custom-icons li.current:nth-of-type(3) > *::before { background-position: -40px -20px; } .cd-breadcrumb.custom-icons li.current:nth-of-type(4) > *::before, .cd-multi-steps.custom-icons li.current:nth-of-type(4) > *::before { background-position: -60px -20px; } @media only screen and (min-width: 768px) { .cd-breadcrumb, .cd-multi-steps { padding: 0 1.2em; } .cd-breadcrumb li, .cd-multi-steps li { margin: 1.2em 0; } .cd-breadcrumb li::after, .cd-multi-steps li::after { margin: 0 1em; } .cd-breadcrumb li > *, .cd-multi-steps li > * { font-size: 1.6rem; } } @media only screen and (min-width: 768px) { .no-touch .cd-breadcrumb.triangle.custom-icons li:first-of-type a:hover::before, .cd-breadcrumb.triangle.custom-icons li.current:first-of-type em::before, .no-touch .cd-multi-steps.text-center.custom-icons li:first-of-type a:hover::before, .cd-multi-steps.text-center.custom-icons li.current:first-of-type em::before { /* change custom icon using image sprites - hover effect or current item */ background-position: 0 -40px; } .no-touch .cd-breadcrumb.triangle.custom-icons li:nth-of-type(2) a:hover::before, .cd-breadcrumb.triangle.custom-icons li.current:nth-of-type(2) em::before, .no-touch .cd-multi-steps.text-center.custom-icons li:nth-of-type(2) a:hover::before, .cd-multi-steps.text-center.custom-icons li.current:nth-of-type(2) em::before { background-position: -20px -40px; } .no-touch .cd-breadcrumb.triangle.custom-icons li:nth-of-type(3) a:hover::before, .cd-breadcrumb.triangle.custom-icons li.current:nth-of-type(3) em::before, .no-touch .cd-multi-steps.text-center.custom-icons li:nth-of-type(3) a:hover::before, .cd-multi-steps.text-center.custom-icons li.current:nth-of-type(3) em::before { background-position: -40px -40px; } .no-touch .cd-breadcrumb.triangle.custom-icons li:nth-of-type(4) a:hover::before, .cd-breadcrumb.triangle.custom-icons li.current:nth-of-type(4) em::before, .no-touch .cd-multi-steps.text-center.custom-icons li:nth-of-type(4) a:hover::before, .cd-multi-steps.text-center.custom-icons li.current:nth-of-type(4) em::before { background-position: -60px -40px; } } |
Готово!
