membuat menu tab fixed di bawah
hasil pencarian Kode script membuat tab menu bawah keren
kode Script membuat tab menu bawah keren terbaru!
Salin dan tempel Kode script membuat tab menu bawah keren ini di blog kamu,lihat kode script di bawah..
klik untuk menyalin
👇
<!-- Bootstrap 5.3 CSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* Navbar bawah */
.nav {
display: flex;
justify-content: space-around;
background: white;
padding: 10px 0;
border-top: 1px solid #ccc;
position: fixed;
bottom: 0;
width: 100%;
z-index: 1050;
}
.nav-item {
text-align: center;
font-size: 12px;
cursor: pointer;
}
/* Modal slide dari atas */
.modal-top .modal-dialog {
transform: translateY(-100%);
transition: transform 0.3s ease-out;
margin: 0;
}
.modal-top.show .modal-dialog {
transform: translateY(0);
}
/* Modal slide dari bawah */
.modal-bottom .modal-dialog {
transform: translateY(100%);
transition: transform 0.3s ease-out;
margin: 0;
}
.modal-bottom.show .modal-dialog {
transform: translateY(0);
}
</style>
<!-- Navbar -->
<div class="nav">
<div class="nav-item">🏠<br>Beranda</div>
<div class="nav-item" data-bs-toggle="modal" data-bs-target="#modalOrder">📦<br>Order</div>
<div class="nav-item" data-bs-toggle="modal" data-bs-target="#modalRating">⭐<br>Rating</div>
<div class="nav-item" data-bs-toggle="modal" data-bs-target="#modalMenu">☰<br>Menu</div>
</div>
<!-- Modal Order (slide dari atas) -->
<div class="modal fade modal-top" id="modalOrder" tabindex="-1">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Riwayat Pesanan Anda</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>📦 Belum ada pesanan atau sedang diproses...</p>
<!-- Boleh tambahkan list pesanan real -->
</div>
</div>
</div>
</div>
<!-- Modal Rating (slide dari atas) -->
<div class="modal fade modal-top" id="modalRating" tabindex="-1">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Beri Rating</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>⭐ Silakan beri rating layanan kami:</p>
<div class="text-center">
⭐⭐⭐⭐⭐
</div>
<!-- Bisa diganti form real -->
</div>
</div>
</div>
</div>
<!-- Modal Menu (slide dari bawah) -->
<div class="modal fade modal-bottom" id="modalMenu" tabindex="-1">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Menu Pengguna</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<ul class="list-group">
<li class="list-group-item">👤 Akun / Dashboard Konsumen</li>
<li class="list-group-item">❓ Bantuan</li>
<li class="list-group-item text-danger">🚪 Logout</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
Komentar untuk Kode script membuat tab menu bawah keren