Здесь вы узнаете, как сделать панель навигации внизу веб-страницы при помощи 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: #04AA6D;
color: white;
}
