ZorNet.Ru — сайт для вебмастера » HTML и CSS » Хлебные крошки на CSS с иконками для сайта

Хлебные крошки на CSS с иконками для сайта

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

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

Также здесь задействуем font-awesome "шрифтовые иконки" для размещения значков, внутри тега span, где разместим только имена классов в соответствии с указаниями библиотеки.

Так они выглядят в установочном режиме:

Плоские хлебные крошки на CSS с иконками

Установка:

Если не подключенные шрифтовые кнопки, то в HEAD

Код

HTML

Код

<ul id="decsed_bread_cumbs">
 <li><a href="#"> </a></li>
 <li><a href="#"> Раздел сайта</a></li>
 <li><a href="#"> Категорий</a></li>
 <li><a href="#"> Навигация</a></li>
 <li><a href="#"> Цены</a></li>
 <li><a href="#"> Покупка</a></li>
</ul>

CSS

Код

#decsed_bread_cumbs {
  list-style: none;
  display: inline-block;
}
#decsed_bread_cumbs .fa {
  font-size: 14px;
}
#decsed_bread_cumbs li {
  float: left;
}

#decsed_bread_cumbs li a {
  color: #f3e9e9;
  display: block;
  background: #1e76b1;
  text-decoration: none;
  position: relative;
  height: 36px;
  line-height: 36px;
  padding: 0 12px 0 7px;
  text-align: center;
  margin-right: 23px;
  margin-top: 5px;
}
#decsed_bread_cumbs li:nth-child(even) a {
  background-color: #1e76b1;
}
#decsed_bread_cumbs li:nth-child(even) a:before {
  border-color: #1e76b1;
  border-left-color: rgb(255 255 255 / 0%);
}
#decsed_bread_cumbs li:nth-child(even) a:after {
  border-left-color: #1e76b1;
}
#decsed_bread_cumbs li:first-child a {
  padding-left: 14px;
  -moz-border-radius: 2px 0 0 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px 0 0 2px;
}
#decsed_bread_cumbs li:first-child a:before {
  border: none;
}
#decsed_bread_cumbs li:last-child a {
  padding-right: 14px;
  -moz-border-radius: 0 2px 2px 0;
  -webkit-border-radius: 0;
  border-radius: 0 2px 2px 0;
}
#decsed_bread_cumbs li:last-child a:after {
  border: none;
}
#decsed_bread_cumbs li a:before, #decsed_bread_cumbs li a:after {
  content: "";
  position: absolute;
  top: 0;
  border: 0 solid #1e76b1;
  border-width: 18px 12px;
  width: 0;
  height: 0;
}
#decsed_bread_cumbs li a:before {
  left: -20px;
  border-left-color: transparent;
}
#decsed_bread_cumbs li a:after {
  left: 100%;
  border-color: rgb(255 255 255 / 0%);
  border-left-color: #1e76b1;
}
#decsed_bread_cumbs li a:hover {
  background-color: #960f95;
}
#decsed_bread_cumbs li a:hover:before {
  border-color: #960f95;
  border-left-color: transparent;
}
#decsed_bread_cumbs li a:hover:after {
  border-left-color: #960f95;
}
#decsed_bread_cumbs li a:active {
  background-color: #960f95;
}
#decsed_bread_cumbs li a:active:before {
  border-color: #960f95;
  border-left-color: transparent;
}
#decsed_bread_cumbs li a:active:after {
  border-left-color: #960f95;
}

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

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

Демонстрация

26 Июля 2020 Загрузок: 2 Просмотров: 1133 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0