#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 ; }

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

#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 ; }

Теперь мы создадим эффект шеврона в 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 ; border-left : 40px solid #d4f2ff ; position : absolute ; left : 0 ; top : 0 ; }

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

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, чтобы сделать привязку первого списка и установить привязку последнего ребенка, чтобы сделать его по умолчанию, чтобы tringle не появлялся в привязке первого ребенка для якоря слева и последнего ребенка для правой стороны.

Оформление хлебных крошек

1. В светло желтом оттенке:

2. Светлая палитра с зеленой гаммой:

3. В малиновом цвете

4. Выполнен в синей палитре:

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

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

Или мы можем представить его эффект, чтобы сделать его активным в качестве активных панировочных сухарей. Вы можете сказать эти панировочные сухари css только сухари, потому что я буду использовать только css и css3, чтобы сделать эти панировочные сухари.

Приступаем к установке:

Стиль списка не будет, чтобы избежать черной точки списка или другого стиля, который по умолчанию. Каждый список 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;
}

Эти идентификаторы имеют одинаковую внутреннюю структуру, разделенную разными стилями в соответствии с их идентификатором.

В предыдущей статье “Навигация breadcrumbs с помощью треугольников на CSS” описывался способ создания меню с помощью чистого CSS, без использования графики.

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

Статья написана достаточно давно, но метод абсолютно рабочий. Автор статьи Veerle Pieters, а сам пост называется “Simple scalable CSS based breadcrumbs”. Ниже привожу даже не вольный его перевод, а вольный пересказ.

Несколько дней назад у меня стояла задача создать навигационное меню в стиле “хлебные крошки” (breadcrumbs) для сайта, над которым я работал. Я не думаю, что такое меню необходимо для каждого сайта, но в некоторых случаях оно очень полезно и практично.

Однако этот пример является как бы основой, которую можно расширять и применять на практике. Меню будет создаваться при помощи обычного маркированного списка

Но сначала посмотрим на образец, с которым будем работать:

Меню достаточно простое, как и код, с помощью которого мы будем его создавать.

HTML код - маркированный список ul

• Home
• Main section
• Sub section
• Sub sub section
• The page you are on right now

Все пункты меню имеют ссылки, кроме последнего - “The page you are on right now” (Страница, на которой вы сейчас находитесь). При работе над меню я задавался вопросом - является ли список наиболее подходящей структурой для создания меню? Я полагаю, что применение списка в этом случае не является строгим правилом, но мне кажется - это наиболее семантичный и правильный вариант.

CSS код - создаем стили для меню

Задаем общие стили для меню - убираем маркеры и обнуляем отступы в браузерах Firefox, IE:

… которую “задвигаем” вправо (100%) и размещаем точно по вертикали (50%). Также делаем у ссылки отступ справа

Уже практически все сделано. Осталось задать стили для текста ссылок. Уберем стандартное подчеркивание и изменим ее цвет:

Результат нашей работы представлен здесь:

Примечание переводчика:

Автор статьи максимально упростил пример и сам код соответственно, насколько я понимаю. Дело в том, что на примере хорошо виден линейный горизонтальный градиент для каждого из пунктов меню. Однако в коде это никак отображено не было. Ну, не беда - разве это проблема создать линейный градиент на CSS3? Сама задача ведь выполнена!

Приветствую вас. Хлебные крошки — это достаточно полезный блок на любом сайте, потому что он позволяет вам видеть полный путь к странице, на которой вы сейчас. И сегодня я вам расскажу, как оформить в 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, я думаю, вы уже догадались — он выбирает все элементы, кроме того, что указывается в скобках. Если что, в будущем я напишу еще небольшую заметку о работе с псевдоклассом:not , где все будет более понятно. Что ж, вот такие 2 простых варианта оформления хлебных крошек, на основе которых вы можете сделать свой собственный.