Navigasi samping yang dapat dilipat

Termasuk bagian JavaScript dalam Aksi dalam perjalanan HTML di Coddy. Pelajaran 14 dari 27.

Navigasi samping yang dapat diciutkan adalah menu tersembunyi di sisi layar yang muncul dengan bergeser saat sebuah tombol diklik. Menu ini membantu menghemat ruang sekaligus memberi pengguna akses cepat ke tautan navigasi.

Buat struktur HTML dasar dengan navigasi samping dan tombol pengalih:

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

Tambahkan CSS untuk menata navigasi samping:

.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;
}

Tambahkan JavaScript untuk mengubah tampilan navigasi:

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

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

Saat tombol diklik, navigasi samping akan bergeser masuk atau keluar, bergantung pada kondisinya saat ini.

Tantangan

Mudah

Buat tombol menu berfungsi:

HTML: Hubungkan tombol menu ke fungsi JavaScript menggunakan atribut onclick

JavaScript: Tulis fungsi yang membuka navigasi samping dengan mengatur lebarnya menjadi 250px

Coba sendiri

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