rozwijane menu w HTML CSS

Jak zrobić rozwijane menu w HTML i CSS?

przez

Aby stworzyć proste rozwijane menu w HTML i CSS, możesz wykorzystać znaczniki HTML do struktury menu oraz CSS do stylizacji i zachowania, które umożliwi rozwijanie. Poniżej znajdziesz przykład, jak to zrobić:

Krok 1: HTML – Struktura Menu

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rozwijane Menu</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav>
<ul class="menu">
<li><a href="#">Strona główna</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle">Usługi</a>
<ul class="dropdown-menu">
<li><a href="#">Usługa 1</a></li>
<li><a href="#">Usługa 2</a></li>
<li><a href="#">Usługa 3</a></li>
</ul>
</li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
</body>
</html>
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Rozwijane Menu</title> <link rel="stylesheet" href="styles.css"> </head> <body> <nav> <ul class="menu"> <li><a href="#">Strona główna</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle">Usługi</a> <ul class="dropdown-menu"> <li><a href="#">Usługa 1</a></li> <li><a href="#">Usługa 2</a></li> <li><a href="#">Usługa 3</a></li> </ul> </li> <li><a href="#">Kontakt</a></li> </ul> </nav> </body> </html>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rozwijane Menu</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav>
        <ul class="menu">
            <li><a href="#">Strona główna</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle">Usługi</a>
                <ul class="dropdown-menu">
                    <li><a href="#">Usługa 1</a></li>
                    <li><a href="#">Usługa 2</a></li>
                    <li><a href="#">Usługa 3</a></li>
                </ul>
            </li>
            <li><a href="#">Kontakt</a></li>
        </ul>
    </nav>
</body>
</html>

Krok 2: CSS – Stylizacja Menu

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
/* Podstawowe style */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
nav {
background-color: #333;
}
ul.menu {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
ul.menu li {
position: relative;
}
ul.menu li a {
display: block;
color: white;
text-decoration: none;
padding: 15px 20px;
background-color: #333;
}
ul.menu li a:hover {
background-color: #575757;
}
/* Ukrywanie rozwijanego menu na początku */
ul.dropdown-menu {
display: none;
position: absolute;
left: 0;
top: 100%;
background-color: #333;
list-style-type: none;
margin: 0;
padding: 0;
min-width: 160px;
z-index: 1;
}
ul.dropdown-menu li a {
padding: 10px 20px;
display: block;
}
/* Wyświetlanie rozwijanego menu przy najechaniu na element */
li.dropdown:hover .dropdown-menu {
display: block;
}
ul.dropdown-menu li a:hover {
background-color: #575757;
}
/* Podstawowe style */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f5f5f5; } nav { background-color: #333; } ul.menu { list-style-type: none; margin: 0; padding: 0; display: flex; } ul.menu li { position: relative; } ul.menu li a { display: block; color: white; text-decoration: none; padding: 15px 20px; background-color: #333; } ul.menu li a:hover { background-color: #575757; } /* Ukrywanie rozwijanego menu na początku */ ul.dropdown-menu { display: none; position: absolute; left: 0; top: 100%; background-color: #333; list-style-type: none; margin: 0; padding: 0; min-width: 160px; z-index: 1; } ul.dropdown-menu li a { padding: 10px 20px; display: block; } /* Wyświetlanie rozwijanego menu przy najechaniu na element */ li.dropdown:hover .dropdown-menu { display: block; } ul.dropdown-menu li a:hover { background-color: #575757; }
/* Podstawowe style */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
}

nav {
    background-color: #333;
}

ul.menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

ul.menu li {
    position: relative;
}

ul.menu li a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 15px 20px;
    background-color: #333;
}

ul.menu li a:hover {
    background-color: #575757;
}

/* Ukrywanie rozwijanego menu na początku */
ul.dropdown-menu {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    background-color: #333;
    list-style-type: none;
    margin: 0;
    padding: 0;
    min-width: 160px;
    z-index: 1;
}

ul.dropdown-menu li a {
    padding: 10px 20px;
    display: block;
}

/* Wyświetlanie rozwijanego menu przy najechaniu na element */
li.dropdown:hover .dropdown-menu {
    display: block;
}

ul.dropdown-menu li a:hover {
    background-color: #575757;
}

Opis kodów źródłowych:

  1. HTML:
    • Menu główne jest umieszczone w liście <ul class="menu">, a elementy listy <li> zawierają linki.
    • Element, który ma rozwijane menu, posiada klasę .dropdown.
    • Wewnątrz tego elementu znajduje się ukryte podmenu w dodatkowej liście <ul class="dropdown-menu">.
  2. CSS:
    • Menu jest stylizowane jako pozioma lista za pomocą display: flex.
    • Ukrycie rozwijanego menu na początku realizowane jest przez display: none dla podmenu (.dropdown-menu).
    • Po najechaniu na element .dropdown (za pomocą li.dropdown:hover .dropdown-menu), podmenu zostaje wyświetlone poprzez ustawienie display: block.

Efekt:

  • Kiedy użytkownik najedzie myszką na element Usługi, rozwijane menu z opcjami pojawi się poniżej.
  • Podmenu jest domyślnie ukryte i pojawia się dopiero, gdy użytkownik najeżdża na element główny.

Dalsze ulepszenia:

  • Animacje: Możesz dodać animację, aby rozwijane menu pojawiało się płynniej, np. poprzez dodanie właściwości transition do dropdown-menu.
  • Responsywność: Dodanie media queries pozwoli na lepsze dopasowanie menu na urządzeniach mobilnych, np. zmiana flex na pionowe menu rozwijane.

Przykład z animacją:

Dodaj to do CSS, aby podmenu rozwijało się płynnie:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
ul.dropdown-menu {
display: block;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
li.dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
}
ul.dropdown-menu { display: block; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } li.dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; }
ul.dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

li.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
}

To sprawi, że rozwijanie menu będzie bardziej płynne.

Szukasz taniego i dobrego hostingu dla swojej strony www? - Sprawdź Seohost.pl