Bagian 5: Layout Responsif dan Sentuhan Akhir

Bagian penutup ini mengerjakan dua hal yang membuat beranda layak tayang: media query reflow agar susunan dua kolom menumpuk dengan tertib di layar sempit, dan sedikit JavaScript untuk menggerakkan tombol Menu. Setelah keduanya beres, snapshot di folder ini disalin utuh ke src/ sebagai kondisi akhir proyek.

Reflow pada Dua Titik Potong #

Kelompok kesebelas menambahkan dua media query. Titik potong pertama, max-width: 960px, membongkar semua grid dua kolom sekaligus:

css
@media (max-width: 960px) {
  .sorotan { grid-template-columns: 1fr; padding-block: 36px 44px; }
  .isi-utama { grid-template-columns: 1fr; padding-block: 24px 48px; }
  .sidebar { padding-left: 0; padding-top: 32px; border-left: none; border-top: 1px solid var(--garis); }
  .kartu-artikel--lebar { grid-template-columns: 1fr; }
}

Perhatikan detail pada sidebar: pembatasnya berpindah sisi — border-left dihapus, diganti border-top — karena setelah menumpuk, pemisah vertikal kehilangan makna. Titik potong kedua, max-width: 640px, menyusutkan grid artikel menjadi satu kolom. Kedua angka itu ditentukan oleh isi, bukan daftar perangkat: 960px adalah titik ketika tiga kolom mulai sesak, sedangkan 640px adalah titik ketika dua kolom kartu tidak lagi cukup lebar untuk membaca dek dengan nyaman. Saat konten berubah, ukuran patokan cukup diuji ulang dengan menyempitkan jendela dan mengamati kapan layout mulai berjuang. Media query menu nav 720px dari Bagian 2 tetap berlaku, sehingga urutan pelipatan halaman terasa bertahap: sidebar dulu, lalu kartu, dan navigasi paling awal.

Berkas main.js baru muncul di bagian ini dan berukuran sengaja kecil — 26 baris untuk satu pekerjaan. Dua id dari HTML Bagian 2 diambil lebih dulu: tombol-nav dan nav-utama. Fungsi aturMenu() menulis tiga keadaan sekaligus agar tampilan dan aksesibilitas tidak pernah berbeda:

js
function aturMenu(terbuka) {
  navUtama.setAttribute('data-terbuka', terbuka ? 'true' : 'false');
  tombolNav.setAttribute('aria-expanded', terbuka ? 'true' : 'false');
  tombolNav.textContent = terbuka ? 'Tutup' : 'Menu';
}

Saklar CSS-nya sudah menunggu sejak Bagian 2: .nav-utama[data-terbuka="true"] { display: block; }. Pendengar klik pada tombol membaca keadaan semasa, lalu membaliknya; pendengar kedua pada nav-utama menutup menu saat tautan rubrik dipilih agar layar sentuh tidak menutupi area baca. Teks tombol ikut berganti antara Menu dan Tutup karena kontrol yang tidak menyatakan keadaannya mempersulit pengguna: tombol seharusnya menjawab apa yang terjadi saat ditekan. Seluruh pengaturan dibungkus if (tombolNav && navUtama) sehingga skrip aman dipakai di halaman lain yang tidak punya menu. Tampilan menu seluler saat terbuka kira-kira begini:

Pemeriksaan Akhir dan Sinkronisasi #

Langkah penutup memastikan kondisi akhir layak rilis: semua gambar punya alt deskriptif, aria-expanded dan aria-controls terpasang pada tombol menu, :focus-visible menandai fokus keyboard dengan warna aksen, label form terhubung lewat for="surel", dan header tiap section memakai aria-labelledby. Urutan pemeriksaan ini sengaja dibuat singkat agar mudah diulang setiap kali menambah halaman baru: struktur semantik dulu, lalu atribut aksesibilitas, terakhir perilaku keyboard. Setelah pemeriksaan itu, salin beranda.html menjadi src/index.html, lalu samakan styles.css dan main.js — hasil akhirnya persis seperti tiga snapshot di bawah, identik dengan isi src/ proyek.

