1 звезда на GitHub = 1 новый компонент.

Поставить звезду
Навигация burgericonanimated

Animated Burger Menu

Иконка-гамбургер с плавной анимацией превращения в крестик закрытия.

Использование

Скопируйте и вставьте этот код на вашу страницу Astro:

astro 
---
import { AnimatedBurgerMenu } from 'astro-component-kit';
---

<BurgerMorphIcon>Content</BurgerMorphIcon>
--- import { AnimatedBurgerMenu } from 'astro-component-kit'; --- <BurgerMorphIcon>Content</BurgerMorphIcon>

Ручная установка

Если вы не используете пакет npm, создайте файл и вставьте следующий код: src/components/lib/AnimatedBurgerMenu.astro:

astro 
---
---
<button class="burger" onclick="this.classList.toggle('active')">
  <span></span><span></span><span></span>
</button>
<style>
  .burger { background: none; border: none; width: 30px; height: 24px; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; }
  .burger span { width: 100%; height: 3px; background: #fff; border-radius: 2px; transition: 0.4s; }
  .burger.active span:nth-child(1) { transform: translateY(10.5px) rotate(45deg); }
  .burger.active span:nth-child(2) { opacity: 0; }
  .burger.active span:nth-child(3) { transform: translateY(-10.5px) rotate(-45deg); }
</style>
--- --- <button class="burger" onclick="this.classList.toggle('active')"> <span></span><span></span><span></span> </button> <style> .burger { background: none; border: none; width: 30px; height: 24px; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; } .burger span { width: 100%; height: 3px; background: #fff; border-radius: 2px; transition: 0.4s; } .burger.active span:nth-child(1) { transform: translateY(10.5px) rotate(45deg); } .burger.active span:nth-child(2) { opacity: 0; } .burger.active span:nth-child(3) { transform: translateY(-10.5px) rotate(-45deg); } </style>

Краткая информация

Категория
Навигация
Имя файла
AnimatedBurgerMenu.astro
Зависимости
Нет — чистый Astro + CSS
Теги
burgericonanimated