Как сделать - Вертикальное меню
Узнайте, как сделать вертикальное меню на сайте с помощью CSS.
Вертикальное меню
Как создать вертикальную группу кнопок
Шаг 1) Добавить HTML:
Пример
<div class="vertical-menu">
<a href="#" class="active">Главная</a>
<a href="#">Ссылка 1</a>
<a href="#">Ссылка 2</a>
<a href="#">Ссылка 3</a>
<a href="#">Ссылка 4</a>
</div>
Шаг 2) Добавить CSS:
Пример
.vertical-menu {
width: 200px; /* Установите ширину, если хотите */
}
.vertical-menu a {
background-color: #eee;
/* Серый цвет фона */
color: black; /* Черный цвет текста */
display: block; /* Сделайте так, чтобы ссылки отображались друг под другом */
padding: 12px; /* Добавьте отступ */
text-decoration: none; /* Удалить подчеркивание из ссылок */
}
.vertical-menu a:hover {
background-color: #ccc; /* Темно-серый фон при наведении курсора мыши */
}
.vertical-menu a.active {
background-color: #04AA6D; /* Добавить зеленый цвет к "активной/текущей" ссылке */
color: white;
}
Попробуйте сами »
Вертикальное прокручиваемое меню
Установите определенную высоту с помощью height
и добавьте свойство overflow
, если вам нужно меню с вертикальной прокруткой (скроллингом):
Совет: Ознакомтесь с главой Как сделать - Боковая навигация на нашем сайте W3Schools на русском, чтобы узнать, как создать фиксированную боковую навигацию во всю высоту страницы.