Навигация radialmenuanimated
Radial Radial Menu
Радиальное меню с иконками, раскрывающимися по кругу вокруг центральной кнопки.
Живое превью
+
📷
📁
✉️
Использование
Скопируйте и вставьте этот код на вашу страницу Astro:
astro
---
import { RadialRadialMenu } from 'astro-component-kit';
---
<RadialIconMenu>Content</RadialIconMenu>Ручная установка
Если вы не используете пакет npm, создайте файл и вставьте следующий код: src/components/lib/RadialRadialMenu.astro:
astro
---
---
<div class="radial-wrap">
<div class="toggle">+</div>
<div class="icons">
<div style="--i:1">📷</div>
<div style="--i:2">📁</div>
<div style="--i:3">✉️</div>
</div>
</div>
<style>
.radial-wrap { position: relative; width: 60px; height: 60px; background: #6366f1; border-radius: 50%; display: grid; place-items: center; color: #fff; cursor: pointer; }
.icons div { position: absolute; left: 0; transform-origin: 30px; transition: 0.5s; transition-delay: calc(0.1s * var(--i)); transform: rotate(0deg) translateX(0px); opacity: 0; pointer-events: none; }
.radial-wrap:hover .icons div { transform: rotate(calc(360deg / 8 * var(--i))) translateX(80px); opacity: 1; pointer-events: auto; }
</style>Краткая информация
- Категория
- Навигация
- Имя файла
RadialRadialMenu.astro- Зависимости
- Нет — чистый Astro + CSS
- Теги
- radialmenuanimated