html

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Lentera — Beranda</title>
  <link rel="icon" href="assets/logo.svg" type="image/svg+xml">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <header class="masthead">
    <div class="masthead-dalam">
      <p class="masthead-edisi">Edisi Senin, 12 Oktober 2026</p>
      <div class="masthead-baris">
        <p class="masthead-logo"><a href="#">Lentera</a></p>
        <button class="nav-toggle" id="tombol-nav" type="button" aria-expanded="false" aria-controls="nav-utama">Menu</button>
      </div>
      <nav class="nav-utama" id="nav-utama" data-terbuka="false" aria-label="Navigasi utama">
        <ul>
          <li><a href="#" aria-current="page">Terkini</a></li>
          <li><a href="#">Budaya</a></li>
          <li><a href="#">Teknologi</a></li>
          <li><a href="#">Olahraga</a></li>
          <li><a href="#">Opini</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main class="halaman">
    <section class="sorotan" aria-labelledby="judul-sorotan">
      <article class="sorotan-artikel">
        <p class="kicker">Liputan Utama</p>
        <h1 class="judul-sorotan" id="judul-sorotan"><a class="tautan-judul" href="#">Kota Lama Membuka Kembali Jalur Tebing yang Delapan Tahun Tertutup</a></h1>
        <p class="dek">Koridor sepanjang 1,2 kilometer di bibir tebing kini melayani pejalan kaki dan pesepeda. Penataan lampu dan area duduk baru selesai pekan lalu, dan pengunjung pertama memadati jalur sejak pagi.</p>
        <p class="byline">Oleh Ratna Ayu Damayanti · 8 menit baca</p>
      </article>
      <figure class="sorotan-media">
        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='500'%3E%3ClinearGradient id='g' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23e9a05c'/%3E%3Cstop offset='1' stop-color='%237d3b3f'/%3E%3C/linearGradient%3E%3Crect width='800' height='500' fill='url(%23g)'/%3E%3C/svg%3E" alt="Ilustrasi gradasi warna senja untuk foto jalur tebing kota lama" width="800" height="500">
        <figcaption>Jalur tebing kota lama sesaat setelah dibuka untuk publik. Foto: Tim Lentera/Nur Prasetyo</figcaption>
      </figure>
    </section>

    <div class="isi-utama">
      <section class="grid-artikel" aria-label="Artikel terbaru">
        <article class="kartu-artikel kartu-artikel--lebar">
          <figure class="kartu-media">
            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='500'%3E%3ClinearGradient id='g' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%238fb98d'/%3E%3Cstop offset='1' stop-color='%233d5a45'/%3E%3C/linearGradient%3E%3Crect width='800' height='500' fill='url(%23g)'/%3E%3C/svg%3E" alt="Ilustrasi gradasi warna hijau untuk foto bahan komposit dari jaring bekas" width="800" height="500">
          </figure>
          <div class="kartu-isi">
            <p class="kicker">Lingkungan</p>
            <h2 class="judul-kartu"><a class="tautan-judul" href="#">Limbah Jaring Nelayan Berubah Menjadi Bahan Bangunan</a></h2>
            <p class="dek">Koperasi pesisir mengolah jaring bekas menjadi papan komposit. Hasil awalnya dipakai untuk memperbaiki dermaga milik desa sendiri.</p>
            <p class="byline">Oleh Bagas Wicaksono · 6 menit baca</p>
          </div>
        </article>

        <article class="kartu-artikel">
          <figure class="kartu-media">
            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='500'%3E%3ClinearGradient id='g' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23d4b06a'/%3E%3Cstop offset='1' stop-color='%237a4a28'/%3E%3C/linearGradient%3E%3Crect width='800' height='500' fill='url(%23g)'/%3E%3C/svg%3E" alt="Ilustrasi gradasi warna emas untuk foto kelas wayang pemula" width="800" height="500">
          </figure>
          <div class="kartu-isi">
            <p class="kicker">Budaya</p>
            <h2 class="judul-kartu"><a class="tautan-judul" href="#">Sanggar Wayang Membuka Kelas Malam untuk Pemula</a></h2>
            <p class="dek">Permintaan kelas naik dua kali lipat dalam setahun. Sanggar di kota lama menjawabnya dengan sesi pukul tujuh malam.</p>
            <p class="byline">Oleh Saraswati Ningrum · 4 menit baca</p>
          </div>
        </article>

        <article class="kartu-artikel">
          <figure class="kartu-media">
            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='500'%3E%3ClinearGradient id='g' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c95b3f'/%3E%3Cstop offset='1' stop-color='%235f2318'/%3E%3C/linearGradient%3E%3Crect width='800' height='500' fill='url(%23g)'/%3E%3C/svg%3E" alt="Ilustrasi gradasi warna merah bata untuk foto sambal klasik" width="800" height="500">
          </figure>
          <div class="kartu-isi">
            <p class="kicker">Kuliner</p>
            <h2 class="judul-kartu"><a class="tautan-judul" href="#">Mencatat Resep Sambal Klasik Sebelum Terlupakan</a></h2>
            <p class="dek">Arsip keluarga di Kampung Pecinan menyimpan resep tertulis tahun 1962. Kini resep itu diuji ulang di dapur umum.</p>
            <p class="byline">Oleh Dimas Prakoso · 5 menit baca</p>
          </div>
        </article>

        <article class="kartu-artikel">
          <figure class="kartu-media">
            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='500'%3E%3ClinearGradient id='g' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23e0c368'/%3E%3Cstop offset='1' stop-color='%238a5d2e'/%3E%3C/linearGradient%3E%3Crect width='800' height='500' fill='url(%23g)'/%3E%3C/svg%3E" alt="Ilustrasi gradasi warna kuning pasar untuk foto pedagang subuh" width="800" height="500">
          </figure>
          <div class="kartu-isi">
            <p class="kicker">Ekonomi</p>
            <h2 class="judul-kartu"><a class="tautan-judul" href="#">Pasar Subuh Merapat ke Pembayaran Nontunai</a></h2>
            <p class="dek">Tiga per empat pedagang kini menerima kode QR. Buku kas bergeser menjadi ponsel di meja tukang sayur.</p>
            <p class="byline">Oleh Laila Rahmawati · 4 menit baca</p>
          </div>
        </article>

        <article class="kartu-artikel">
          <figure class="kartu-media">
            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='500'%3E%3ClinearGradient id='g' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%237fa8c9'/%3E%3Cstop offset='1' stop-color='%232e4a63'/%3E%3C/linearGradient%3E%3Crect width='800' height='500' fill='url(%23g)'/%3E%3C/svg%3E" alt="Ilustrasi gradasi warna biru untuk foto regu sepak takraw desa" width="800" height="500">
          </figure>
          <div class="kartu-isi">
            <p class="kicker">Olahraga</p>
            <h2 class="judul-kartu"><a class="tautan-judul" href="#">Tim Sepak Takraw Desa Lolos ke Kejuaraan Nasional</a></h2>
            <p class="dek">Latihan rutin di lapangan tanah akhirnya berbuah. Regu campuran ini akan tampil di ajang nasional pekan depan.</p>
            <p class="byline">Oleh Yusuf Maulana · 3 menit baca</p>
          </div>
        </article>

        <article class="kartu-artikel kartu-artikel--lebar">
          <figure class="kartu-media">
            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='500'%3E%3ClinearGradient id='g' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2346557a'/%3E%3Cstop offset='1' stop-color='%231d2440'/%3E%3C/linearGradient%3E%3Crect width='800' height='500' fill='url(%23g)'/%3E%3C/svg%3E" alt="Ilustrasi gradasi warna malam untuk foto kubah observatorium" width="800" height="500">
          </figure>
          <div class="kartu-isi">
            <p class="kicker">Sains</p>
            <h2 class="judul-kartu"><a class="tautan-judul" href="#">Observatorium Menyibak Malam untuk Pengunjung Umum</a></h2>
            <p class="dek">Slot pengamatan malam dibuka dua kali sepekan. Panitia menerbitkan panduan pendaftaran beserta tip mengamati planet.</p>
            <p class="byline">Oleh Hafiz Alfarizi · 7 menit baca</p>
          </div>
        </article>
      </section>

      <aside class="sidebar">
        <section class="widget" aria-labelledby="judul-trending">
          <h2 class="widget-judul" id="judul-trending">Sedang Naik</h2>
          <ol class="daftar-trending">
            <li><a href="#">Jejak Kereta Malam di Jalur Tebing Kota Lama</a></li>
            <li><a href="#">Panduan Menyeduh Kopi Gayo Tanpa Alat Mahal</a></li>
            <li><a href="#">Wayang untuk Pemula: Dari Mana Memulai</a></li>
            <li><a href="#">Peta Jalur Sepeda Menuju Waduk Utara</a></li>
            <li><a href="#">Serba-Serbi Kode QR di Pasar Subuh</a></li>
          </ol>
        </section>

        <section class="widget widget-buletin" aria-labelledby="judul-buletin">
          <h2 class="widget-judul" id="judul-buletin">Buletin Lentera</h2>
          <p>Ringkasan membaca terpilih setiap Jumat pagi, langsung ke kotak masuk Anda.</p>
          <form class="form-buletin" action="#">
            <label for="surel">Alamat surel</label>
            <input id="surel" name="surel" type="email" placeholder="[email protected]" required>
            <button type="submit">Daftar Buletin</button>
          </form>
        </section>
      </aside>
    </div>
  </main>

  <footer class="kaki-halaman">
    <div class="kaki-halaman-dalam">
      <p>© 2026 Lentera Media</p>
      <nav aria-label="Tautan kaki halaman">
        <ul>
          <li><a href="#">Tentang</a></li>
          <li><a href="#">Arsip</a></li>
          <li><a href="#">Kontak</a></li>
        </ul>
      </nav>
    </div>
  </footer>

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

