Контакти
Головна › ›

Красиві хлібні крихти "breadcrumbs" на CSS. Breadcrumbs у web-дизайні: застосування та приклади Додаємо прозорість з border

Collection of free HTML and CSS breadcrumb navigation code examples: simple, responsive, multiline, collapsed, etc. Update of February 2018 collection. 3 нові елементи.

Related Articles


About the code

Simple CSS.


About the code

Feel free to customize it to your own way. Colors, sizes, shadows, borders, etc. Made with Bootstrap.


About the code

Breadcrumbs with "Smart" Ellipsis (Flex)

Play with browser size to see how the behave when there's no room left for them.


About the code

Цей приклад показує, що happens as user gets closer to the back button. Залізні кубики розширюються і дозволяють користувачеві навігації до майже будь-якого місця, в якому курси, коли тільки мають мінімальний impact on space.

Breadcrumbs with CSS custom properties as API.
Made by Stas Melnikov
June 15, 2017

Adaptive multi-line pure CSS breadcrumb arrows.
Made by Glynn Smith
May 30, 2017

Demo GIF: Breadcrumbs

HTML і CSS бризкубки.
Made by Dany Santos
July 15, 2016

Material Design breadcrumb, progress tracker.
Made by Shyam Chen
July 30, 2015

List of breadcrumbs collapsed down to show тільки попередній перегляд тексту для всіх, але поточна сторінка, з повним текстом показують на ходу/фокус.
Made by Skye
March 4, 2015

Pure CSS відповідні бризки.
Made by Oliver Knoblich
April 2, 2014

Останнім часом CSS і CSS3 сильно просунулися вперед і тому старі стилі, які використовують картинки на задньому фоні для отримання потрібної фігури більше не потрібні.

У цій статті я розповім як зробити хлібні крихти на сайті за допомогою HTML та CSS у стилі flat. Так само можете подивитися цікаві сайтів, може щось нагоді. Я нещодавно робив добірку.

Наприкінці ми отримаємо такий результат:

Раніше, щоб зробити прозору стрілки між двома блоками використовувалася прозора картинка на задньому фоні. Тепер цю проблему можна вирішити, використовуючи лише CSS.

1. Каркас крихт

  • Breadcrumb

