Projektowanie stron internetowych • 11-11-2024

Jak napisać rozwijane menu typu Accordion w HTML i CSS

Jak napisać rozwijane menu typu Accordion w HTML i CSS
Jak napisać rozwijane menu typu Accordion w HTML i CSS

Rozwijane menu typu Accordion to interaktywny element strony, który pozwala na ukrywanie i wyświetlanie treści po kliknięciu w odpowiedni nagłówek. Zwykle na początku widoczne są tylko nagłówki (np. tytuły sekcji), a po kliknięciu na dany nagłówek, rozwija się on, wyświetlając powiązany z nim tekst lub inne elementy.

Zasada działania:

  1. HTML – struktura akordeonu składa się z nagłówków (które są widoczne) i ukrytych sekcji (akapitów tekstu lub innych treści).
  2. CSS – odpowiedzialny za ukrywanie lub wyświetlanie treści po kliknięciu w nagłówek.
  3. JavaScript (opcjonalnie) – pozwala na interakcję, czyli otwieranie i zamykanie sekcji po kliknięciu.

W przypadku prostego rozwiązania bez JavaScriptu możemy skorzystać z techniki :checked i label, co pozwoli na stworzenie akordeonu tylko z użyciem HTML i CSS.

Przykładowy kod HTML i CSS:

HTML:


 
html
 
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Accordion</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="accordion"> <div class="accordion-item"> <input type="checkbox" id="section1" class="accordion-input"> <label for="section1" class="accordion-header">Nagłówek 1</label> <div class="accordion-content"> <p>Treść sekcji 1. Tutaj znajdują się dodatkowe informacje, które można rozwinąć.</p> </div> </div> <div class="accordion-item"> <input type="checkbox" id="section2" class="accordion-input"> <label for="section2" class="accordion-header">Nagłówek 2</label> <div class="accordion-content"> <p>Treść sekcji 2. Tutaj znajdują się kolejne informacje, które można rozwinąć.</p> </div> </div> <div class="accordion-item"> <input type="checkbox" id="section3" class="accordion-input"> <label for="section3" class="accordion-header">Nagłówek 3</label> <div class="accordion-content"> <p>Treść sekcji 3. Tutaj znajdują się kolejne informacje, które można rozwinąć.</p> </div> </div> </div> </body> </html>

CSS:


 
css
 
/* Resetowanie marginesów i paddingów */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Stylizacja akordeonu */ .accordion { width: 100%; max-width: 600px; margin: 20px auto; } /* Styl dla nagłówków */ .accordion-header { display: block; background-color: #4CAF50; color: white; padding: 10px; cursor: pointer; font-size: 18px; text-align: left; border: 1px solid #ddd; } /* Ukrywanie treści domyślnie */ .accordion-content { display: none; padding: 10px; background-color: #f4f4f4; border-top: 1px solid #ddd; } /* Aktywacja treści po kliknięciu w nagłówek */ .accordion-input:checked + .accordion-header + .accordion-content { display: block; } /* Styl dla kontrolek (checkbox) - ukrycie ich */ .accordion-input { display: none; }

Opis działania:

  1. HTML: Każda sekcja akordeonu składa się z elementu <input> typu checkbox, który będzie przechowywał stan rozwinięcia (zaznaczone lub niezaznaczone), z etykietą <label> skojarzoną z tym inputem (nagłówek) oraz <div class="accordion-content">, które zawiera treść sekcji.

  2. CSS:

    • Domyślnie treść każdej sekcji (.accordion-content) jest ukryta (display: none).
    • Gdy checkbox (.accordion-input) jest zaznaczony (po kliknięciu na nagłówek), połączony z nim div o klasie .accordion-content staje się widoczny (display: block).
    • Ukrywamy także sam checkbox (.accordion-input), aby użytkownik nie widział kontrolki, a jedynie nagłówki.

  3. Interakcja: Klikając w nagłówek (label), użytkownik aktywuje checkbox, co powoduje, że treść sekcji (div) się rozwija lub zwija.

Gdzie można zastosować rozwijane menu typu Accordion?

Accordion to bardzo przydatna technika w wielu przypadkach, gdzie mamy do czynienia z dużą ilością informacji, które nie muszą być od razu widoczne dla użytkownika, ale mogą być łatwo dostępne, gdy użytkownik zechce je rozwinąć. Typowe zastosowania to:

  • FAQ – sekcja z najczęściej zadawanymi pytaniami.
  • Dokumentacja – dla dokumentów technicznych lub instrukcji, które zawierają wiele sekcji.
  • Menu nawigacyjne – dla długich menu, które zawierają podmenu.
  • Formularze – sekcje formularzy, które mogą być rozwijane, aby zminimalizować przestrzeń na stronie.
  • Panel administratora – rozwijane sekcje w panelu sterowania aplikacji webowej.

Zaletą tego rozwiązania jest prostota:

Dzięki wykorzystaniu czystego HTML i CSS nie potrzebujemy dodatkowego JavaScriptu, co sprawia, że jest to lekka i szybka metoda na stworzenie rozwijanego menu. Oczywiście, jeśli zależy nam na bardziej zaawansowanej funkcjonalności (np. jedno rozwinięte menu na raz), warto rozważyć dodanie JavaScriptu.

ZOBACZ RÓWNIEŻ:

Pozostałe kategorie