Jak stworzyć rozwijane menu w HTML z podmenu

Rozwijane menu (znane także jako menu „suckerfish”) powstaje z połączenia HTML i CSS. Struktura menu opiera się na listach nieuporządkowanych (<ul>) oraz zagnieżdżonych listach (<ul> w <li>). Po ostylowaniu paska nawigacji w CSS, zagnieżdżone listy stają się podmenu. Selektor :hover umożliwia zmianę właściwości display ukrytego podmenu na block, dzięki czemu podmenu pojawia się po najechaniu.

Krok po kroku

Krok 1 – struktura menu

Utwórz menu w HTML, używając znaczników <ul> i <li>:

<ul id="menu">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
</ul>
<div class="clearfix"></div>

Dodaj element div z klasą clearfix przed zamknięciem listy – później użyjemy go, aby tło menu rozciągało się na całą wysokość.

Krok 2 – podmenu

Wstaw podmenu jako kolejny <ul> wewnątrz elementu <li> rodzica:

<ul id="menu">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a>
        <ul>
            <li><a href="#">Podlink 1</a></li>
            <li><a href="#">Podlink 2</a></li>
            <li><a href="#">Podlink 3</a></li>
        </ul>
    </li>
    <li><a href="#">Link 3</a></li>
</ul>

Krok 3 – reset listy

W pliku CSS usuń domyślne wypunktowanie i wcięcie:

#menu {
    list-style: none;
    padding: 0;
}

Krok 4 – tło paska

Dodaj kolor tła do paska menu:

#menu {
    background-color: #003366; /* ciemny niebieski */
}

Krok 5 – pozycjonowanie poziome

Ustaw elementy menu w jednej linii:

#menu li {
    float: left;
}

Krok 6 – stylowanie linków

Spraw, aby linki zachowywały się jak bloki, co pozwoli dodać wypełnienie (padding) i zwiększyć obszar klikalny:

#menu li a {
    display: block;
    padding: 8px 15px; /* 8 px pionowo, 15 px poziomo */
    text-align: center;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}

Krok 7 – styl podmenu

Pozycjonuj podmenu absolutnie i usuń wypunktowanie oraz wypełnienie:

#menu ul {
    position: absolute;
    list-style: none;
    padding: 0;
    display: none; /* domyślnie ukryte */
}

Krok 8 – usunięcie pływania w podmenu

Zapobiegaj floatowaniu elementów podmenu:

#menu ul li {
    clear: left;
}

Krok 9 – wyświetlanie podmenu po najechaniu

Uaktywnij podmenu, gdy użytkownik najedzie myszką na element nadrzędny:

#menu li:hover > ul {
    display: block;
}

Krok 10 – clear‑fix

Upewnij się, że element .clearfix zeruje pływające elementy:

.clearfix {
    clear: both;
}

Wskazówki

• Podświetlaj pozycje menu podczas :hover, np. #menu a:hover { background-color: #0055aa; }.
• Po zakończeniu budowy menu możesz dodać wtyczkę jQuery, aby uzyskać płynne animacje rozwijania.