Как создать хлебные крошки на блоге. Использование списков
За последнее время 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; }
Данные стили добавляют:
- вид для ссылки в виде блока и синий цвет
- центрируют текст и делаем его белым
- ровный 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
Всем привет!
Рад приветствовать на своём блоге!
Сегодня я продолжу тему внутренней оптимизации и расскажу о ещё одном методе, который улучшит ваш блог по нескольким параметрам.
Из названия моей статьи понятно, что я буду рассказывать о том, как сделать хлебные крошки на блоге.
Хлебные крошки WordPress на блоге
Что это за крошки, для чего они на сайте и как их создать — вот главные вопросы этой статьи.
Итак, хлебные крошки WordPress! От одного названия уже появляется улыбка. И действительно, нафиг на блоге хлеб крошить? Да и вообще, как эти крошки туда засунуть?
Однако, такое решение не будет эффективным. Я часто в своих статьях повторяю одно и то же утверждение — «Плагины тормозят блог и «. Вследствие этого падает .
Поэтому я предлагаю Вам создать крошки на блоге с помощью вставки кода. Это не сложно. Читайте дальше и делайте всё по шагам.
У меня на блоге крошки тоже установлены с помощью кода.
Итак, приступим к выполнению этой задачи.
Вверху на скриншоте я показал расположение своих хлебных крошек. Сразу видно посетителю в каком разделе блога он находится. Не правда ли?
Ну а теперь делайте всё по шагам.
Зайдите в админпанель своего сайта или блога. После этого перейдите во вкладку Внешний вид —> Редактор- -> Одна запись (Single.php).
Добавьте вот этот код в файл Single.php:
Его достаточно просто скопировать и вставить перед этой строкой:
Строка может иметь и другой вид, но это не важно. Главное здесь тег
который символизирует заголовок статьи.
Можете вставить код и после заголовка, если Вам так больше нравится. Это уже на Ваше усмотрение.
Ну вот и всё! Хлебные крошки созданы! Теперь остаётся обновить файл Single.php, нажав на кнопку «Обновить файл».
Мне кажется лучше добавить такой небольшой код, чем плагин, который будет только нагружать базу данных.
До встречи в новых статьях ! Надеюсь Вам пригодится этот материал и Вы с лёгкостью его примените. Пока-пока.
Списки удобны своей иерархической структурой и гибкой настройкой вида, поэтому применяются не только по своему прямому назначению, но и для создания разных элементов страниц вроде хлебных крошек, нумерации страниц, меню, вкладок, и др.
Хлебные крошки
Хлебные крошки помогают ориентироваться на сайте и показывают положение текущей страницы относительно других разделов сайта. Это позволяет легко переходить на уровень выше и понять, в каком разделе вы находитесь сейчас. Так, для технического сайта навигация может быть следующей (рис. 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. Ниспадающее меню
Меню Приветствую вас, друзья. В последнее время редко получается писать в блог, на то есть свои причины, сломался комп. Сейчас сижу на работе и печатаю эту статью, ох и влетит же мне, если узнают чем я здесь занимаюсь 🙂
Но сейчас не об этом. В этой статье познакомлю вас с таким понятием как «хлебные крошки» на блоге, и расскажу как их сделать. Уверен, что большинство из вас слушали, что такое хлебные крошки или навигационная цепочка, если нет, то сейчас узнаете.
Хлебные крошки или навигационная цепочка (от англ. — breadcrumbs) – это цепочка навигации по сайту, от главной страницы, до текущей, на которой находиться пользователь.
Почему такое название, спросите вы. Название дано иронически по сюжету сказки, в которой Гензель и Гретель по дороге в лес, сорили хлебные крошки, чтобы найти обратную дорогу домой.
На сайте хлебные крошки выглядят примерно так:
Главная >> Раздел >> Подраздел >> Текущая страница
Конечно в зависимости от уровня вложенности страниц, эта навигационная цепочка может отличаться.
Хлебные крошки незначительно, но все же влияют на поисковое ранжирование. Вот что говорят о хлебных крошках Google и Яндекс:
Как установить хлебные крошки на WordPress?
Установить хлебные крошки на WordPress несложно, есть 2 пути решения, первый при помощи плагина, и второй при помощи кода, который я вам предоставлю.
Для начала будем устанавливать навигационную цепочку при помощи кода. Это способ мне нравиться больше.
1) Сделайте бекап блога! На всякий случай, ведь придеться работать с кодом, который влияет на функционирование вашего шаблона.
2) Скопируйте вот этот код и вставьте в файл functions.php перед знаком ?> (Этот код создает навигационную цепочку)
Function the_breadcrumb() { echo ""; if (!is_front_page()) { echo "Ваш сайт"; echo " » "; if (is_category() || is_single()) { the_category(" "); if (is_single()) { echo " » "; the_title(); } } elseif (is_page()) { echo the_title(); } } else { echo "Home"; } }
Только не забудьте вместо надписи «Ваш сайт» вписать свое доменное имя или просто — «Главная».
3) Скопируйте код и вставьте в файлы single.php (для вывода хлебных крошек в записях) и page.php (для вывода хлебных крошек в страницах) перед кодом, выводящим контент, обычно он выглядит примерно так:
Код для вставки:
Можете просто вставить после кода:
Кроме этого по желанию, можете вставить этот код в файлы — search.php (страница поиска информации по блогу и archive.php (страница архива блога)
4) Скопируйте код и вставьте его в самый низ файла style.css (этот код выравнивает расположение хлебных крошек — делает отступ от остальных блоков)
Kroshki { margin:5px 0px 0px 10px; }
Вот и все. Не пугайтесь, что так много кода, это намного проще чем кажеться 🙂
Установка хлебных крошек при помощи плагина Breadcrumb NavXT
Здесь все так же просто. Нужно скачать и активировать плагин Breadcrumb NavXT на блог. Думаю у вас не возникнет вопросов, как скачивать и устанавливать плагин. Все делается стандартным образом.
А вот и сам код:
Как видите все очень просто, справиться даже новичок. При желании, можно подредактировать стили, чтобы хлебные крошки выводились как-то оригинально. Например, вставив вот этот код в файл style.css
Breadcrumb { font:bolder 12px "Trebuchet MS", Verdana, Arial; padding-bottom: 10px; } .breadcrumb a{ color: #1B7499; } .breadcrumb a:hover { color: #EF0E0E; }
У меня при помощи плагина получилось как-то так:
А вы выводите хлебные крошки у себя на блоге?
-
внутри контейнера с классом menu
.
Теперь нам надо различить стиль для разных элементов
-
- это блочный элемент и занимает всю доступную ему ширину, её надо ограничить либо задав width
, либо, как показано в примере, установив display
со значением inline-block
. Линия оказывается под числами, так что пункты меню смещаем вниз на половину их высоты.
Размеры всех кругов установлены точно, через width и height , в связи с чем возникает две проблемы. Первая - ссылка гораздо меньше самого круга и пользователь будет промахиваться; вторая - ссылка располагается в верхней части круга, но никак не по его середине. Первая проблема решается просто - надо сделать ссылки блочными, тогда они будут занимать всю ширину и высоту круга. При этом ссылки остаются квадратными и немного выходят за пределы цветного фона. Но это не видно и становится заметно только при наведении курсора в один из углов ссылки. Выравнивание текста делается с помощью свойства line-height , значение которого совпадает с высотой элемента. Этот способ позволяет выровнять текст по середине высоты элемента и он нам ещё пригодится в дальнейшем.
Создание меню
Меню на сайте это один из способов навигации по нему. Самый простой вариант - набор горизонтальных ссылок, напоминающих по своему виду хлебные крошки. Отличие в том, что между ссылок нет указателей (рис. 3).
Рис. 3. Горизонтальное меню
Для создания такого меню применяем принципы используемые нами в предыдущих примерах, но для разнообразия внесём декоративные изменения. Меню имеет небольшой градиент, под ним находится слабая тень, а пункты меню разделяются вертикальной линией. Сама линия нестандартная и состоит из серой и белой полосок, так что отдельно будем добавлять свою линию к элементам
Загрузка...
