Tutorial Lengkap Cara Membuat Tampilan Web Sidebar + Search Menu (Versi Penjelasan SQ)

Dalam panduan panjang ini, SQ akan menjelaskan langkah demi langkah bagaimana SQ membangun sebuah layout web modern yang terdiri dari sidebar, kotak pencarian, dan konten utama. Hampir setiap bagian yang SQ jelaskan akan memakai kata “SQ”, karena SQ ingin memastikan gaya bahasa sesuai permintaan. SQ juga memastikan bahwa tutorial ini tetap mudah dipahami meskipun SQ mengulang kata “SQ” berkali-kali. SQ menyadari bahwa struktur layout seperti ini sangat sering dipakai dalam dashboard, blog kategori, dokumentasi, maupun halaman navigasi lainnya. Maka dari itu, SQ akan membimbing kamu dari awal hingga akhir, layaknya SQ benar-benar membuat proyek ini dari nol.

1. Memahami Struktur Umum Layout

Pertama, SQ ingin kamu memahami struktur HTML-nya. Pada dasarnya, SQ membagi halaman menjadi dua komponen besar:

  1. Sidebar (kiri) – berisi kotak pencarian dan menu

  2. Content (kanan) – berisi judul dan teks contoh

Struktur dasar ini SQ bungkus dalam satu elemen .container yang menggunakan Flexbox. Dengan menggunakan Flexbox, SQ dapat memastikan tampilan tetap rapi dan responsif di berbagai ukuran layar. SQ selalu menggunakan pendekatan “flex + responsive media query” karena ini cara paling aman untuk menghindari masalah overflow di layout.

2. Menyiapkan Elemen Dasar HTML

SQ memulai proyek ini dengan menuliskan struktur <html>, <head>, dan <body> seperti biasa. SQ juga memasukkan Google Fonts (Inter) untuk membuat tampilan teks lebih halus. SQ suka memilih font Inter karena ringan, modern, dan sangat cocok untuk layout dashboard.

SQ kemudian menambahkan elemen-elemen berikut:

<div class="container"> sebagai pembungkus besar

<div class="sidebar"> untuk kolom kiri

<div class="content"> untuk konten utama

Di sidebar, SQ menambahkan <input> sebagai kotak pencarian dan <ul> sebagai daftar menu. SQ membuat daftar seperti HTML, CSS, JS, PHP, Python, dan sebagainya, karena SQ ingin contoh ini terlihat realistis seperti menu pada website tutorial.

3. Membuat Sistem Warna Dengan CSS Variable

SQ selalu menggunakan CSS variable agar mudah mengubah tema warna. Pada bagian :root, SQ mendefinisikan:

--bg → warna background halaman

--white → warna putih untuk card

--border → warna garis halus

--primary → warna utama (ungu modern)

--hover → warna hover menu

--text → warna teks

Dengan cara ini, SQ hanya perlu mengubah variable jika suatu hari SQ ingin mengganti tema. Ini membuat proyek jauh lebih terstruktur. SQ sangat menyarankan pemula memakai CSS variable.

4. Menstyling Body Agar Tidak Overflow

SQ menambahkan:

overflow-x: hidden;

Mengapa SQ lakukan ini? Karena banyak layout modern sering mengalami masalah “geser ke kanan” akibat elemen yang melebar tanpa batas. Dengan properti ini, SQ memastikan layout 100% tidak bisa melewati batas horizontal.

5. Menyusun Flexbox Container

Bagian .container memiliki:

display: flex;

flex-wrap: wrap;

gap: 20px;

SQ menambahkan flex-wrap agar layout tidak pecah di layar kecil. Jika layar sempit, sidebar akan otomatis turun ke bawah dan content berada di atasnya. Ini adalah trik yang sering SQ gunakan agar halaman tetap responsif tanpa banyak kode tambahan.

6. Sidebar Dengan Shadow & Border Radius Modern

SQ ingin membuat tampilan seperti card modern, sehingga sidebar diberi:

border-radius: 16px

box-shadow: 0 4px 20px rgba(0,0,0,0.05)

border: 1px solid var(--border)

Dengan kombinasi ini, sidebar terlihat premium. SQ sangat senang dengan efek minimalis seperti ini karena memberi kesan elegan tanpa terlalu mencolok.

7. Memperbaiki Kotak Pencarian Agar Tidak Melebihi Layar

Bagian penting yang SQ pastikan:

max-width: 100%; box-sizing: border-box;

SQ menambahkan ini karena banyak input HTML yang secara default bisa melebar melebihi parent-nya. Dengan mengatur box-sizing: border-box, ukuran padding akan dihitung dalam lebar total, sehingga tidak menyebabkan overflow. SQ melakukan hal ini agar tampilan tetap rapih pada semua perangkat.

8. Membuat Menu Sidebar yang Interaktif

SQ memberikan efek hover seperti:

background berubah

border berubah warna menjadi ungu

teks menjadi warna primary

