Proste menu nawigacyjne — HTML i CSS

Nawigacja na stronie to zazwyczaj zestaw linków ułożonych w formie menu. Poniżej pokażemy, jak stworzyć proste menu poziome, wykorzystując semantyczną strukturę HTML (lista nieuporządkowana) oraz CSS (flexbox i pseudo-klasy do interakcji).

Struktura HTML menu

Najczęściej menu buduje się z listy nieuporządkowanej, w której każdy element li zawiera link a. Taka semantyczna struktura ułatwia nawigację i stylowanie. Przykład:

<nav>
    <ul>
        <li><a href="index.html">Strona główna</a></li>
        <li><a href="o-nas.html">O nas</a></li>
        <li><a href="uslugi.html">Usługi</a></li>
        <li><a href="kontakt.html">Kontakt</a></li>
    </ul>
</nav>

Domyślnie powyższe wygeneruje listę pionową z punktorami — zaraz zmienimy to za pomocą CSS, aby uzyskać menu poziome.

Stylowanie menu za pomocą CSS

Najpierw usuniemy domyślne stylowanie listy (punktory i odstępy) oraz ułożymy elementy poziomo. Możemy to osiągnąć, nadając nav > ul odpowiednie style:

nav ul {
    list-style-type: none; /* usuń punktor (kropki) */
    margin: 0;
    padding: 0;
    display: flex; /* ułóż <li> obok siebie w linii */
    justify-content: center; /* opcjonalnie: wyśrodkuj menu poziomo */
}

Właściwość display: flex sprawia, że elementy li stają się elementami flex i układają się w wierszu. justify-content: center powoduje wyśrodkowanie menu w dostępnym obszarze (można też użyć space-around lub space-between).

Dlaczego flexbox?

Flexbox ułatwia równomierne rozłożenie elementów w poziomie i reagowanie na zmiany szerokości ekranu. W razie potrzeby można również użyć flex-wrap, żeby elementy zawijały się do następnego wiersza.

Elementy listy <li> i linki <a>

Dzięki flexboxowi elementy li są już ustawione w linii. Często jednak to linki traktujemy jako bloki, nadając im padding, dzięki czemu obszar klikalny jest większy i wygodniejszy dla użytkownika:

nav li {
    margin: 0 10px; /* odstęp poziomy między elementami menu */
}
nav a {
    display: inline-block; /* padding działa poprawnie we wszystkich kierunkach */
    text-decoration: none; /* usuń podkreślenie */
    color: #000; /* kolor tekstu linka */
    padding: 8px 12px; /* wewnętrzne odstępy, większy obszar klikalny */
    font-weight: bold; /* pogrubienie dla czytelności */
}

Dzięki temu linki wyglądają jak przyciski/etykiety na pasku — mają odstępy wokół tekstu i nie są podkreślone.

Pseudo-klasy linków

CSS umożliwia stylowanie linków w zależności od ich stanu. Najważniejsze pseudo-klasy to:

• :hover — gdy użytkownik najedzie kursorem na element.
• :visited — gdy link był już odwiedzony.
• I dodatkowo: :active (w momencie kliknięcia) i :focus (gdy element ma fokus, np. po tabulacji).

Przykładowe style dla stanów:

nav a:hover {
    background-color: #ddd; /* jasne tło po najechaniu */
    color: #000;
}
nav a:visited {
    color: #555; /* kolor odwiedzonego linku */
}

Dzięki temu użytkownik otrzymuje informację zwrotną — link podświetla się po najechaniu, a odwiedzone linki mogą mieć inny kolor.

Pełne, przykładowe CSS menu

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}
nav li {
    margin: 0 15px;
}
nav a {
    display: inline-block;
    text-decoration: none;
    color: #333;
    padding: 8px 12px;
    font-weight: bold;
}
nav a:hover {
    background-color: #f0f0f0;
    color: #000;
}
nav a:visited {
    color: #666;
}

Podsumowanie

Takie menu będzie elastycznie dostosowywać się do szerokości ekranu (dzięki flexboxowi). Na szerokim ekranie linki ładnie rozłożą się na środku; użytkownik otrzyma wizualną informację przy najechaniu, a odwiedzone linki można wyróżnić innym kolorem. Menu można dalej upiększać (tło paska, zmiana kolorów, animacje), w zależności od projektu.