Как сделать - Навигацию таблетки
Узнать, как создать меню навигации таблетки с помощью CSS.
Навигацию таблетки
Создать навигацию таблетки
Шаг 1) Добавить HTML:
Пример
<div class="pill-nav">
<a class="active" href="#home">Главная</a>
<a href="#news">Новости</a>
<a href="#contact">Контакт</a>
<a href="#about">О Нас</a>
</div>Шаг 2) Добавить CSS:
Пример
/* Стиль ссылки внутри меню навигации таблетки */
.pill-nav a {
display: inline-block;
color: black;
text-align: center;
padding: 14px;
text-decoration: none;
font-size: 17px;
border-radius: 5px;
}
/* Изменение цвета ссылок при наведении курсора мыши */
.pill-nav a:hover {
background-color: #ddd;
color: black;
}
/* Добавить цвет для активной/текущей ссылки */
.pill-nav a.active {
background-color: dodgerblue;
color: white;
}
Редактор кода »Вертикальная навигация таблетки
Добавить display: block к ссылкам, и они будут отображаться вертикально, а не горизонтально:
Совет: Смотреть также Как создать верхнее меню навигации.
Совет: Зайдите на наш учебник CSS Навигации, чтобы узнать больше о навигационных панелях.
