MEMBUAT TOMBOL NAVIGASI BAWAH DENGAN PILL TABS NAVIGASI
Navigasi merupakan elemen penting dalam sebuah situs web atau aplikasi. Salah satu jenis navigasi yang populer adalah bottom navigation atau navigasi bawah, terutama dalam desain mobile-first. Bottom navigation memudahkan pengguna dalam mengakses menu utama tanpa harus menggulir ke atas.
 |
Dalam artikel ini, kita akan membahas cara membuat Tombol Navigasi Bawah dengan Pill Tabs Navigasi menggunakan HTML dan CSS murni. Kita juga akan menambahkan sedikit interaktivitas menggunakan JavaScript agar navigasi dapat berpindah antar tab dengan lancar.
Apa Itu Pill Tabs Navigation?
Pill Tabs Navigation adalah jenis navigasi di mana tab memiliki bentuk membulat seperti pil (pill-shaped). Biasanya digunakan dalam bottom navigation untuk memberikan pengalaman pengguna yang lebih nyaman dan modern. Desain ini sering dijumpai pada aplikasi mobile karena memberikan tampilan yang bersih dan mudah digunakan.
Keunggulan Pill Tabs Navigation:
-
Desain modern dan responsif.
-
Mudah digunakan di perangkat mobile.
-
Tampilan yang menarik dibandingkan navigasi konvensional.
Struktur Dasar HTML Bottom Navigasi Dengan Pill Tabs
Pertama, kita akan membuat struktur HTML dasar untuk bottom navigation. Kode ini akan memiliki 4 menu utama serta 1 tombol floating (tengah) untuk akses cepat.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bottom Navigation</title>
<style>
/* Tambahkan CSS di bagian selanjutnya */
</style>
</head>
<body>
<div id="home-content" class="content active">
<p>Ini konten home</p>
</div>
<div id="mutasi-content" class="content">
<p>Ini konten catatan orderan</p>
</div>
<div id="aktivitas-content" class="content">
<p>Ini konten tombol hubungi</p>
</div>
<div id="akun-content" class="content">
<p>Ini konten bagian profil</p>
</div>
<div class="bottom-nav">
<a href="#" class="nav-item active" onclick="showTab('home')">Home</a>
<a href="#" class="nav-item" onclick="showTab('mutasi')">Orderan</a>
<div class="floating-btn">QR</div>
<a href="#" class="nav-item" onclick="showTab('aktivitas')">Hubungi</a>
<a href="#" class="nav-item" onclick="showTab('akun')">Akun</a>
</div>
<script>
function showTab(tab) {
document.querySelectorAll('.content').forEach(c => c.classList.remove('active'));
document.querySelector(`#${tab}-content`).classList.add('active');
document.querySelectorAll('.nav-item').forEach(item => item.classList.remove('active'));
event.currentTarget.classList.add('active');
}
</script>
</body>
</html>
Styling CSS Pill Tabs Navigasi Bawah
Berikutnya, kita akan menambahkan gaya CSS agar navigasi tampil menarik dengan tampilan Pill Tabs Navigation.
.content {
display: none;
padding: 20px;
}
.content.active {
display: block;
}
.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: white;
display: flex;
justify-content: space-around;
align-items: center;
padding: 10px 0;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.nav-item {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: gray;
font-size: 14px;
padding: 10px 15px;
border-radius: 20px;
transition: all 0.3s;
}
.nav-item.active {
background-color: #007bff;
color: white;
font-weight: bold;
}
.floating-btn {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 60px;
background: #007bff;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
border: 4px solid white;
}
Menambahkan JavaScript Navigasi Bawah Dengan Pill
Agar setiap tab bisa berpindah saat diklik, kita menambahkan JavaScript sederhana.
function showTab(tab) {
document.querySelectorAll('.content').forEach(c => c.classList.remove('active'));
document.querySelector(`#${tab}-content`).classList.add('active');
document.querySelectorAll('.nav-item').forEach(item => item.classList.remove('active'));
event.currentTarget.classList.add('active');
}
Kesimpulan
Dengan menggunakan kombinasi HTML, CSS, dan JavaScript, kita telah berhasil membuat Tombol Navigasi Bawah dengan Pill Tabs Navigasi. Navigasi ini memberikan pengalaman pengguna yang lebih baik dan tampilan yang lebih modern.
Keuntungan menggunakan metode ini:
-
Tanpa library eksternal (seperti Bootstrap atau FontAwesome).
-
Desain yang elegan dan responsif.
-
Kemudahan dalam kustomisasi.
Sekarang, Anda bisa mengembangkan fitur ini lebih lanjut dengan animasi tambahan atau ikon yang lebih menarik. Semoga artikel ini bermanfaat!
Rate This Article
Thanks for reading: Membuat Bottom Navigation Dengan Pill Mirip Aplikasi Brimo, Sorry, my English is bad:)
