Как сделать - Боковые кнопки навигации
Узнать, как создать боковые кнопки навигации с помощью CSS.
Боковые кнопки навигации
Создать боковые кнопки навигации
Шаг 1) Добавить HTML:
Пример
<div id="mySidenav" class="sidenav">
<a href="#" id="about">О Нас</a>
<a href="#" id="blog">Блог</a>
<a href="#" id="projects">Продукты</a>
<a href="#" id="contact">Контакт</a>
</div>
Шаг 2) Добавить CSS:
Пример
/* Стиль ссылки внутри sidenav */
#mySidenav a {
position: absolute; /* Расположите их относительно окна браузера*/
left: -80px; /* Расположите их за пределами экрана */
transition: 0.3s; /* Добавить переход при наведении курсора */
padding: 15px; /* 15px отступы */
width: 100px; /* Установите определенную ширину */
text-decoration: none; /* Удалить подчеркивание */
font-size: 20px; /* Увеличить размер шрифта */
color: white; /* Белый цвет текста */
border-radius: 0 5px 5px 0; /* Закругленные углы на верхней правой и нижней правой стороне */
}
#mySidenav a:hover {
left: 0; /* При наведении курсора мыши, сделать элементы отображаются так, как они должны */
}
/* Ссылка about: 20px сверху с зеленым фоном */
#about {
top: 20px;
background-color: #4CAF50;
}
#blog {
top: 80px;
background-color: #2196F3; /* Синий */
}
#projects {
top: 140px;
background-color: #f44336; /* Красный */
}
#contact {
top: 200px;
background-color: #555 /* Светло-Черный */
}
Редактор кода »Совет: Зайдите на наш учебник CSS Навигации чтобы узнать больше о навигационных барах.