Menu
CoddyTech

Biến

Thuộc phần JavaScript trong thực tế trong hành trình HTML của Coddy. Bài học 21 trên 27.

Trong thử thách này, chúng ta sẽ tạo một menu điều hướng bên có thể thu gọn. Mục tiêu là hoàn thiện toàn bộ script và thêm hiệu ứng chuyển tiếp CSS để menu điều hướng mở ra và đóng lại mượt mà.

challenge icon

Thử thách

Dễ
  1. Đặt ID sideNav cho thẻ div của menu.
  2. Tạo ba biến trong script của bạn:
  • Một biến để lưu phần tử điều hướng bên (sideNav)
  • Một biến để lưu nút mở (openBtn)
  • Một biến để lưu nút đóng (closeBtn)

Tự làm thử

<!DOCTYPE html>
<html>
<head>
  <title>Space Exploration</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="sidenav">
    <button id="closeBtn" class="close-btn">&times;</button>
    <a href="#apollo">Apollo Missions</a>
    <a href="#iss">International Space Station</a>
    <a href="#mars">Mars Rovers</a>
    <a href="#jameswebb">James Webb Telescope</a>
  </div>

  <header>
    <button id="openBtn" class="open-btn">&#9776; Menu</button>
    <h1>Space Exploration</h1>
  </header>

  <main>
    <section id="apollo">
      <h2>Apollo Missions</h2>
      <p>
        The Apollo program, carried out by NASA in the 1960s and 1970s, 
        successfully landed humans on the Moon for the first time in 1969.
      </p>
    </section>

    <section id="iss">
      <h2>International Space Station</h2>
      <p>
        The ISS is a multinational research laboratory in low Earth orbit, 
        continuously inhabited since 2000 by astronauts and scientists.
      </p>
    </section>

    <section id="mars">
      <h2>Mars Rovers</h2>
      <p>
        Rovers like Spirit, Opportunity, Curiosity, and Perseverance 
        have been exploring the Martian surface, searching for signs of past life.
      </p>
    </section>

    <section id="jameswebb">
      <h2>James Webb Space Telescope</h2>
      <p>
        Launched in 2021, the James Webb Telescope is providing 
        breathtaking images of the universe and studying distant galaxies.
      </p>
    </section>
  </main>

  <script src="script.js"></script>
</body>
</html>
quiz iconTự kiểm tra

Bài học này có một bài trắc nghiệm ngắn. Bắt đầu bài học để trả lời và theo dõi tiến độ.

Tất cả bài học trong JavaScript trong thực tế

Tự luyện tập: Playground Web