Responsywna nawigacja
Część sekcji JavaScript w praktyce ścieżki HTML w Coddy. Lekcja 26 z 27.
Wyzwanie
ŁatwyMamy HTML i CSS dla menu hamburgerowego i nawigacji na naszej stronie o cywilizacji Majów.
Twoim zadaniem jest sprawić, by JavaScript działał, tak aby menu otwierało się i zamykało po kliknięciu przycisku.
Wykonaj następujące kroki:
- Utwórz zmienną przechowującą element przycisku menu hamburgerowego za pomocą
getElementById("burger"). - Utwórz kolejną zmienną przechowującą menu nawigacyjne za pomocą
getElementById("navMenu"). - Dodaj do przycisku detektor zdarzeń, aby po jego kliknięciu uruchamiała się funkcja.
- Wewnątrz tej funkcji:
- Przełącz klasę
"active"przycisku (spowoduje to animację 3 linii). - Przełącz klasę
"active"menu (spowoduje to wyświetlenie lub ukrycie linków).
- Przełącz klasę
Po poprawnym wykonaniu kliknięcie przycisku menu hamburgerowego powinno animować linie, tworząc „X”, i wyświetlić menu nawigacyjne.
Spróbuj swoich sił
<!DOCTYPE html>
<html>
<head>
<title>Maya Civilization</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="logo">Maya World</div>
<div id="burger" class="burger-btn">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<nav id="navMenu" class="nav-links">
<a href="#">Home</a>
<a href="#">History</a>
<a href="#">Culture</a>
<a href="#">Architecture</a>
</nav>
</header>
<main>
<section class="hero">
<h1>The Maya Civilization</h1>
<p>
The Maya civilization thrived in Mesoamerica, known for its remarkable
achievements in astronomy, mathematics, and monumental architecture.
</p>
</section>
<section class="content">
<h2>Legacy of the Maya</h2>
<p>
The Maya left behind impressive cities, pyramids, and written language.
Their deep knowledge of astronomy influenced calendars and rituals, while
their art and traditions continue to inspire today.
</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/e/ea/El_Castillo%2C_Chich%C3%A9n_Itz%C3%A1.jpg"
alt="Maya Pyramid" class="content-img">
</section>
</main>
<script src="script.js"></script>
</body>
</html>
Wszystkie lekcje w sekcji JavaScript w praktyce
1Interaktywność/komponenty UI
KartyAkordeon (rozwijanie/zwijanie)Modal (otwieranie/zamykanie)Menu rozwijane2Formularze i walidacja
Walidacja danych wejściowychNiestandardowe komunikaty o błędachPrzyciski przesyłania9Końcowe wyzwania
Interaktywny akordeon FAQFormularz logowaniaResponsywna nawigacjaStrona bloga z motywemPoćwicz samodzielnie: Edytor online Web