внутри контейнера с классом 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
- Нет изображений, поэтому просто обновлять и поддерживать.
- Легко масштабируется.
- Обратная совместимость со старыми браузерами.
Красивая и оригинальная подборка на хлебные крошки, что выполнены в плоском дизайне, с использованием CSS3, на разную палитру оттенков. Безусловно видимость навигаций, виде кнопок отлично помогает как пользователю сайта, так и гостям, это ориентироваться на интернет ресурсе, где можно переходить по ключевым фразам, что нам будут выводить. Но и под стилистику отлично подходит, все больше можно заметить, что некоторые устанавливают на модуль форума, не говоря о современном дизайне. Если у вас, как вы считаете много материала, то здесь рекомендовано подключить этот функционал. Стиль списка не будет, чтобы избежать черной точки списка или другого стиля, который по умолчанию. Так как он распределяет его по категориям и безусловно модулям, начиная с главной странице, и все это преподносится на стильном виде. В данном материале вы наблюдаете подборку, которая сделано по стилистике аналогично, это в плоском стиле.
Вот по форме они совершенно разные, что кому-то даже не нужно будет редактировать под свой дизайн, так как он отлично впишется в него. Теперь мы будем использовать код css, чтобы сделать привязку первого списка и установить привязку последнего ребенка, чтобы сделать его по умолчанию, чтобы tringle не появлялся в привязке первого ребенка для якоря слева и последнего ребенка для правой стороны.
Оформление хлебных крошек
1. В светло желтом оттенке:
2. Светлая палитра с зеленой гаммой:
3. В малиновом цвете
4. Выполнен в синей палитре:
Это будет простой прямой список с фоном и дополнением и некоторыми другими стилями. После этого я создам треугольную структуру в правой части каждого анкера списка, используя CSS, играя со свойствами broder.
Как можете видеть в demo версии, когда наводим на панировочные сундуки любой анкер списка, он дает эффект, что будет означать, посещен или находитесь в этом разделе.
Или мы можем представить его эффект, чтобы сделать его активным в качестве активных панировочных сухарей. Вы можете сказать эти панировочные сухари css только сухари, потому что я буду использовать только css и css3, чтобы сделать эти панировочные сухари.
Приступаем к установке:
- Раздел 1
- Раздел 2
- Раздел 3
- Раздел 4
- Раздел 5
- ZOR 1
- ZOR 2
- ZOR 3
- ZOR 4
- ZOR 5
- Клик 1
- Клик 2
- Клик 3
- Клик 4
- Клик 5
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 содержит идентификатор, каждый идентификатор будет содержать другой стиль в таблице стилей, чтобы представить отдельный дизайн. Где мы используем нумерацию, как один, два, три, четыре. Эти идентификаторы имеют одинаковую внутреннюю структуру, разделенную разными стилями в соответствии с их идентификатором.
За последнее время CSS и CSS3 сильно продвинулись вперед и поэтому старые стили, которые используют картинки на заднем фоне для получения нужной фигуры — больше не требуются.
В этой статье я расскажу как сделать хлебные крошки на сайте с помощь HTML и CSS в стиле flat. Так же можете посмотреть интересные сайтов, может что-нибудь пригодиться. Я недавно делал подборку.
В конце мы получим вот такой результат:
Ранее, для того чтобы сделать прозрачную стрелки между двумя блоками использовалась прозрачная картинка на заднем фоне. Теперь данная проблема может быть решена используя только CSS.
1. Каркас крошек
Для начала создадим маркированный список —
, в котором будут - элементы. Хлебная крошка будет добавляться с помощью добавления нового
- .
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;
}
Данные стили добавляют:
- вид для ссылки в виде блока и синий цвет
- центрируют текст и делаем его белым
- ровный padding
, чтобы блок отображался корректно по вертикали
- сбрасывает иные стили для ссылок с 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