Как создать: вертикальное меню

Как создать вертикальную кнопку

Шаг 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;
}

Попробуйте сами

Вертикальное скролл-меню

Если вы хотите создать вертикальный скролл-меню, установите конкретную высоту и добавьте overflow Свойства:

.vertical-menu {
  width: 200px;
  height: 150px;
  overflow-y: auto;
}

Попробуйте сами

Связанные страницы

Урок:Как создать боковую навигационную панель