Nawigacja i menu w HTML

Wprowadzenie

Dobra nawigacja pomaga użytkownikowi szybko znaleźć to, czego szuka. W HTML zwykle buduje się ją z list i znacznika <nav>.

---

Teoria / Wyjaśnienia

• Do budowy menu zazwyczaj używamy:
  • <nav> – kontener na nawigację,
  • <ul> / <li> – lista linków,
  • <a> – pojedynczy link.
• Linki w menu mogą prowadzić do:
  • sekcji na tej samej stronie (#sekcja),
  • innych podstron serwisu,
  • zewnętrznych stron.
• Dzięki semantycznemu <nav> czytniki ekranu wiedzą, że to właśnie menu.

---

Praktyczne przykłady

Przykład

<!-- Proste menu nawigacyjne -->
<nav>
  <ul>
    <li><a href="#home">Start</a></li>
    <li><a href="#about">O nas</a></li>
    <li><a href="#services">Usługi</a></li>
    <li><a href="#contact">Kontakt</a></li>
  </ul>
</nav>

<!-- Menu z linkami do podstron -->
<nav>
  <ul>
    <li><a href="index.html">Strona główna</a></li>
    <li><a href="oferta.html">Oferta</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
  </ul>
</nav>

---

Ćwiczenie

1. Stwórz proste menu dla strony „portfolio”: Start, Projekty, O mnie, Kontakt.
2. Zadbaj o to, aby linki prowadziły do odpowiednich sekcji (np. #projekty).
3. Dodaj do menu klasę CSS (np. class="main-nav"), aby później łatwo je ostylować.