Sobat Code, dalam dunia web development, penggunaan icon bar atau bilah ikon telah menjadi salah satu elemen yang sangat umum digunakan dalam desain antarmuka pengguna. Icon bar dapat memberikan navigasi yang jelas dan intuitif bagi pengguna, memperkaya tampilan situs web, dan meningkatkan pengalaman pengguna secara keseluruhan. Dalam artikel ini, kita akan membahas langkah-langkah tentang cara membuat icon bar dengan HTML, CSS, dan sedikit sentuhan JavaScript.
Mengenal Icon Bar
Sebelum kita memulai, penting untuk memahami apa itu icon bar dan bagaimana fungsinya dalam desain web. Icon bar adalah sekelompok ikon atau simbol yang disusun secara horizontal atau vertikal dalam sebuah bilah atau panel. Icon tersebut biasanya digunakan untuk memberikan akses cepat ke halaman atau fitur tertentu dalam sebuah situs web.
Langkah 1: Persiapan
Langkah pertama dalam membuat icon bar adalah melakukan persiapan. Kita perlu membuat struktur dasar HTML untuk icon bar. Berikut adalah contoh kode HTML untuk struktur dasar icon bar:
<div class="icon-bar">
<a href="#"><i class="fa fa-home"></i></a>
<a href="#"><i class="fa fa-search"></i></a>
<a href="#"><i class="fa fa-envelope"></i></a>
<a href="#"><i class="fa fa-globe"></i></a>
</div>
Pada contoh di atas, kita menggunakan tag div dengan kelas “icon-bar” sebagai wadah untuk icon-icon. Setiap icon ditempatkan di dalam tag anchor (a) dengan atribut href yang menunjukkan tujuan atau link saat icon tersebut diklik.
Langkah 2: Styling dengan CSS
Selanjutnya, kita perlu mengatur tata letak dan gaya untuk icon bar menggunakan CSS. Berikut adalah contoh kode CSS untuk memberikan styling pada icon bar:
.icon-bar {
width: 100%;
background-color: #333;
overflow: auto;
}
.icon-bar a {
float: left;
width: 25%;
text-align: center;
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 20px;
}
.icon-bar a:hover {
background-color: #ddd;
color: black;
}
Pada contoh di atas, kita mengatur lebar, warna latar belakang, dan beberapa properti lainnya untuk icon bar. Setiap icon memiliki lebar 25% dari lebar total icon bar, sehingga icon-icon tersebut akan terbagi secara merata di dalamnya.
Langkah 3: Menambahkan Ikon
Setelah icon bar kita memiliki tata letak yang diinginkan, langkah selanjutnya adalah menambahkan ikon-ikon yang sesuai. Kita dapat menggunakan ikon dari berbagai sumber, seperti Font Awesome atau SVG icons.
Berikut adalah contoh menggunakan ikon dari Font Awesome:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
Kemudian, kita dapat menambahkan ikon-ikon tersebut ke dalam tag i di dalam setiap tag anchor (a), seperti contoh kode HTML berikut:
<a href="#"><i class="fa fa-home"></i></a>
<a href="#"><i class="fa fa-search"></i></a>
<a href="#"><i class="fa fa-envelope"></i></a>
<a href="#"><i class="fa fa-globe"></i></a>
Dalam contoh di atas, kita menggunakan ikon rumah, pencarian, pesan, dan dunia dari Font Awesome.
Langkah 4: Interaksi dengan JavaScript
Untuk menambahkan interaksi atau efek tambahan pada icon bar, kita dapat menggunakan JavaScript. Misalnya, kita dapat menambahkan efek animasi saat pengguna mengarahkan kursor ke salah satu ikon.
Berikut adalah contoh sederhana menggunakan JavaScript untuk menambahkan efek hover pada icon bar:
<script>
const icons = document.querySelectorAll('.icon-bar a');
icons.forEach(icon => {
icon.addEventListener('mouseover', () => {
icon.classList.add('hovered');
});
icon.addEventListener('mouseout', () => {
icon.classList.remove('hovered');
});
});
</script>
Dalam contoh di atas, kita menambahkan event listener untuk setiap ikon dalam icon bar. Ketika pengguna mengarahkan kursor ke ikon, kita menambahkan kelas “hovered” untuk memberikan efek visual tambahan.
Icon Bar Horizontal vs. Vertikal
Saat membuat icon bar, kita dapat memilih antara menampilkan ikon secara horizontal atau vertikal tergantung pada desain dan kebutuhan situs web. Mari kita jelaskan perbedaan antara keduanya:
Icon Bar Horizontal
Icon bar horizontal adalah tata letak di mana ikon-ikon disusun secara berdampingan dari kiri ke kanan. Icon bar horizontal umumnya ditempatkan di bagian atas atau bawah halaman web. Icon bar horizontal cocok digunakan untuk menyediakan akses cepat ke menu utama atau fitur penting situs web.
Contoh kode HTML untuk icon bar horizontal:
<div class="icon-bar horizontal">
<a href="#"><i class="fa fa-home"></i></a>
<a href="#"><i class="fa fa-search"></i></a>
<a href="#"><i class="fa fa-envelope"></i></a>
<a href="#"><i class="fa fa-globe"></i></a>
</div>
Untuk mengubah icon bar menjadi horizontal, kita hanya perlu menambahkan kelas “horizontal” pada tag div yang merupakan wadah icon bar.
Icon Bar Vertikal
Icon bar vertikal adalah tata letak di mana ikon-ikon disusun secara bertumpuk dari atas ke bawah. Icon bar vertikal seringkali ditempatkan di sisi kiri atau kanan halaman web. Icon bar vertikal cocok digunakan untuk menyediakan navigasi tambahan atau menu kontekstual.
Contoh kode HTML untuk icon bar vertikal:
<div class="icon-bar horizontal">
<a href="#"><i class="fa fa-home"></i></a>
<a href="#"><i class="fa fa-search"></i></a>
<a href="#"><i class="fa fa-envelope"></i></a>
<a href="#"><i class="fa fa-globe"></i></a>
</div>
Sama seperti icon bar horizontal, kita hanya perlu menambahkan kelas “vertical” pada tag div untuk mengubah icon bar menjadi vertikal.
Dengan memahami perbedaan antara icon bar horizontal dan vertikal, Sobat Code dapat memilih tata letak yang sesuai dengan desain dan fungsi situs web yang sedang dibangun.
Berikut adalah contoh CSS untuk mengatur tampilan icon bar horizontal dan vertikal:
/* Styling untuk icon bar horizontal */
.icon-bar.horizontal {
width: 100%;
background-color: #333;
overflow: auto;
}
.icon-bar.horizontal a {
float: left;
width: 25%;
text-align: center;
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 20px;
}
.icon-bar.horizontal a:hover {
background-color: #ddd;
color: black;
}
/* Styling untuk icon bar vertikal */
.icon-bar.vertical {
height: 100%;
width: 60px; /* Lebar ikon bar vertikal */
position: fixed;
z-index: 1;
top: 0;
background-color: #333;
overflow-x: hidden;
padding-top: 20px;
}
.icon-bar.vertical a {
display: block;
color: white;
padding: 16px;
text-decoration: none;
transition: all 0.3s ease;
text-align: center;
}
.icon-bar.vertical a:hover {
background-color: #ddd;
color: black;
}
Dalam contoh di atas, kita menggunakan kelas “horizontal” dan “vertical” pada tag div untuk membedakan antara icon bar horizontal dan vertikal. CSS kemudian diberikan untuk masing-masing tata letak, termasuk penyesuaian ukuran, warna, dan efek hover yang berbeda. Dengan menggunakan CSS ini, Sobat Code dapat dengan mudah menyesuaikan tampilan icon bar sesuai dengan kebutuhan desain situs web.
Berikut adalah contoh lengkap HTML dan CSS untuk icon bar horizontal dan vertikal:
Icon Bar Horizontal
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Icon Bar</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
/* Styling untuk icon bar horizontal */
.icon-bar.horizontal {
width: 100%;
background-color: #333;
overflow: auto;
}
.icon-bar.horizontal a {
float: left;
width: 25%;
text-align: center;
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 20px;
}
.icon-bar.horizontal a:hover {
background-color: #ddd;
color: black;
}
/* Styling untuk icon bar vertikal */
.icon-bar.vertical {
height: 100%;
width: 60px; /* Lebar ikon bar vertikal */
position: fixed;
z-index: 1;
top: 0;
background-color: #333;
overflow-x: hidden;
padding-top: 20px;
}
.icon-bar.vertical a {
display: block;
color: white;
padding: 16px;
text-decoration: none;
transition: all 0.3s ease;
text-align: center;
}
.icon-bar.vertical a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<h2>Icon Bar Horizontal</h2>
<div class="icon-bar horizontal">
<a href="#"><i class="fa fa-home"></i></a>
<a href="#"><i class="fa fa-search"></i></a>
<a href="#"><i class="fa fa-envelope"></i></a>
<a href="#"><i class="fa fa-globe"></i></a>
</div>
</body>
</html>
Icon Bar Vertikal
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Icon Bar</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
/* Styling untuk icon bar horizontal */
.icon-bar.horizontal {
width: 100%;
background-color: #333;
overflow: auto;
}
.icon-bar.horizontal a {
float: left;
width: 25%;
text-align: center;
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 20px;
}
.icon-bar.horizontal a:hover {
background-color: #ddd;
color: black;
}
/* Styling untuk icon bar vertikal */
.icon-bar.vertical {
height: 100%;
width: 60px; /* Lebar ikon bar vertikal */
position: fixed;
z-index: 1;
top: 0;
background-color: #333;
overflow-x: hidden;
padding-top: 20px;
}
.icon-bar.vertical a {
display: block;
color: white;
padding: 16px;
text-decoration: none;
transition: all 0.3s ease;
text-align: center;
}
.icon-bar.vertical a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<div class="icon-bar vertical">
<a href="#"><i class="fa fa-home"></i></a>
<a href="#"><i class="fa fa-search"></i></a>
<a href="#"><i class="fa fa-envelope"></i></a>
<a href="#"><i class="fa fa-globe"></i></a>
</div>
</body>
</html>
Dalam contoh di atas, HTML digabungkan dengan CSS di dalam satu dokumen. Icon bar horizontal dan vertikal ditampilkan secara terpisah dengan menggunakan kelas “horizontal” dan “vertical” pada tag div yang sesuai. CSS diberikan di dalam tag <style> untuk memperindah tampilan icon bar sesuai dengan tata letak yang dipilih.
Kesimpulan
Demikianlah tutorial singkat tentang cara membuat icon bar dalam desain web. Dengan mengikuti langkah-langkah di atas, Sobat Code dapat dengan mudah membuat icon bar yang menarik dan fungsional untuk meningkatkan navigasi dan pengalaman pengguna pada situs web. Jangan ragu untuk bereksperimen dengan berbagai gaya dan efek untuk menciptakan icon bar yang sesuai dengan kebutuhan dan gaya desain situs web Sobat Code!