css

/* ============================================================
   Lentera — beranda majalah digital
   Proyek akhir Course CSS: tipografi editorial + grid layout
   ============================================================ */

/* ---------- 1. Token desain ---------- */
:root {
  --kertas: #faf7f1;
  --kertas-panel: #f0e9dd;
  --tinta: #211c16;
  --tinta-lunak: #6d635a;
  --aksen: #93312a;
  --garis: #ddd3c3;
  --serif: Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --lebar-konten: 1160px;
  --jarak-kolom: 40px;
}

/* ---------- 2. Dasar dan reset ringkas ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--kertas);
  color: var(--tinta);
  font-family: var(--sans);
  line-height: 1.6;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

p { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--aksen); outline-offset: 2px; }
figure { margin: 0; }

/* ---------- 3. Komponen tipografi editorial ---------- */
.kicker {
  margin-bottom: 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aksen);
}

.judul-sorotan { font-size: clamp(2.125rem, 4.5vw, 3.375rem); }
.judul-kartu { font-size: clamp(1.25rem, 2vw, 1.5rem); }

.dek { margin-top: 12px; font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); line-height: 1.55; color: var(--tinta-lunak); }
.byline { margin-top: 14px; font-size: 0.875rem; color: var(--tinta-lunak); }

/* Tautan judul: garis bawah muncul saat hover atau fokus keyboard */
.tautan-judul { text-decoration: none; }
.tautan-judul:hover,
.tautan-judul:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--aksen);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* ---------- 4. Masthead ---------- */
.masthead { border-bottom: 3px double var(--tinta); }
.masthead-dalam { max-width: var(--lebar-konten); margin-inline: auto; padding-inline: 24px; }

