Sliding tab atau sliding menu adalah sebuah elemen dalam desain web yang memungkinkan untuk menyembunyikan dan menampilkan konten dengan cara menggeser (slide) bagian dari halaman ke atas atau ke samping. Biasanya, sliding tab atau sliding menu digunakan untuk mengatur tampilan pada bagian navigasi atau menu di website. Saat pengguna mengklik atau menyentuh bagian tertentu, konten yang tersembunyi akan muncul secara mulus dengan animasi geser.
Fungsi Sliding Tab atau Sliding Menu pada Website
Sliding tab atau sliding menu memiliki beberapa fungsi yang bermanfaat pada website:
Penghematan Ruang: Sliding tab memungkinkan konten tambahan untuk disembunyikan saat tidak digunakan, sehingga membantu menghemat ruang pada tampilan website. Ini sangat berguna pada desain yang ingin menjaga tampilan sederhana dan terorganisir.
Peningkatan Pengalaman Pengguna: Dengan menggunakan sliding tab, konten tambahan dapat diakses dengan mudah dan tanpa harus membuka halaman baru. Ini meningkatkan pengalaman pengguna dengan memberikan navigasi yang lebih lancar dan cepat.
Organisasi dan Keteraturan: Sliding tab memungkinkan penataan konten yang lebih teratur dan terorganisir, terutama jika ada banyak elemen yang ingin ditampilkan pada bagian navigasi atau menu.
Desain yang Elegan: Efek sliding memberikan kesan desain yang lebih menarik dan elegan. Penggunaan animasi dalam transisi antara konten yang muncul dan menghilang membuat tampilan website lebih dinamis.
Cara Membuat Sliding Tab atau Sliding Menu
Berikut adalah langkah-langkah umum untuk membuat sliding tab atau sliding menu menggunakan HTML, CSS, dan JavaScript:
HTML: Buat struktur HTML untuk sliding tab dengan menggunakan elemen-elemen seperti <div>, <ul>, atau <nav>. Definisikan setiap tab dan kontennya dengan memberikan atribut khusus untuk mengidentifikasi mereka.
CSS: Atur tampilan sliding tab menggunakan CSS. Anda bisa mengatur posisi, ukuran, warna, dan gaya lainnya sesuai dengan desain yang diinginkan. Anda juga perlu menyembunyikan konten tambahan dengan display: none; atau posisi di luar layar.
JavaScript: Gunakan JavaScript untuk mengendalikan efek sliding dan animasi. Anda dapat mengaktifkan fungsi slide saat pengguna mengklik atau menyentuh tab, sehingga konten tersembunyi akan muncul dengan efek geser. Anda bisa menggunakan JavaScript murni atau framework seperti jQuery untuk mempermudah prosesnya.
Responsif: Pastikan desain sliding tab Anda responsif, sehingga dapat berfungsi dengan baik di berbagai perangkat, termasuk smartphone dan tablet.
Dalam membuat sliding tab atau sliding menu, kreativitas Anda menjadi kunci untuk menciptakan tampilan yang menarik dan sesuai dengan kebutuhan website Anda. Selain itu, pastikan untuk menguji dan mengoptimalkan performa sliding tab agar memberikan pengalaman pengguna yang lancar dan menyenangkan.
Berikut skript sliding tab / sliding menu sederhana:
File index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.tailwindcss.com"></script> <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;800&display=swap" rel="stylesheet"> <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="container"> <div class="tabs"> <input type="radio" id="radio-1" name="tabs" checked /> <label class="tab" for="radio-1">Upcoming<span class="notification">2</span></label> <input type="radio" id="radio-2" name="tabs" /> <label class="tab" for="radio-2">Development</label> <input type="radio" id="radio-3" name="tabs" /> <label class="tab" for="radio-3">Completed</label> <span class="glider"></span> </div> </div> </body> </html>
File style.css
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"); :root { --primary-color: #185ee0; --secondary-color: #e6eef9; } *, *:after, *:before { box-sizing: border-box; } body { font-family: "Inter", sans-serif; background-color: rgba(230, 238, 249, 0.5); } .container { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; } .tabs { display: flex; position: relative; background-color: #fff; box-shadow: 0 0 1px 0 rgba(24, 94, 224, 0.15), 0 6px 12px 0 rgba(24, 94, 224, 0.15); padding: 0.75rem; border-radius: 99px; } .tabs * { z-index: 2; } input[type="radio"] { display: none; } .tab { display: flex; align-items: center; justify-content: center; height: 54px; width: 200px; font-size: 1.25rem; font-weight: 500; border-radius: 99px; cursor: pointer; transition: color 0.15s ease-in; } .notification { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin-left: 0.75rem; border-radius: 50%; background-color: var(--secondary-color); transition: 0.15s ease-in; } input[type="radio"]:checked + label { color: var(--primary-color); } input[type="radio"]:checked + label > .notification { background-color: var(--primary-color); color: #fff; } input[id="radio-1"]:checked ~ .glider { transform: translateX(0); } input[id="radio-2"]:checked ~ .glider { transform: translateX(100%); } input[id="radio-3"]:checked ~ .glider { transform: translateX(200%); } .glider { position: absolute; display: flex; height: 54px; width: 200px; background-color: var(--secondary-color); z-index: 1; border-radius: 99px; transition: 0.25s ease-out; } @media (max-width: 700px) { .tabs { transform: scale(0.6); } }
Sumber source code klik codepen
Versi tutorial video