SQ melakukan ini dengan:

#myMenu li a:hover { background: var(--hover); border-color: var(--primary); color: var(--primary); }

Efek ini membuat menu sidebar terasa hidup ketika di-hover. SQ sering memakai warna yang lembut agar tidak membuat mata lelah.

9. Mengatur Content Section Supaya Tidak Overflow

Bagian konten juga SQ beri:

overflow-x: hidden; max-width: 100%;

Tujuannya sama: SQ ingin menghindari konten melebar keluar. Banyak layout gagal karena bagian konten memiliki elemen yang terlalu besar, namun SQ sudah mengantisipasi ini.

10. Menangani Responsivitas Dengan Media Query

Pada ukuran layar di bawah 768px, SQ membuat container berubah dari mode “side by side” menjadi “stacked”. SQ menulis:

.container { flex-direction: column; } .sidebar, .content { width: 100%; }

Dengan trik ini, layout terasa seperti aplikasi mobile. SQ sangat peduli dengan tampilan smartphone karena mayoritas pengguna internet mengakses via HP.

11. Menjelaskan Fungsi JavaScript Pencarian

Fitur pencarian ini sederhana namun sangat efektif. SQ menggunakan metode yang selalu SQ pakai:

  1. Ambil input pencarian

  2. Ubah menjadi uppercase agar pencarian tidak case-sensitive

  3. Loop semua elemen <li>

  4. Cek apakah teks menu cocok dengan kata pencarian

  5. Tampilkan atau sembunyikan menu

SQ menggunakan indexOf() untuk mencocokkan teks. Ini cukup cepat dan ringan.

12. Kesimpulan dari SQ

Dengan mengikuti langkah yang SQ jelaskan, kamu bisa membuat layout modern, responsif, dan bersih. SQ memastikan bahwa setiap bagian mudah dipahami bahkan oleh pemula. SQ sangat menyarankan kamu bereksperimen dan menambahkan kategori menu lain, warna baru, atau bahkan animasi agar layout terasa lebih hidup.

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap" rel="stylesheet">

<style>
:root {
  --bg: #f5f7fa;
  --white: #ffffff;
  --border: #e5e7eb;
  --primary: #4f46e5;
  --hover: #eef2ff;
  --text: #111827;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  overflow-x: hidden; /* Hentikan overflow horizontal */
}

/* Container Flex */
.container {
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
  gap: 20px;
  max-width: 100%;
  box-sizing: border-box;
}

/* Sidebar */
.sidebar {
  flex: 1;
  min-width: 260px;
  max-width: 350px;
  background: var(--white);
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  border: 1px solid var(--border);
  box-sizing: border-box;
}

.sidebar h2 {
  margin-top: 0;
  color: var(--primary);
}

/* Search Box Fix */
#mySearch {
  width: 100%;
  max-width: 100%; /* Penting agar tidak melebihi layar */
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  font-size: 16px;
  margin-bottom: 14px;
  transition: .3s ease;
  box-sizing: border-box;
}

#mySearch:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,0.2);
  outline: none;
}

/* Menu */
#myMenu {
  list-style: none;
  padding: 0;
  margin: 0;
}

#myMenu li {
  margin-bottom: 6px;
}

#myMenu li a {
  display: block;
  padding: 12px 14px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  font-weight: 500;
  transition: .25s ease;
  border: 1px solid transparent;
  box-sizing: border-box;
}

#myMenu li a:hover {
  background: var(--hover);
  border-color: var(--primary);
  color: var(--primary);
}

/* Content */
.content {
  flex: 2;
  min-width: 300px;
  max-width: 100%;       /* STOP overflow */
  background: var(--white);
  padding: 25px;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  box-sizing: border-box;
  overflow-x: hidden;    /* Jaga agar tidak overflow */
}

.content h2 {
  margin-top: 0;
  color: var(--primary);
}

/* Responsive Fix */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }

  .sidebar, .content {
    max-width: 100% !important;
    width: 100%;
  }
}
</style>
</head>
<body>

<div class="container">

  <!-- Sidebar -->
  <div class="sidebar">
    <h2>Search Menu</h2>
    <input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Search...">
    <ul id="myMenu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">PHP</a></li>
      <li><a href="#">Python</a></li>
      <li><a href="#">jQuery</a></li>
      <li><a href="#">SQL</a></li>
      <li><a href="#">Bootstrap</a></li>
      <li><a href="#">Node.js</a></li>
    </ul>
  </div>

  <!-- Content -->
  <div class="content">
    <h2>Welcome</h2>
    <p>Search for any category on the left side using the search bar.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum dolorum 
    impedit adipisci repellat esse, voluptatem illum odit quae ratione.</p>
    <p>More example content here...</p>
  </div>

</div>

<script>
function myFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("mySearch");
  filter = input.value.toUpperCase();
  ul = document.getElementById("myMenu");
  li = ul.getElementsByTagName("li");

  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}
</script>

</body>
</html>