Модальные окна mobilenavigationoverlay

Mobile Menu Overlay

Полноэкранное мобильное меню с крупными ссылками и анимацией открытия.

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

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

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

<MobileNavOverlay>Content</MobileNavOverlay>

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

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

---
---
<div class="mob-nav">
  <div class="mob-close">×</div>
  <nav class="mob-links">
    <a href="#">Home</a>
    <a href="#">Features</a>
    <a href="#">Pricing</a>
    <a href="#">Team</a>
  </nav>
</div>
<style>
  .mob-nav { position: fixed; inset: 0; background: #080b14; z-index: 4000; padding: 4rem 2rem; display: flex; flex-direction: column; }
  .mob-close { font-size: 3rem; color: #fff; align-self: flex-end; cursor: pointer; margin-bottom: 2rem; }
  .mob-links { display: flex; flex-direction: column; gap: 1.5rem; }
  .mob-links a { font-size: 2.2rem; font-weight: 800; color: #fff; text-decoration: none; transition: 0.2s; }
  .mob-links a:hover { color: #6366f1; padding-left: 10px; }
</style>

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

Категория: Модальные окна
Имя файла: MobileMenuOverlay.astro
Зависимости: Нет — чистый Astro + CSS
Теги: mobilenavigationoverlay

Живое превью

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

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

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