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

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

On-Page Anchor Nav

Боковое меню якорной навигации для плавного перехода между блоками одной страницы.

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

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

astro 
---
import { On-PageAnchorNav } from 'astro-component-kit';
---

<AnchorSideNav>Content</AnchorSideNav>
--- import { On-PageAnchorNav } from 'astro-component-kit'; --- <AnchorSideNav>Content</AnchorSideNav>

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

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

astro 
---
---
<ul class="anchor-nav">
  <li><a href="#intro" class="active">Introduction</a></li>
  <li><a href="#features">Features</a></li>
  <li><a href="#pricing">Pricing</a></li>
  <li><a href="#faq">FAQ</a></li>
</ul>
<style>
  .anchor-nav { list-style: none; padding: 0.5rem; border-left: 1px solid rgba(255, 255, 255, 0.1); position: sticky; top: 100px; }
  .anchor-nav a { display: block; padding: 0.4rem 1rem; color: #64748b; text-decoration: none; font-size: 0.85rem; border-left: 2px solid transparent; margin-left: -1.5px; }
  .anchor-nav a.active { color: #818cf8; border-left-color: #6366f1; }
</style>
--- --- <ul class="anchor-nav"> <li><a href="#intro" class="active">Introduction</a></li> <li><a href="#features">Features</a></li> <li><a href="#pricing">Pricing</a></li> <li><a href="#faq">FAQ</a></li> </ul> <style> .anchor-nav { list-style: none; padding: 0.5rem; border-left: 1px solid rgba(255, 255, 255, 0.1); position: sticky; top: 100px; } .anchor-nav a { display: block; padding: 0.4rem 1rem; color: #64748b; text-decoration: none; font-size: 0.85rem; border-left: 2px solid transparent; margin-left: -1.5px; } .anchor-nav a.active { color: #818cf8; border-left-color: #6366f1; } </style>

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

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