Меню из круга — полноэкранное меню раскрывается растущей круглой маской из кнопки

Что это за эффект

В шапке сайта круглая кнопка меню. Нажмите на неё: из кнопки вырастает тёмный круг и быстро разрастается, пока не закроет весь экран. Следом пункты меню по одному поднимаются на свои места, а полоски кнопки складываются в крестик. Нажмите ещё раз: пункты уходят, а круг сжимается обратно в кнопку.

Если нажать посреди анимации, она развернётся с того места, где была, без рывка. Круг может расти из кнопки, из точки клика или из центра экрана.

Где использовать

• Сайт студии или портфолио: меню становится отдельной сценой, а не выпадающим списком.
• Лендинг с короткой навигацией: несколько крупных пунктов на весь экран.
• Мобильная версия любого сайта: полноэкранное меню удобно открывать пальцем.

Как добавить на сайт

Через ИИ-агента — самый простой путь. Эти эффекты сделаны в первую очередь для тех, кто собирает сайт вместе с ИИ-агентом: Claude Code, Cursor или любым другим. Настройте эффект на примере выше, нажмите «Скопировать код» и вставьте его в чат агента с одной фразой: «Сделай мне такой эффект на сайте». В скопированном коде уже есть описание эффекта и инструкция для агента. Он сам перенесёт стили, разметку и скрипт и подставит ваши пункты меню. Ваши настройки сохранятся.

Вручную. «Скачать код» даёт готовую HTML-страницу с вашими настройками. «Скопировать код» копирует только стили, разметку и скрипт. Скрипт без зависимостей.

<button data-menu-toggle aria-label="Меню">…</button>
<nav data-menu-panel>
  <a data-menu-item href="/works/">Работы</a>
  <a data-menu-item href="/contacts/">Контакты</a>
</nav>

createCircleMenu(document.body, { origin: 'button', duration: 900 });

Настройки

• Откуда растёт круг — из кнопки, из точки клика или из центра.
• Длительность — время раскрытия круга. Закрывается он немного быстрее.
• Задержка пунктов — насколько каждый следующий пункт опаздывает.
• Подъём пунктов — с какой глубины пункты поднимаются на место.

Доступность и производительность

У кнопки есть подпись для скринридеров и атрибут aria-expanded. Когда меню открывается, фокус переходит на первый пункт. Esc закрывает меню и возвращает фокус на кнопку. Закрытое меню недоступно для клавиатуры и скринридеров. Если в системе включено «Уменьшить движение», меню открывается сразу, без анимации. Анимируются только clip-path, opacity и transform.

Частые вопросы

Как сделать меню на весь сайт? Передайте document.body первым аргументом и сделайте панель меню position: fixed поверх страницы. Так и сделано в скачиваемом примере.

Можно ли поменять цвет круга? Да, это просто фон панели меню. Задайте его в CSS.