Красивые хлебные крошки. Создание плоских «хлебных крошек» с использованием CSS
Красивая и оригинальная подборка на хлебные крошки, что выполнены в плоском дизайне, с использованием 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 содержит идентификатор, каждый идентификатор будет содержать другой стиль в таблице стилей, чтобы представить отдельный дизайн. Где мы используем нумерацию, как один, два, три, четыре.
Эти идентификаторы имеют одинаковую внутреннюю структуру, разделенную разными стилями в соответствии с их идентификатором.
Списки удобны своей иерархической структурой и гибкой настройкой вида, поэтому применяются не только по своему прямому назначению, но и для создания разных элементов страниц вроде хлебных крошек, нумерации страниц, меню, вкладок, и др.
Хлебные крошки
Хлебные крошки помогают ориентироваться на сайте и показывают положение текущей страницы относительно других разделов сайта. Это позволяет легко переходить на уровень выше и понять, в каком разделе вы находитесь сейчас. Так, для технического сайта навигация может быть следующей (рис. 1).
Рис. 1. Вид хлебных крошек
Последний текст указывает на текущую страницу и ссылкой не является. Все пункты отделяются друг от друга каким-нибудь символом, обычно это стрелка (→), слэш (/), знак больше (>) и тому подобное.
Поскольку оформление возложено на стили, то код HTML весьма лаконичен. Создаём список и присваиваем ему класс breadcrumbs чтобы стиль на другие списки не распространялся.
Заметьте, что никаких разделителей здесь нет, они выводятся с помощью стилевого свойства content (пример 1).
Пример 1. Создание хлебных крошек
Для начала мы обнуляем все поля и отступы у списка и выстраиваем пункты горизонтально через свойство display со значением inline-block . Оно же убирает маркеры, поэтому специально это делать уже не надо. Псевдоэлемент ::before требуется для добавления разделителя между пунктами и управления его видом. Текст добавляется ко всем пунктам, включая первый, что нам, конечно же, не надо. Поэтому убираем его с помощью псевдокласса :first-child , который применяет стиль к первому элементу
Большое количество материалов, например статьи сайта, часто разбивают на отдельные страницы по 10-15 статей на страницу, что приводит к сокращению загрузки сайта. Переход между отдельными страницами делается через их нумерацию, где каждый номер служит ссылкой на соответствующую страницу. Возможен вывод всех страниц, определённого их количества или только ссылок на следующую и предыдущую страницу. Какой вариант выбрать зависит от дизайна сайта и ваших предпочтений. Один из возможных способов нумерации показан на рис. 2.
Рис. 2. Нумерация страниц
Чтобы сделать такую нумерацию мы опять используем простой список, теперь уже с классом pager , каждый пункт этого списка будет ссылкой на страницу. Чтобы выделить текущую страницу добавим класс active (пример 2).
Пример 2. Нумерация страниц
- 1
- 2
- 3
- 4
- 5
- 6
Линия между пунктами делается через свойство border-bottom для элемента
-
. Поскольку
-
и
(пример 3). Они плотно прилегают друг к другу и создают эффект единой полоски.
Пример 3. Горизонтальное меню
Меню Градиент в данном примере добавляется с помощью функции linear-gradient , а тень - с помощью свойства box-shadow .
Ниспадающее меню
Более сложный вид меню называется ниспадающим. При наведении указателя на пункты появляется подменю, до этого невидимое (рис. 4); как только указатель уходит с текста, то меню прячется вновь.
Рис. 4. Вид ниспадающего меню
Такой вид меню достаточно сложен для вёрстки, поэтому разберём его подробнее. Вначале делаем вложенный список, - пункты первого списка служат текстом основного меню, второй список внутри элемента
- будет служить подменю. Если подменю не требуется, то оставляем только один элемент
- , а
-
в него не добавляем. Структура каждого пункта имеет следующий вид.
- Русская кухня
- Бефстроганов
- Гусь с яблоками
- Крупеник новгородский
- Раки по-русски
- , чтобы установить стиль для пунктов первого и второго уровня меню. Если просто указать селектор li , то стиль будет применяться ко всем пунктам вообще. Так что используем селектор .menu > li , он применяет стиль только к элементам
-
первого уровня. В итоге стиль для нашего горизонтального меню немного меняется.
/* Обнуляем отступы и убираем маркеры у списков */ .menu, .menu ul { list-style: none; margin: 0; padding: 0; } .menu { background: linear-gradient(to bottom, #fff, #f1f2f2); /* Градиент */ border: 1px solid #999; /* Параметры рамки */ padding: 0 5px; /* Поля */ font: 14px Arial, sans-serif; /* Параметры шрифта */ box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Тень под меню */ } .menu > li { display: inline-block; /* Выстраиваем по горизонтали */ border-right: 1px solid #fff; /* Белая линия справа */ position: relative; /* Относительное позиционирование */ } .menu a { text-decoration: none; /* Убираем подчёркивание */ color: #4c4c4c; /* Цвет ссылок */ display: block; /* Блочные ссылки */ } .menu > li > a { padding: 10px 15px; /* Поля */ border-right: 1px solid #d8d8d8; /* Серая линия справа */ position: relative; /* Относительное позиционирование */ z-index: 3; /* Выводим поверх остальных элементов */ } .menu ul { display: none; /* Прячем подменю */ }
Подменю мы прячем через свойство display , в итоге меню должно выглядеть как показано на рис. 3. Также добавлено обнуление значений у списков, это пригодится нам при добавлении подпунктов, плюс задействовано относительное позиционирование, без него z-index работать не будет. А оно нам требуется для правильного наложения одних элементов поверх других.
Временно можно включить показ подменю и настроить их вид.
Menu ul { position: absolute; /* Абсолютное позиционирование */ display: none; /* Прячем подменю */ width: 200px; /* Ширина подменю */ background: #fff; /* Цвет фона */ box-shadow: 0 0 10px #666; /* Параметры тени */ } .menu ul a { padding: 5px 10px; /* Поля */ } .menu ul a:hover { background: #008df2; /* Цвет фона */ color: #fff; /* Цвет текста */ }
Остаётся сделать вывод подменю при наведении курсора мыши на пункты меню. Для этого используем псевдокласс :hover , добавляя его к li.
Menu li:hover ul { display: block; }
Такой селектор говорит, что стиль следует применить к элементу
-
, в данном случае отобразить его, только когда указатель мыши наведён на элемент
-
внутри контейнера с классом menu
.
После этого наше меню будет работать и выводить подменю где оно имеется. Остаются последние декоративные штрихи, связанные с тенями и их правильным наложением. Чтобы корректно отобразить тень под пунктами меню первого уровня создадим пустой псевдоэлемент через ::before , установим для него тень, и подложим его под ссылку (вот z-index для и пригодился).
Menu > li:hover::before { content: ""; /* Создаём пустой псевдоэлемент */ top: 0; left: 0; right: 0; bottom: 0; /* Размер совпадает с пунктом меню */ box-shadow: 0 5px 10px #666; /* Параметры тени */ position: absolute; /* Абсолютное позиционирование */ }
Окончательный код продемонстрирован в примере 4.
Пример 4. Ниспадающее меню
Меню Навигация в виде "хлебных крошек" помогает посетителям сайта ориентироваться в иерархической структуре документов и находить путь на верхний уровень. Поэтому, если на сайте размешается большое количество документов, то его надо снабдить "хлебными крошками". В данном уроке будет представлен CSS код для создания различных вариантов дизайна такого нужного навигационного инструмента.
Разметка HTML
Разметка проста и минимальна. Она основана на неупорядоченном списке.
CSS
Для начала сделаем небольшой сброс CSS для нашего неупорядоченного списка:
Ul{ margin: 0; padding: 0; list-style: none; }
Для дизайна наших "хлебных крошек" будут использоваться псевдо-элементы.
Первый пример
В данном примере используется очень простая техника . Создается треугольник на рамке справа с помощью псевдо-элементов, размещаемых один над другим. Темный треугольник смещается, чтобы создать эффект рамки.
#breadcrumbs-one{ background: #eee; border-width: 1px; border-style: solid; border-color: #f5f5f5 #e5e5e5 #ccc; border-radius: 5px; box-shadow: 0 0 2px rgba(0,0,0,.2); overflow: hidden; width: 100%; } #breadcrumbs-one li{ float: left; } #breadcrumbs-one a{ padding: .7em 1em .7em 2em; float: left; text-decoration: none; color: #444; position: relative; text-shadow: 0 1px 0 rgba(255,255,255,.5); background-color: #ddd; background-image: linear-gradient(to right, #f5f5f5, #ddd); } #breadcrumbs-one li:first-child a{ padding-left: 1em; border-radius: 5px 0 0 5px; } #breadcrumbs-one a:hover{ background: #fff; } #breadcrumbs-one a::after, #breadcrumbs-one a::before{ content: ""; position: absolute; top: 50%; margin-top: -1.5em; border-top: 1.5em solid transparent; border-bottom: 1.5em solid transparent; border-left: 1em solid; right: -1em; } #breadcrumbs-one a::after{ z-index: 2; border-left-color: #ddd; } #breadcrumbs-one a::before{ border-left-color: #ccc; right: -1.1em; z-index: 1; } #breadcrumbs-one a:hover::after{ border-left-color: #fff; } #breadcrumbs-one .current, #breadcrumbs-one .current:hover{ font-weight: bold; background: none; } #breadcrumbs-one .current::after, #breadcrumbs-one .current::before{ content: normal; }
Формы CSS строятся с помощью псевдо-элементов, размещаемых перед и после элемента.
#breadcrumbs-two{ overflow: hidden; width: 100%; } #breadcrumbs-two li{ float: left; margin: 0 .5em 0 1em; } #breadcrumbs-two a{ background: #ddd; padding: .7em 1em; float: left; text-decoration: none; color: #444; text-shadow: 0 1px 0 rgba(255,255,255,.5); position: relative; } #breadcrumbs-two a:hover{ background: #99db76; } #breadcrumbs-two a::before{ content: ""; position: absolute; top: 50%; margin-top: -1.5em; border-width: 1.5em 0 1.5em 1em; border-style: solid; border-color: #ddd #ddd #ddd transparent; left: -1em; } #breadcrumbs-two a:hover::before{ border-color: #99db76 #99db76 #99db76 transparent; } #breadcrumbs-two a::after{ content: ""; position: absolute; top: 50%; margin-top: -1.5em; border-top: 1.5em solid transparent; border-bottom: 1.5em solid transparent; border-left: 1em solid #ddd; right: -1em; } #breadcrumbs-two a:hover::after{ border-left-color: #99db76; } #breadcrumbs-two .current, #breadcrumbs-two .current:hover{ font-weight: bold; background: none; } #breadcrumbs-two .current::after, #breadcrumbs-two .current::before{ content: normal; }
С помощью свойства border-radius скругляются углы прямоугольника и квадратов. Квадрат поворачивается, чтобы сделать из него бриллиант.
#breadcrumbs-three{ overflow: hidden; width: 100%; } #breadcrumbs-three li{ float: left; margin: 0 2em 0 0; } #breadcrumbs-three a{ padding: .7em 1em .7em 2em; float: left; text-decoration: none; color: #444; background: #ddd; position: relative; z-index: 1; text-shadow: 0 1px 0 rgba(255,255,255,.5); border-radius: .4em 0 0 .4em; } #breadcrumbs-three a:hover{ background: #abe0ef; } #breadcrumbs-three a::after{ background: #ddd; content: ""; height: 2.5em; margin-top: -1.25em; position: absolute; right: -1em; top: 50%; width: 2.5em; z-index: -1; transform: rotate(45deg); border-radius: .4em; } #breadcrumbs-three a:hover::after{ background: #abe0ef; } #breadcrumbs-three .current, #breadcrumbs-three .current:hover{ font-weight: bold; background: none; } #breadcrumbs-three .current::after{ content: normal; }
С помощью псевдо-элементов добавляются два прямоугольника. Затем им скругляются углы.
#breadcrumbs-four{ overflow: hidden; width: 100%; } #breadcrumbs-four li{ float: left; margin: 0 .5em 0 1em; } #breadcrumbs-four a{ background: #ddd; padding: .7em 1em; float: left; text-decoration: none; color: #444; text-shadow: 0 1px 0 rgba(255,255,255,.5); position: relative; } #breadcrumbs-four a:hover{ background: #efc9ab; } #breadcrumbs-four a::before, #breadcrumbs-four a::after{ content:""; position:absolute; top: 0; bottom: 0; width: 1em; background: #ddd; transform: skew(-10deg); } #breadcrumbs-four a::before{ left: -.5em; border-radius: 5px 0 0 5px; } #breadcrumbs-four a:hover::before{ background: #efc9ab; } #breadcrumbs-four a::after{ right: -.5em; border-radius: 0 5px 5px 0; } #breadcrumbs-four a:hover::after{ background: #efc9ab; } #breadcrumbs-four .current, #breadcrumbs-four .current:hover{ font-weight: bold; background: none; } #breadcrumbs-four .current::after, #breadcrumbs-four .current::before{ content: normal; }
Преимущества дизайна "хлебных крошек" на основе CSS3
- Нет изображений, поэтому просто обновлять и поддерживать.
- Легко масштабируется.
- Обратная совместимость со старыми браузерами.
В предыдущей статье “Навигация breadcrumbs с помощью треугольников на CSS” описывался способ создания меню с помощью чистого CSS, без использования графики.
Метод всем хорош, за исключением одного - поддержка такого меню в старых браузерах сомнительна. Но при переводе этой статьи упоминалась ссылка на способ создания навигации с помощью графики.
Статья написана достаточно давно, но метод абсолютно рабочий. Автор статьи Veerle Pieters, а сам пост называется “Simple scalable CSS based breadcrumbs”. Ниже привожу даже не вольный его перевод, а вольный пересказ.
Несколько дней назад у меня стояла задача создать навигационное меню в стиле “хлебные крошки” (breadcrumbs) для сайта, над которым я работал. Я не думаю, что такое меню необходимо для каждого сайта, но в некоторых случаях оно очень полезно и практично.
Однако этот пример является как бы основой, которую можно расширять и применять на практике. Меню будет создаваться при помощи обычного маркированного списка
.1 ul Но сначала посмотрим на образец, с которым будем работать:
Меню достаточно простое, как и код, с помощью которого мы будем его создавать.
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%). Также делаем у ссылки отступ справа
, в котором будет как раз и находиться фоновое изображение (вырезанная стрелка): .crumbs li a { display : block ; padding : 0 15px 0 0 ; background : url(img/crumbs.gif) 100% 50% no-repeat ; }1 padding-left: 15px Уже практически все сделано. Осталось задать стили для текста ссылок. Уберем стандартное подчеркивание и изменим ее цвет:
.crumbs li a :link , .crumbs li a :visited { text-decoration : none ; color : #777 ; }
и1 :hover
. При наведении курсора мыши или получения фокуса с клавиатуры цвет текста ссылки будет меняться: .crumbs li a :hover , .crumbs li a :focus { color : #dd2c0d ; }1 :focus Результат нашей работы представлен здесь:
Примечание переводчика:
Автор статьи максимально упростил пример и сам код соответственно, насколько я понимаю. Дело в том, что на примере хорошо виден линейный горизонтальный градиент для каждого из пунктов меню. Однако в коде это никак отображено не было. Ну, не беда - разве это проблема создать линейный градиент на CSS3? Сама задача ведь выполнена!
-
внутри контейнера с классом menu
.
Теперь нам надо различить стиль для разных элементов
-
- это блочный элемент и занимает всю доступную ему ширину, её надо ограничить либо задав width
, либо, как показано в примере, установив display
со значением inline-block
. Линия оказывается под числами, так что пункты меню смещаем вниз на половину их высоты.
Размеры всех кругов установлены точно, через width и height , в связи с чем возникает две проблемы. Первая - ссылка гораздо меньше самого круга и пользователь будет промахиваться; вторая - ссылка располагается в верхней части круга, но никак не по его середине. Первая проблема решается просто - надо сделать ссылки блочными, тогда они будут занимать всю ширину и высоту круга. При этом ссылки остаются квадратными и немного выходят за пределы цветного фона. Но это не видно и становится заметно только при наведении курсора в один из углов ссылки. Выравнивание текста делается с помощью свойства line-height , значение которого совпадает с высотой элемента. Этот способ позволяет выровнять текст по середине высоты элемента и он нам ещё пригодится в дальнейшем.
Создание меню
Меню на сайте это один из способов навигации по нему. Самый простой вариант - набор горизонтальных ссылок, напоминающих по своему виду хлебные крошки. Отличие в том, что между ссылок нет указателей (рис. 3).
Рис. 3. Горизонтальное меню
Для создания такого меню применяем принципы используемые нами в предыдущих примерах, но для разнообразия внесём декоративные изменения. Меню имеет небольшой градиент, под ним находится слабая тень, а пункты меню разделяются вертикальной линией. Сама линия нестандартная и состоит из серой и белой полосок, так что отдельно будем добавлять свою линию к элементам