Thanh điều hướng bên có thể thu gọn

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

Thanh điều hướng bên có thể thu gọn là một menu ẩn ở cạnh màn hình, trượt ra khi người dùng nhấn nút. Menu này giúp tiết kiệm không gian mà vẫn cho phép người dùng truy cập nhanh vào các liên kết điều hướng.

Tạo cấu trúc HTML cơ bản với thanh điều hướng bên và nút bật tắt:

<button id="toggleNav">☰ Menu</button>

<nav id="sideNav" class="sidenav">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</nav>

Thêm CSS để tạo kiểu cho thanh điều hướng bên:

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.3s;
  padding-top: 60px;
}

.sidenav.open {
  width: 250px;
}

Thêm JavaScript để bật hoặc tắt thanh điều hướng:

const toggleBtn = document.getElementById('toggleNav');
const sideNav = document.getElementById('sideNav');

toggleBtn.addEventListener('click', function() {
  sideNav.classList.toggle('open');
});

Khi bạn nhấp vào nút, thanh điều hướng bên sẽ trượt vào hoặc ra tùy theo trạng thái hiện tại.

Thử thách

Dễ

Thêm chức năng cho nút menu:

HTML: Kết nối nút menu với một hàm JavaScript bằng thuộc tính onclick

JavaScript: Viết một hàm mở thanh điều hướng bên bằng cách đặt chiều rộng của nó thành 250px

Tự làm thử

<!DOCTYPE html>
<html>
<head>
  <title>Scandinavian Interior Design</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="sideNav" class="sidenav">
    <a href="javascript:void(0)" class="close-btn" onclick="closeNav()">X</a>
    <a href="#">Home</a>
    <a href="#">Philosophy</a>
    <a href="#">Materials</a>
    <a href="#">Inspiration</a>
    <a href="#">Contact</a>
  </div>

  <header>
    <span class="open-btn">☰ Menu</span>
    <h1>Scandinavian Interior Design</h1>
  </header>

  <main>
    <section>
      <h2>Calm, Functional, Beautiful</h2>
      <p>
        Scandinavian design is about more than looks — it’s about balance,
        comfort, and harmony. Spaces are uncluttered, airy, and filled with
        light, making homes feel both inviting and practical.
      </p>
    </section>

    <section>
      <h2>Natural Materials</h2>
      <p>
        Wood, stone, wool, and linen are at the heart of Scandinavian interiors.
        These natural elements bring warmth and a sense of connection to nature,
        while ensuring that every item is purposeful and timeless.
      </p>
    </section>
  </main>

  <script src="script.js"></script>
</body>
</html>