.masthead-edisi {
  padding-block: 10px;
  border-bottom: 1px solid var(--garis);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-lunak);
}

.masthead-baris {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 20px 16px;
}

.masthead-logo { font-family: var(--serif); font-size: clamp(2.25rem, 6vw, 3.5rem); letter-spacing: 0.01em; text-transform: uppercase; }
.masthead-logo a { text-decoration: none; }

/* ---------- 5. Navigasi utama ---------- */
.nav-utama ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  margin: 0;
  padding-block: 12px;
  border-top: 1px solid var(--garis);
  list-style: none;
}

.nav-utama a {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

.nav-utama a:hover,
.nav-utama a[aria-current="page"] { color: var(--aksen); }

/* Tombol menu: tersembunyi di desktop, aktif di layar sempit */
.nav-toggle {
  display: none;
  padding: 8px 16px;
  border: 1px solid var(--tinta);
  background: transparent;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta);
  cursor: pointer;
}

.nav-toggle:hover { background: var(--tinta); color: var(--kertas); }

/* Mode seluler: menu tampil hanya saat data-terbuka="true" */
@media (max-width: 720px) {
  .nav-toggle { display: inline-block; }
  .nav-utama { display: none; }
  .nav-utama[data-terbuka="true"] { display: block; }
  .nav-utama ul { flex-direction: column; gap: 0; padding-block: 6px; }
  .nav-utama a { padding-block: 12px; border-bottom: 1px solid var(--garis); }
  .nav-utama li:last-child a { border-bottom: none; }
}

/* ---------- 6. Wadah halaman ---------- */
.halaman { max-width: var(--lebar-konten); margin-inline: auto; padding-inline: 24px; }

/* ---------- 7. Sorotan utama (hero) ---------- */
.sorotan {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--jarak-kolom);
  align-items: center;
  padding-block: 48px 56px;
}

.sorotan-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sorotan-media figcaption { margin-top: 8px; font-size: 0.8125rem; color: var(--tinta-lunak); }

/* ---------- 8. Kerangka isi: grid artikel + sidebar ---------- */
.isi-utama {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: var(--jarak-kolom);
  align-items: start;
  padding-block: 32px 64px;
  border-top: 3px double var(--tinta);
}

.grid-artikel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; align-content: start; }

/* Kartu lebar membentang dua kolom dengan susunan mendatar */
.kartu-artikel--lebar {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}

