Интересная статья по созданию навигации в виде “хлебных крошек” (breadcrumbs).
Такая навигация удобна и полезна для сайтов с большим количеством рубрик. Благодаря такой навигации пользователь сайта может не запутаться в содержимом, точно знать, где он находиться и легко перейти в то место, куда ему нужно.
Видов такой навигации может быть множество, все зависит от дизайна. Но принцип построения на CSS стандартный - с помощью списков
.1
ul
Статья была опубликована на одном из моих любимых сайтов CSS-Tricks. Ниже привожу вольный перевод ее автора (Chris Coyier):
Вы уже знаете, как создавать треугольники на чистом CSS? Для этого просто генерируется блочный элемент с нулевой шириной и высотой, у которого имеется одна граница с цветом, а две смежные границы имеют прозрачный цвет. Такие треугольники применяются в самых разнообразных местах дизайна - например, для указателей в навигации.
Другое место их применения - невинные украшательства дизайна, не нарушающие его общую разметку. В счастью, это возможно благодаря псевдо-элементам, которые часто используются при их создании. Применяя
, 1
:before
или оба сразу можно сгенерировать блочные элементы и с их помощью создать треугольники.1
:after
А вот последние можно применять для создания навигации в стиле “хлебные крошки”. Как выглядит одна из таких навигаций (чтобы иметь представление, что это такое), показано на рисунке ниже:
HTML разметка
Начнем создание такого меню с HTML-разметки, которая максимально проста и представляет собой обычный неупорядоченный список с классом breadcrumb:
CSS код
В первую очередь убедимся, что наш список не выглядит, как обычный неупорядоченный список. Для этого уберем у него маркеры, сделаем его пункты плавающими влево и зададим самые общие стилевые правила для ссылок внутри этого списка. Обратите внимание на свойство
для всего списка в целом - он применяется здесь по двум причинам.1
overflow
Первая - наш список должен иметь высоту. Контейнеры, которые содержат только плавающие элементы, схлопываются (
), что совсем не то, что нам нужно. Второе - когда мы будем создавать треугольники, мы сделаем их достаточно большими:1
collapse
Для создания треугольника мы воспользуемся псевдо-элементом
. Для него установим высоту и ширину, равную нулю; и абсолютно спозиционируем его на 100% влево, что означает - он будет располагаться у правого края своего блока родителя.1
:after
Затем сместим треугольник вниз на 50% и “вернем” назад на -50px для точного позиционирования по центру (это классический прием - перевод здесь). Есть только один момент, на который нужно обратить внимание.
Граница, которую мы создаем сверху, равна 50px, нижняя граница также равна 50px, а ширина левой границы равна 30px. Это сделано для того, чтобы треугольник получился более “плоским”, с не такой острой вершиной. Если мы сделаем левую границу равной остальным сторонам в 50px, угол треугольника будет слишком острый.
Так как верхняя и нижняя границы равны по 50px, то общая высота треугольника получается в 100px. Это гораздо больше, чем высота нашего меню, в котором высота шрифта
и 1
18px
, 1
padding-top: 10px
. Однако, это хорошо, что треугольник больше высоты меню. Это означает, что у нас остается достаточно свободного пространства, чтобы “поиграться” с размером шрифта:1
padding-bottom: 10px
Все хорошо. Но на примере, который нужно воссоздать в коде, есть тонкая полоска шириной в 1px, идущая по краю треугольника. Чтобы “нарисовать” ее в CSS-коде, нам потребуется еще “поколдовать”, так как напрямую создать границу для треугольника не получиться. Ведь треугольник как раз сам и является границей!
Поэтому мы поступим по другому - создадим еще один треугольник, который поместим позади нашего первого и зададим для него белый фоновый цвет. По своим свойствам второй треугольник будет практически одинаков с первым, но создаваться будет с помощью псевдо-элемента
.1
:before
Обратите внимание на важную вещь -
. С помощью этого свойства можно “тасовать” элементы 1
z-index
и 1
:before
(точнее - созданные ими треугольники) в нужном порядке - какой треугольник над каким должен располагаться:1
:after
Примечание переводчика:
Изменения минимальны. Цвет границы задан белым
и добавлено смещение треугольника влево на 1px
1 #fff, чтобы разделительная черта была более заметна.
1 margin-left: 1px
Теперь что касается цветовой заливки навигации. Так как пример имеет плавное изменение цвета элементов навигации, нам потребуются еще два замечательных CSS-свойства:
и HSLa.1
nth-child
- Чем полезно
- можно задать цвета для различных элементов навигации без добавления дополнительной разметки в HTML-код;1
nth-child
- Чем полезно HSLa - основываясь только на одном цвете, можно легко задать различные оттенки для элементов навигации.
Помимо этого, для первой ссылки мы уменьшим отступ слева с помощью
, чтобы все элементы меню имели одинаковый размер; для последней ссылки совсем уберем цвет, сделаем некликабельной и вернем вид курсора по умолчанию. Все это мы выполним без какой-либо дополнительной разметки, с помощью псевдо-элементов 1
padding-left
и 1
:first-child
(плюс к двум предыдущим):1
:last-child
Примечание переводчика:
Нумерация в
начинается с единицы, а не с нуля, как принято в языках программирования.
1 nth-child
И наконец, состояния элементов навигации при наведении курсора мыши. Здесь единственная особенность - нам нужно задать цвет треугольника точно таким же, как и ссылка. Не проблема:
Совместимость с браузерами
Назовите меня ленивым, но я не занимался вопросом проверки данного кода на кросс-браузерную совместимость. Я был слишком захвачен самой идеей создания меню “хлебные крошки” на чистом CSS, чтобы думать его практическом использовании. Но если вас волнует мысль о его поддержке более старыми версиями браузеров, то стоит обратить внимание на следующие вещи:
- используйте для передачи цвета HEX-код вместо HSLa;
- для каждого из пунктов меню
создайте свои классы, вместо использования1
li
;1
nth-child
- для браузеров, не поддерживающих псевдо-классы
/1
:after
используйте схему создания навигационного меню, основанную на изображениях;1
:before
- применяйте библиотеку Modernizr для определения поддержки браузерами тех или иных свойств (например, HSLa);
- используйте дополнительные стилевые правила для IE.
Результат, созданный с помощью приведенного выше кода, показан ниже:
Эффект при наведении курсора мыши на один из пунктов меню:
На этом все и перевод закончен.