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

 alexei 24/10/2021 - 09:38

Здесь вы узнаете, как сделать вертикальное меню при помощи 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:


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