.kartu-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.kartu-artikel--lebar .kartu-media img { aspect-ratio: 16 / 10; }
.kartu-artikel .dek { margin-top: 8px; font-size: 0.9375rem; }
.kartu-artikel .byline { margin-top: 10px; font-size: 0.8125rem; }

/* ---------- 9. Sidebar ---------- */
.sidebar {
  display: grid;
  gap: 36px;
  align-content: start;
  padding-left: var(--jarak-kolom);
  border-left: 1px solid var(--garis);
}

.widget-judul {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--tinta);
  font-size: 1.0625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Daftar trending dengan nomor peringkat ber-serif */
.daftar-trending { margin: 0; padding: 0; list-style: none; counter-reset: peringkat; }

.daftar-trending li {
  counter-increment: peringkat;
  display: grid;
  grid-template-columns: 2ch 1fr;
  gap: 14px;
  align-items: baseline;
  padding-block: 12px;
  border-bottom: 1px solid var(--garis);
}

.daftar-trending li::before {
  content: counter(peringkat);
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1;
  color: var(--aksen);
}

.daftar-trending a { font-size: 0.9375rem; font-weight: 600; text-decoration: none; }
.daftar-trending a:hover { color: var(--aksen); text-decoration: underline; }

/* Kotak buletin */
.widget-buletin { padding: 24px 20px; border-top: 3px solid var(--aksen); background: var(--kertas-panel); }
.widget-buletin p { margin-top: 10px; font-size: 0.875rem; color: var(--tinta-lunak); }
.form-buletin { display: grid; gap: 10px; margin-top: 16px; }
.form-buletin label { font-size: 0.8125rem; font-weight: 700; }
.form-buletin input { padding: 10px 12px; border: 1px solid var(--garis); background: #ffffff; font: inherit; }

.form-buletin button {
  padding: 10px 16px;
  border: none;
  background: var(--tinta);
  color: var(--kertas);
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.form-buletin button:hover { background: var(--aksen); }

/* ---------- 10. Kaki halaman ---------- */
.kaki-halaman { border-top: 3px double var(--tinta); background: var(--kertas-panel); }

.kaki-halaman-dalam {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: center;
  justify-content: space-between;
  max-width: var(--lebar-konten);
  margin-inline: auto;
  padding: 20px 24px;
  font-size: 0.875rem;
  color: var(--tinta-lunak);
}

.kaki-halaman nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kaki-halaman a { text-decoration: none; }
.kaki-halaman a:hover { color: var(--aksen); text-decoration: underline; }

/* ---------- 11. Responsif: reflow layout di titik potong ---------- */
@media (max-width: 960px) {
  .sorotan { grid-template-columns: 1fr; padding-block: 36px 44px; }
  .isi-utama { grid-template-columns: 1fr; padding-block: 24px 48px; }
  .sidebar { padding-left: 0; padding-top: 32px; border-left: none; border-top: 1px solid var(--garis); }
  .kartu-artikel--lebar { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .grid-artikel { grid-template-columns: 1fr; gap: 32px; }
}

js

// Navigasi seluler majalah Lentera.
// Tombol "Menu" menukar nilai atribut data-terbuka pada <nav>
// dan menyinkronkan aria-expanded agar pembaca layar ikut tahu kondisi menu.

const tombolNav = document.getElementById('tombol-nav');
const navUtama = document.getElementById('nav-utama');

function aturMenu(terbuka) {
  navUtama.setAttribute('data-terbuka', terbuka ? 'true' : 'false');
  tombolNav.setAttribute('aria-expanded', terbuka ? 'true' : 'false');
  tombolNav.textContent = terbuka ? 'Tutup' : 'Menu';
}

if (tombolNav && navUtama) {
  tombolNav.addEventListener('click', () => {
    const sedangTerbuka = navUtama.getAttribute('data-terbuka') === 'true';
    aturMenu(!sedangTerbuka);
  });

  // Tutup menu kembali setelah salah satu tautan dipilih (nyaman di layar sentuh).
  navUtama.addEventListener('click', (peristiwa) => {
    if (peristiwa.target.closest('a')) {
      aturMenu(false);
    }
  });
}

Ringkasan #

Bagian 5 menuntaskan reflow di 960px dan 640px, menghidupkan tombol menu dengan 26 baris JavaScript yang menyinkronkan data-terbuka dan aria-expanded, lalu mengunci snapshot agar identik dengan src/. Beranda Lentera siap dibuka langsung dari src/index.html.

Reflow pada Dua Titik Potong #

Menghidupkan Tombol Menu dengan JavaScript #

Pemeriksaan Akhir dan Sinkronisasi #

Ringkasan #