Здесь вы узнаете, как сделать навигацию по типу "хлебные крошки" при помощи CSS.
Как сделать навигацию "хлебные крошки"
Навигация "хлебные крошки" предоставляет ссылки на страницы, где пользователь побывал до этого, и показывает текущее нахождение пользователя на сайте.
Попробовать самому »Шаг 1) Добавляем HTML:
Пример
<ul class="breadcrumb">
<li><a href="#">На главную</a></li>
<li><a href="#">Картинки</a></li>
<li><a href="#">Лето</a></li>
<li>Италия</li>
</ul>
Шаг 2) Добавляем CSS:
Пример
/* Стили списка */
ul.breadcrumb {
padding: 10px 16px;
list-style: none;
background-color: #eee;
}
/* Отображаем элементы списка рядом друг с другом */
ul.breadcrumb li {
display: inline;
font-size: 18px;
}
/* Добавляем косую черту (/) перед каждым элементом списка */
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}
/* Стили всех ссылок внутри списка */
ul.breadcrumb li a {
color: #0275d8;
text-decoration: none;
}
/* Стили ссылок при наведении курсора мышки */
ul.breadcrumb li a:hover {
color: #01447e;
text-decoration: underline;
}
