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

Question

Olga Pejenkova · Accepted Answer

Для создания вертикального меню с использованием CSS, можно использовать структуру HTML для создания списка элементов, а затем применить стили CSS для управления их расположением и отображением.

Пример HTML-кода для вертикального меню:

<ul class="vertical-menu">
  <li><a href="#">Пункт меню 1</a></li>
  <li><a href="#">Пункт меню 2</a></li>
  <li><a href="#">Пункт меню 3</a></li>
  <li><a href="#">Пункт меню 4</a></li>
</ul>

Пример CSS-стилей для вертикального меню:

.vertical-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px; /* Установите ширину меню по вашему усмотрению */
}

.vertical-menu li {
  display: block;
  padding: 10px;
  background-color: #f4f4f4;
}

.vertical-menu li a {
  text-decoration: none;
  color: #333;
}

.vertical-menu li:hover {
  background-color: #e9e9e9;
}

Этот код создаст вертикальное меню с горизонтальными элементами, у которых будет задано фиксированная ширина и стили для фона и ссылок. Можно дополнительно настраивать стили и анимации для привлекательного внешнего вида меню.

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

Ответы

Каталог