Навигация mega menudropdownnavigation

Mega Menu Layout

Мега-меню с полупрозрачным фоном и структурированными колонками разделов.

Products

Resources

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

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

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

<MegaMenuGlass>Content</MegaMenuGlass>

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

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

---
---
<div class="mega-wrap">
  <div class="mega-grid">
    <div class="mega-col">
      <h5>Products</h5>
      <a href="#">Analytics</a>
      <a href="#">CRM</a>
      <a href="#">Support</a>
    </div>
    <div class="mega-col">
      <h5>Resources</h5>
      <a href="#">Documentation</a>
      <a href="#">Tutorials</a>
      <a href="#">Guides</a>
    </div>
  </div>
</div>
<style>
  .mega-wrap { background: rgba(10, 10, 20, 0.9); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 2rem; width: 600px; }
  .mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
  h5 { color: #818cf8; font-size: 0.8rem; margin: 0 0 1rem; text-transform: uppercase; letter-spacing: 0.05em; }
  .mega-col a { display: block; padding: 0.5rem 0; color: #e2e8f0; text-decoration: none; font-size: 0.9rem; }
  .mega-col a:hover { color: #fff; }
</style>

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

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