вертикального раздвижного (accordion) меню

рабочий пример вертикального раздвижного (accordion) меню только на HTML + CSS, с пометкой активного пункта.

О проекте

Вот рабочий пример вертикального раздвижного (accordion) меню только на HTML + CSS, с пометкой активного пункта.

Html

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <title>Вертикальное меню</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <nav class="sidebar">
    <div class="sidebar-title">Моё меню</div>

    <ul class="menu">
      <li class="menu-item">
        <a href="#" class="menu-link active">Главная</a>
      </li>

      <li class="menu-item has-children">
        <input type="checkbox" id="menu-services" class="menu-toggle">
        <label for="menu-services" class="menu-link">
          Услуги
          <span class="arrow"></span>
        </label>

        <ul class="submenu">
          <li><a href="#" class="submenu-link">Разработка сайтов</a></li>
          <li><a href="#" class="submenu-link">Дизайн</a></li>
          <li><a href="#" class="submenu-link">Поддержка</a></li>
        </ul>
      </li>

      <li class="menu-item has-children">
        <input type="checkbox" id="menu-portfolio" class="menu-toggle">
        <label for="menu-portfolio" class="menu-link">
          Портфолио
          <span class="arrow"></span>
        </label>

        <ul class="submenu">
          <li><a href="#" class="submenu-link">Web проекты</a></li>
          <li><a href="#" class="submenu-link">Лендинги</a></li>
          <li><a href="#" class="submenu-link">Приложения</a></li>
        </ul>
      </li>

      <li class="menu-item">
        <a href="#" class="menu-link">О мне</a>
      </li>

      <li class="menu-item">
        <a href="#" class="menu-link">Контакты</a>
      </li>
    </ul>
  </nav>

</body>
</html>

Css

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.sidebar {
  width: 260px;
  min-height: 100vh;
  background: #0f172a;
  color: #e5e7eb;
  padding: 16px 0;
}

.sidebar-title {
  padding: 0 20px 12px;
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 600;
  color: #f9fafb;
  border-bottom: 1px solid #1f2937;
}

.menu {
  list-style: none;
}

.menu-item {
  margin: 2px 0;
}

.menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  font-size: 14px;
  color: #e5e7eb;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}

.menu-link::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: transparent;
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  transition: background 0.2s ease, transform 0.2s ease;
}

.menu-link:hover {
  background: #111827;
  padding-left: 24px;
}

.menu-link.active,
.submenu-link.active {
  background: #1f2937;
  color: #ffffff;
  border-left: 3px solid #3b82f6;
  padding-left: 21px;
}

.menu-link.active::before,
.submenu-link.active::before {
  background: #3b82f6;
  transform: translateY(-50%) scale(1.3);
}

.menu-toggle {
  display: none;
}

.submenu {
  list-style: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  background: #020617;
}

.submenu-link {
  display: block;
  padding: 9px 40px;
  font-size: 13px;
  color: #9ca3af;
  text-decoration: none;
  position: relative;
  transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}

.submenu-link::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: transparent;
  position: absolute;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
  transition: background 0.2s ease, transform 0.2s ease;
}

.submenu-link:hover {
  background: #0b1120;
  color: #e5e7eb;
  padding-left: 44px;
}

.submenu-link.active {
  border-left: 3px solid #3b82f6;
  padding-left: 41px;
}

.submenu-link.active::before {
  background: #3b82f6;
  transform: translateY(-50%) scale(1.3);
}

.menu-toggle:checked ~ .submenu {
  max-height: 500px;
}

.arrow {
  width: 10px;
  height: 10px;
  border-right: 2px solid #6b7280;
  border-bottom: 2px solid #6b7280;
  transform: rotate(45deg);
  transition: transform 0.25s ease, border-color 0.2s ease;
}

.menu-toggle:checked + .menu-link .arrow,
.menu-toggle:checked ~ label .arrow {
  transform: rotate(225deg);
  border-color: #9ca3af;
}

.menu-item.has-children .menu-link:hover .arrow {
  border-color: #e5e7eb;
}

GitHub

29.11.2025

04.03.2026

145

Admin

Комментарии (2)

Имя *

Комментарий *

Загрузка комментариев...