Для початку створимо маркований список.

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

    2. Додаємо CSS

    Тепер напишемо CSS, щоб виглядало як тут:

    #crumbs ul li a ( display: block; float: left; height: 50px; background: #3498db; text-align: center; padding: 30px 40px 0 40px; position: relative; margin: 0 10px 0 0; font-size : 20px;text-decoration: none;color: #fff;

    Дані стилі додають:

    1. вид для посилання у вигляді блоку та синій колір
    2. центруємо текст і робимо його білим
    3. рівний paddingщоб блок відображався коректно по вертикалі
    4. скидає інші стилі для посилань з text-decoration: none

    Увага: position: relativeдоданий для того, щоб пізніше стримувати всі внутрішні блоки з position: absolute.

    3. Створюємо ефект стрілки

    #crumbs ul li a:after ( content: ""; border-top: 40px solid red; border-bottom: 40px solid red; border-left: 40px solid blue; position: absolute; right: -40px; top: 0; )

    Для створення стрілок ми будемо використовувати властивість :after, що дозволяє створювати додатковий елемент після батьків. Додаємо йому position: absolute— для цього ми й робили positive: relativeдля посилань , щоб утримати absoluteвластивість усередині посилання та маніпулювати їм як нам хочеться.

    Вигляд стрілки буде зроблено за допомогою border'ів. У прикладі спеціально використаний червоний колір, але щоб надати вигляду трикутника буде використовуватися transparent. Далі borderбуде підсунутий на місці з використання position: absolute.

    4. Додаємо прозорість з border

    Змінюємо redв borderна transparent, щоб створити ефект прозорості.

    Border-top: 40px solid transparent; border-bottom: 40px solid transparent; border-left: 40px solid #3498db;

    5. Додаємо стрілку ззаду

    #crumbs ul li a:before ( content: ""; border-top: 40px solid transparent; border-bottom: 40px solid transparent; border-left: 40px solid #d4f2ff; position: absolute; left: 0; top: 0; )

    Використовуючи той самий принцип, як і в третьому етапі, можна створити прозорий трикутник позаду блоку. Колір borderмає бути поставлений як і задній колір сайту, щоб створювався ефект прозорості.

    Padding: 30px 40px 0 80px;

    5. Додаємо нові елементи

    Додаючи нові

  • збільшують глибину хлібної крихти.

    • Один
    • Два
    • Три
    • Чотири
    • П'ять

    6. Перший та останній

  • Щоб створити ефект заокруглення для першого та останнього елемента у хлібній крихті ми будемо використовувати :first-childі : Last-child.

    #crumbs ul li:first-child a ( border-top-left-radius: 10px; border-bottom-left-radius: 10px; ) #crumbs ul li:first-child a:before ( display: none; ) #crumbs ul li:last-child a ( padding-right: 80px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; ) #crumbs ul li:last-child a:after ( display: none ;)

    7. Додаємо hover ефект

    #crumbs ul li a:hover ( background: #fa5ba5; ) #crumbs ul li a:hover:after ( border-left-color: #fa5ba5; )

    Також не забудьте додати border-radiusпри наведенні на перший та останній елемент у хлібній крихті.

    На цьому все. Якщо у вас є якісь питання – пишіть коментарі та поділіться статтею, якщо вам сподобалося!

    Як зробити хлібні крихти на сайті за допомогою CSS від bologer

    Завдяки розвитку CSS і CSS3 за останні роки ми досягли моменту, коли багато старих програмних рішень, що включають фонові зображення, тепер можуть бути створені повністю на CSS. У цьому уроці ми розглянемо створення послідовності посилань навігації, яка називається «хлібними крихтами», в плоскому стилі, без необхідності в раніше популярному методі роботи з фоновим зображенням, що називається методом «розсувних дверей».

    "Хлібні крихти", які ми створимо, стилізовані у формі шевронів, щоб візуалізувати ідею структурованого вмісту. Раніше ми використовували фонове зображення у форматі PNG, щоб створити цю форму шеврона, а тепер за допомогою хитрої техніки кордонів можна створити такий самий ефект, використовуючи лише CSS.

    Ми розпочнемо зі створення посилань навігації «хлібних крихт» як ненумерованого списку. Кожна «хлібна крихта» буде елементом

  • із встановленим елементом якоря.

    #crumbs ul li a (display: block; float: left; height: 50px; background: #3498db; text-align: center; padding: 30px 40px 0 40px; position: relative; mar0: ; : 20px ;text-decoration : none ;color : #fff ; )

    Початковий код CSS визначає кожному якорю елемента списку стиль акуратного синього прямокутника. Текст розташований у центрі, і рівні внутрішні відступи додані з усіх боків. Для того, щоб позиціонувати наступні елементи, цим елементам додано властивість position: relative;, щоб ті абсолютно спозиціоновані елементи відображалися щодо цього батьківського елемента.

    #crumbs ul li a:after ( content : "" ; border-top : 40px solid red ; border-bottom : 40px solid red ; )

    Тепер ми створимо ефект шеврона CSS, що раніше було досягнуто тільки з використанням фонового зображення. Використовуйте селектор:after, щоб створити додатковий елемент, якому можна встановити стилі. Трикутна форма створена за допомогою різних меж CSS, так що як Ви можете бачити в попередньому зображенні, блакитний трикутник може бути створений, застосовуючи межі верху та низу, щоб перетнути область накриття. Ці межі забарвлені червоним для наочності, але якщо вони будуть прозорими, то вийде блакитний трикутник. Цей ефект кордону потім пересувається своє місце з допомогою абсолютного позиціонування.

    Border-top: 40px solid transparent; border-bottom: 40px solid transparent; border-left: 40px solid #3498db;

    Ефект кордону з правильними значеннями кольору створить бажаний трикутник, який надасть «хлібним крихтам» популярної форми шеврона.

    #crumbs ul li a:before ( content : "" ; border-top : 40px solid transparent ; border-bottom : 40px solid transparent ; )

    Використовуючи ті самі принципи, інша трикутна форма може бути застосована до лівої частини «хлібної крихти». Цього разу задано такий же колір кордону, як і колір фону, щоб приховати частини блакитного кольору фонового посилання.

    Padding : 30px 40px 0 80px ;

    У міру додавання посилань в HTML, послідовність «хлібних крихт» збільшується, вони розділені цікавої форми шевронами завдяки трикутному ефекту меж CSS і невеликому правому зовнішньому відступу.

    #crumbs ul li:first-child a ( border-top-left-radius: 10px ; border-bottom-left-radius: 10px ; ) #crumbs ul li:first-child a:before ( display : none ; ) #crumbs ul li:last-child a ( padding-right : 80px ; border-top-right-radius: 10px ; border-bottom-right-radius: 10px ; ) #crumbs ul li:last-child a:after ( display : none ;)

    Повний блок «хлібних крихт» може бути стилізований далі шляхом видалення ефекту трикутника з першого і останнього елементів за допомогою селекторів: first-child і: last-child , після чого можна надати невелике округлення кутам за допомогою властивості border-radius.

    #crumbs ul li a:hover ( background : #fa5ba5 ; ) #crumbs ul li a:hover :after ( border-left-color : #fa5ba5 ; )

    Все, що залишилося, - застосувати до посилань ефект, що виникає при наведенні покажчика миші. Не забудьте змінити значення властивості border-left-color для ефекту трикутника в стані, що виникає при наведенні покажчика миші, щоб вся «хлібна крихта» змінила колір.

    Переклад - Чергування

    Вітаю вас. Хлібні крихти - це досить корисний блок на будь-якому сайті, тому що він дозволяє вам бачити повний шлях до сторінки, на якій ви зараз. І сьогодні я вам розповім, як оформити у css хлібні крихти? Чи не створити, а саме оформити. Взагалі варіантів багато, я торкнуся двох.

    Простий варіант оформлення – без картинки

    HTml-код імітує хлібні крихти. Нехай він буде таким:

    В принципі можна просто проставити кутову дужку, але тоді не буде можливості керувати товщиною лінії. Я пропоную зробити по-іншому за допомогою трансформацій. Ось такий код це зробить:

    Cumbs1 a:not(:last-child):after(
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    Border-top: 2px solid black;
    border-right: 2px solid black;
    transform: rotate(45deg);
    margin-left: 5px
    }
    .cumbs1 a:hover(
    color: orange;
    }

    Можливо, для вас це будуть складні селектори, тоді ознайомтеся з цією статтею. Суть така: за допомогою псевдоелемента (про те, що це і як використовувати -) after додає в кінець кожного посилання наш роздільник. Він формується за допомогою двох рамок та повороту на 45 градусів. Також додаємо помаранчевий колір посиланням наведення. Ось, в принципі, і все оздоблення.

    Інший варіант оформлення - з картинкою

    У цьому випадку хлібні крихти виглядатимуть цікавіше, ось так:

    Для цього нам знадобиться картинка та трохи стилів у css:

    Cumbs2(
    background: orange;
    max-width: 250px;
    }
    .cumbs2 a(
    display: inline-block;
    padding: 7px 0;
    color: #000;
    }
    .cumbs2 a:not(:last-child)(
    background: url(arrow.png) no-repeat 100% 50%;
    padding-right: 33px;
    }

    Html код я не наводжу, тому що він такий самий, як у першому випадку. З чого тут розпочати? По-перше, визначаємо фоновий колір та розміри всього блоку з хлібними крихтами. Далі встановлюємо загальні стилі для посилань - блочно-рядковий тип, відступи зверху та внизу та колір.

    Наступний етап найцікавіший - за допомогою псевдокласу not вибираємо всі посилання в блоці, крім останньої, і ставимо для них фонове зображення arrow.png , без повторення, з позицією фону посередині по висоті і в кінці по ширині одного посилання. Внутрішній відступ праворуч першим двом посиланням потрібний саме для того, щоб розмістити там картинку. Якби його не було, картинка наїжджала б на текст.

    Як працює псевдоклас not, я думаю, ви вже здогадалися - він обирає всі елементи, крім того, що вказується у дужках. Якщо що, в майбутньому я напишу ще невелику замітку про роботу з псевдокласом: де все буде зрозуміліше. Що ж, ось такі 2 простих варіанти оформлення хлібних крихт, на основі яких ви можете зробити свій власний.

    Гарна та оригінальна добірка на хлібні крихти, що виконані у плоскому дизайні, з використанням CSS3, на різну палітру відтінків. Безумовно видимість навігацій, вигляді кнопок чудово допомагає як користувачу сайту, так і гостям, це орієнтуватися на інтернет ресурсі, де можна переходити за ключовими фразами, що нам виводитимуть. Але і під стилістику відмінно підходить, все більше можна помітити, що деякі встановлюють модуль форуму, не кажучи про сучасний дизайн.

    Якщо у вас, як ви вважаєте багато матеріалу, тут рекомендовано підключити цей функціонал. Стиль списку не буде, щоб уникнути чорної точки списку або іншого стилю, який за промовчанням. Так як він розподіляє його за категоріями та безумовно модулями, починаючи з головної сторінки, і все це подається на стильному вигляді. У цьому матеріалі ви спостерігаєте добірку, яка зроблена за стилістикою аналогічно, це в плоскому стилі.

    Ось за формою вони абсолютно різні, що комусь навіть не потрібно буде редагувати під власний дизайн, тому що він відмінно впишеться в нього. Тепер ми будемо використовувати код css, щоб зробити прив'язку першого списку і встановити прив'язку останньої дитини, щоб зробити його за замовчуванням, щоб tringle не з'являвся у прив'язці першої дитини для якоря зліва та останньої дитини для правої сторони.

    Оформлення хлібних крихт

    1. У світло-жовтому відтінку:

    2. Світла палітра із зеленою гамою:

    3. У малиновому кольорі

    4. Виконаний у синій палітрі:

    Це буде простий прямий список з фоном та доповненням та деякими іншими стилями. Після цього я створюю трикутну структуру у правій частині кожного анкера списку, використовуючи CSS, граючи з властивостями broder.

    Як можете бачити в demo версії, коли наводимо на скрині пані будь-який анкер списку, він дає ефект, що буде означати, відвіданий або знаходитесь в цьому розділі.

    Або ми можемо уявити його ефект, щоб зробити його активним як активні панірувальні сухарі. Ви можете сказати ці панірувальні сухарі css тільки сухарі, тому що я буду використовувати тільки css і css3, щоб зробити ці панірувальні сухарі.

    Приступаємо до встановлення:





    CSS

    Стиль списку не буде, щоб уникнути чорної точки списку або іншого стилю, який за промовчанням. Кожен список inline div буде list-inline, щоб зробити його горизонтальним списком, використовуючи css display: list-inline.

    #breadcrumb-isanchogives1 (
    text-align: center;
    margin-top:30px;
    }

    #breadcrumb-isanchogives1 ul (
    list-style: none;
    display: inline-table;
    }
    #breadcrumb-isanchogives1 ul li (
    display: inline;
    }

    #breadcrumb-isanchogives1 ul li a (
    display: block;
    float: left;
    height: 50px;
    background: #ffd928;
    text-align: center;
    padding: 30px 40px 0 80px;
    position: relative;
    margin: 0 10px 0 0;

    Font-size: 20px;
    text-decoration: none;
    color: #fff;

    }
    #breadcrumb-isanchogives1 ul li a:after (
    content: "";

    border-left: 40px solid #ffd928;
    z-index: 1;

    #breadcrumb-isanchogives1 ul li a:before (
    content: "";
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;

    }

    #breadcrumb-isanchogives1 ul li:first-child a (
    }
    #breadcrumb-isanchogives1 ul li:first-child a:before (
    display: none;
    }

    #breadcrumb-isanchogives1 ul li:last-child a (
    padding-right: 80px;
    }
    #breadcrumb-isanchogives1 ul li:last-child a:after (
    display: none;
    }

    #breadcrumb-isanchogives1 ul li a:hover (
    background: #ff9a2d;
    }
    #breadcrumb-isanchogives1 ul li a.wesove-readcrum(
    background: #ff9a2d;
    }
    #breadcrumb-isanchogives1 ul li a:hover:after (
    border-left-color: #ff9a2d;
    }
    #breadcrumb-isanchogives1 ul li a.wesove-readcrum:after (
    border-left-color: #ff9a2d;
    }

    #breadcrumb-isanchogives2 (
    text-align: center;
    margin-top:30px;
    }

    #breadcrumb-isanchogives2 ul (
    list-style: none;
    display: inline-table;
    }
    #breadcrumb-isanchogives2 ul li (
    display: inline;
    }

    #breadcrumb-isanchogives2 ul li a (
    display: block;
    float: left;
    height: 50px;
    background: #56e9ae;
    text-align: center;
    padding: 30px 40px 0 80px;
    position: relative;
    margin: 0 10px 0 0;

    Font-size: 20px;
    text-decoration: none;
    color: #fff;

    }
    #breadcrumb-isanchogives2 ul li a:after (
    content: "";
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 40px solid #56e9ae;
    position: absolute; right: -40px; top: 0;
    z-index: 1;

    #breadcrumb-isanchogives2 ul li a:before (
    content: "";
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 40px solid #f2f2f2;
    position: absolute; left: 0; top: 0;
    }

    #breadcrumb-isanchogives2 ul li:first-child a (
    }

    #breadcrumb-isanchogives2 ul li:last-child a (
    padding-right: 80px;
    }

    #breadcrumb-isanchogives2 ul li a:hover (
    background: #49c593;
    }
    #breadcrumb-isanchogives2 ul li a.wesove-readcrum (
    background: #49c593;
    }
    #breadcrumb-isanchogives2 ul li a:hover:after (
    border-left-color: #49c593;
    }
    #breadcrumb-isanchogives2 ul li a.wesove-readcrum:after (
    border-left-color: #49c593;
    }

    #breadcrumb-isanchogives3 (
    text-align: center;
    margin-top:30px;
    }

    #breadcrumb-isanchogives3 ul (
    list-style: none;
    display: inline-table;
    }
    #breadcrumb-isanchogives3 ul li (
    display: inline;
    }

    #breadcrumb-isanchogives3 ul li a (
    display: block;
    float: left;
    height: 50px;
    background: #ff818b;
    text-align: center;
    padding: 30px 40px 0 80px;
    position: relative;
    margin: 0 10px 0 0;

    Font-size: 20px;
    text-decoration: none;
    color: #fff;

    }
    #breadcrumb-isanchogives3 ul li a:after (
    content: "";
    height:80px;
    width:40px;
    background: #ff818b;
    position: absolute; right: -40px; top: 0;
    z-index: 1;

    #breadcrumb-isanchogives3 ul li a:before (
    content: "";
    height:80px;
    width:40px;
    border-radius:0px 40px 40px 0px;
    background:#f2f2f2;
    position: absolute; left: 0; top: 0;
    }

    #breadcrumb-isanchogives3 ul li:first-child a (
    border-top-left-radius: 10px; border-bottom-left-radius: 10px;
    }
    #breadcrumb-isanchogives3 ul li:first-child a:before (
    display: none;
    }

    #breadcrumb-isanchogives3 ul li:last-child a (
    padding-right: 80px;
    border-top-right-radius: 10px; border-bottom-right-radius: 10px;
    }
    #breadcrumb-isanchogives3 ul li:last-child a:after (
    display: none;
    }

    #breadcrumb-isanchogives3 ul li a:hover (
    background: #ea606b;
    }
    #breadcrumb-isanchogives3 ul li a.wesove-readcrum (
    background: #ea606b;
    }
    #breadcrumb-isanchogives3 ul li a:hover:after (
    background: #ea606b;
    }
    #breadcrumb-isanchogives3 ul li a.wesove-readcrum:after (
    background: #ea606b;
    }

    #breadcrumb-isanchogives4 (
    text-align: center;
    margin-top:30px;
    }

    #breadcrumb-isanchogives4 ul (
    list-style: none;
    display: inline-table;
    }
    #breadcrumb-isanchogives4 ul li (
    display: inline;
    }

    #breadcrumb-isanchogives4 ul li a (
    display: block;
    float: left;
    height: 50px;
    background: #2b97cc;
    text-align: center;
    padding: 30px 40px 0 80px;
    position: relative;
    margin: 0 10px 0 0;

    Font-size: 20px;
    text-decoration: none;
    color: #fff;

    }
    #breadcrumb-isanchogives4 ul li a:after (
    content: "";
    height:80px;
    width:40px;
    border-radius:0px 40px 40px 0px;
    background:#2b97cc;
    position: absolute; right: -40px; top: 0;
    z-index: 1;

    #breadcrumb-isanchogives4 ul li a:before (
    content: "";
    height:80px;
    width:40px;
    background:#f2f2f2;
    border-radius:0px 40px 40px 0px;
    position: absolute; left: 0; top: 0;
    }

    #breadcrumb-isanchogives4 ul li:first-child a (
    border-top-left-radius: 0px; border-bottom-left-radius: 0px;
    }

    #breadcrumb-isanchogives4 ul li:last-child a (
    padding-right: 80px;
    border-top-right-radius: 0px; border-bottom-right-radius: 0px;
    }

    #breadcrumb-isanchogives4 ul li a:hover (
    background: #207ca8;
    }
    #breadcrumb-isanchogives4 ul li a.wesove-readcrum (
    background: #207ca8;
    }
    #breadcrumb-isanchogives4 ul li a:hover:after (
    background: #207ca8;
    }
    #breadcrumb-isanchogives4 ul li a.wesove-readcrum:after (
    background: #207ca8;
    }


    Насамперед створіть структуру html на основі тегів div та ul li. Div містить ідентифікатор, кожен ідентифікатор міститиме інший стиль у таблиці стилів, щоб представити окремий дизайн. Де ми використовуємо нумерацію як один, два, три, чотири.

    Ці ідентифікатори мають однакову внутрішню структуру, розділену різними стилями відповідно до їх ідентифікатора.



Сподобалася стаття? Поділіться їй
Рекомендуємо статті на тему
Тестовий сервер world of tanks бліцТестовий сервер world of tanks бліц
Як придумати собі псевдонім, що запам'ятовується?Як придумати собі псевдонім, що запам'ятовується?
Чому у тестів швидкості різні результати?Чому у тестів швидкості різні результати?
Відвідувачі зараз обговорюють
IPhone SE – що це таке?IPhone SE – що це таке? Bluetooth
Вибрати колір-непросте завдання У «сріблі» чи «золоті» – айфон завжди у чудовій форміВибрати колір-непросте завдання У «сріблі» чи «золоті» – айфон завжди у чудовій формі Проблеми
Портативні колонки Beats Pill XLПортативні колонки Beats Pill XL D-link
Сканування фотографій (продовження)Сканування фотографій (продовження) Tenda