Responsive Navbar

Coddy'nin HTML Journey'sinin JavaScript in Action bölümünün bir parçası — ders 26 / 27.

Görev

Kolay

Maya uygarlığı hakkındaki web sitemizde burger menüsü ve navigasyon için HTML ve CSS kodlarına sahibiz.

Göreviniz, butona tıklandığında menünün açılıp kapanmasını sağlamak için JavaScript'i çalışır hale getirmektir.

Şu adımları izleyin:

getElementById("burger") kullanarak burger butonu öğesini saklamak için bir değişken oluşturun.
getElementById("navMenu") kullanarak navigasyon menüsünü saklamak için başka bir değişken oluşturun.
Butona, tıklandığında bir fonksiyon çalışacak şekilde bir olay dinleyici (event listener) ekleyin.
Bu fonksiyonun içinde:
- Buton üzerindeki "active" sınıfını değiştirin (toggle) (bu, 3 çizgiyi hareketlendirecektir).
- Menü üzerindeki "active" sınıfını değiştirin (toggle) (bu, bağlantıları gösterecek veya gizleyecektir).

Doğru yapıldığında, burger butonuna tıklamak çizgileri bir "X" işaretine dönüştürmeli ve navigasyon menüsünü göstermelidir.

Kendin dene

<!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>