Sidebar merupakan elemen penting dalam desain website yang membantu pengguna menavigasi website dengan mudah. Sidebar biasanya berisi tautan ke halaman utama, kategori, atau konten penting lainnya.
Dalam artikel ini, kita akan mempelajari cara membuat sidebar sederhana dengan HTML dan CSS.
Langkah 1: Struktur HTML
Pertama, kita akan membuat struktur HTML dasar untuk sidebar kita. Kita akan menggunakan elemen-elemen HTML seperti <div> dan <ul>.
Nama File: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sidebar Sederhana</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="sidebar">
<h2>Sidebar</h2>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div class="content">
<h1>Welcome to My Website</h1>
<p>This is the main content area.</p>
</div>
</body>
</html>
Langkah 2: Styling dengan CSS
Selanjutnya, kita akan menambahkan beberapa gaya dasar menggunakan CSS. Buat file CSS dengan nama styles.css dan tambahkan kode berikut:
Nama File: style.css
/* Reset CSS untuk menghilangkan margin dan padding default */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex; /* Mengatur layout menggunakan flexbox */
font-family: Arial, sans-serif;
}
.sidebar {
width: 250px; /* Lebar sidebar */
background-color: #333; /* Warna latar belakang sidebar */
padding: 15px; /* Padding di dalam sidebar */
color: white; /* Warna teks di sidebar */
height: 100vh; /* Membuat sidebar penuh tinggi layar */
}
.sidebar h2 {
text-align: center; /* Memusatkan teks judul */
}
.sidebar ul {
list-style: none; /* Menghilangkan bullet point pada list */
padding: 0;
}
.sidebar ul li {
margin: 20px 0; /* Spasi antar item menu */
}
.sidebar ul li a {
color: white; /* Warna teks link */
text-decoration: none; /* Menghilangkan underline pada link */
display: block; /* Membuat link block level element */
padding: 10px; /* Padding pada link */
}
.sidebar ul li a:hover {
background-color: #575757; /* Warna latar belakang saat hover */
border-radius: 5px; /* Membuat sudut link membulat */
}
.content {
flex: 1; /* Mengisi sisa ruang yang tersedia */
padding: 20px; /* Padding di dalam konten utama */
}
Penjelasan Kode CSS
- Reset CSS: Menghilangkan margin dan padding default untuk semua elemen agar styling lebih konsisten.
- body: Mengatur layout menggunakan flexbox untuk menempatkan sidebar dan konten utama berdampingan.
- .sidebar: Mengatur lebar, warna latar belakang, padding, warna teks, dan tinggi penuh untuk sidebar.
- .sidebar h2: Memusatkan teks judul di dalam sidebar.
- .sidebar ul: Menghilangkan bullet point pada list dan padding.
- .sidebar ul li: Memberi jarak antar item menu.
- .sidebar ul li a: Mengatur warna teks link, menghilangkan underline, membuat link sebagai block level element, dan menambahkan padding.
- .sidebar ul li a: Memberi efek hover dengan latar belakang abu-abu dan sudut membulat pada link.
- .content: Mengisi sisa ruang yang tersedia dan menambahkan padding di dalam konten utama.
Tips
- Anda dapat mengubah warna, font, dan properti CSS lainnya sesuai dengan keinginan Anda.
- Anda dapat menambahkan elemen lain ke sidebar, seperti logo, ikon media sosial, atau form pencarian.
- Anda dapat menggunakan JavaScript untuk membuat sidebar yang responsif dan dapat dilipat.
Kesimpulan
Membuat sidebar sederhana dengan HTML dan CSS mudah dilakukan. Dengan mengikuti langkah-langkah di atas, Anda dapat membuat sidebar yang fungsional dan menarik untuk website Anda.
Tinggalkan Balasan