Как сделать - Нижнюю навигацию
Узнать, как создать нижнее меню навигации с помощью CSS.
Нижняя навигация
Создать нижнюю навигацию
Шаг 1) Добавить HTML:
Пример
<div class="navbar">
<a href="#home" class="active">Главная</a>
<a href="#news">Новости</a>
<a href="#contact">Контакт</a>
</div>
Шаг 2) Добавить CSS:
Пример
/* Поместите навигационную панель в нижней части страницы и закрепите ее */
.navbar {
background-color: #333;
overflow: hidden;
position: fixed;
bottom: 0;
width: 100%;
}
/* Стиль ссылок внутри панели навигации */
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Изменение цвета ссылок при наведении курсора */
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* Добавить цвет для активной/текущей ссылки */
.navbar a.active {
background-color: #4CAF50;
color: white;
}
Редактор кода »Совет: Чтобы создать мобильную, отзывчивую нижнюю панель навигации, прочитайте наш учебник Как cделать - Отзывчивую нижнюю навигацию.
Совет: Зайдите на наш учебник CSS Навигации, чтобы узнать больше о навигационных панелях.