1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Modales & Capas mobilenavigationoverlay

Mobile Menu Overlay

Menú de navegación para móviles a pantalla completa con enlaces de gran tamaño.

×
Home Features Pricing Team

Uso

Copia y pega este código directamente en tu página de Astro:

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

<MobileNavOverlay>Content</MobileNavOverlay>
--- import { MobileMenuOverlay } from 'astro-component-kit'; --- <MobileNavOverlay>Content</MobileNavOverlay>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/lib/MobileMenuOverlay.astro:

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>
--- --- <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>

Información Rápida

Categoría
Modales & Capas
Nombre de archivo
MobileMenuOverlay.astro
Dependencias
Ninguna — Astro nativo + CSS puro
Etiquetas
mobilenavigationoverlay