Pelajari bagaimana cara membuat menu tab vertikal dengan CSS dan JavaScript.
Section Artikel
Vertical Tab
Tab digunakan untuk aplikasi web satu halaman, atau untuk halaman web yang mampu menampilkan subjek yang berbeda.
Contoh:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {box-sizing: border-box} body {font-family: "Lato", sans-serif;} /* Style tab */ .tab { float: left; border: 1px solid #ccc; background-color: #f1f1f1; width: 30%; height: 300px; } /* Style buttons didalam tab */ .tab button { display: block; background-color: inherit; color: black; padding: 22px 16px; width: 100%; border: none; outline: none; text-align: left; cursor: pointer; transition: 0.3s; font-size: 17px; } /* Ubah warna background tombol on hover */ .tab button:hover { background-color: #ddd; } /* Buat kelas "tab button" active/current */ .tab button.active { background-color: #ccc; } /* Style tab content */ .tabcontent { float: left; padding: 0px 12px; border: 1px solid #ccc; width: 70%; border-left: none; height: 300px; } </style> </head> <body> <h2>Vertical Tab</h2> <p> Klik pada tombol di dalam menu tab: </p> <div class="tab"> <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button> <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button> <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button> </div> <div id="London" class="tabcontent"> <h3>London</h3> <p>London Ibukota Inggris.</p> </div> <div id="Paris" class="tabcontent"> <h3>Paris</h3> <p>Paris Ibukota Perancis.</p> </div> <div id="Tokyo" class="tabcontent"> <h3>Tokyo</h3> <p>Tokyo Ibukota Jepang.</p> </div> <script> function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } // Get the element with id="defaultOpen" and click on it document.getElementById("defaultOpen").click(); </script> </body> </html>
Membuat Tab Vertical yang Dapat Dipindah-pindah
Langkah 1) Tambahkan HTML
Contoh:
<div class="tab"> <button class="tablinks" onclick="openCity(event, 'London')">London</button> <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button> <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button> </div> <div id="London" class="tabcontent"> <h3>London</h3> <p>London Ibukota Inggris.</p> </div> <div id="Paris" class="tabcontent"> <h3>Paris</h3> <p>Paris Ibukota Perancis.</p> </div> <div id="Tokyo" class="tabcontent"> <h3>Tokyo</h3> <p>Tokyo Ibukota Jepang.</p> </div>
Buat tombol untuk membuka konten tab tertentu. Semua elemen dengan class = “tabcontent” disembunyikan secara default (dengan CSS & JavaScript) – saat pengguna mengklik tombol – ini akan membuka konten tab yang “cocok” dengan tombol ini.
Langkah 2) Tambahkan CSS
Style pada tombol dan konten tab
Contoh:
* {box-sizing: border-box}
/* Style tab */
.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 30%;
height: 300px;
}
/* Style tombol yang digunakan untuk membuka konten tab */
.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
}
/* Ubah warna background dari tombol on hover */
.tab button:hover {
background-color: #ddd;
}
/* Buat kelas "tab button" active/current */
.tab button.active {
background-color: #ccc;
}
/* Style tab content */
.tabcontent {
float: left;
padding: 0px 12px;
border: 1px solid #ccc;
width: 70%;
border-left: none;
height: 300px;
}Langkah 3) Tambahkan JavaScript
Contoh:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}
/* Style tab */
.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 30%;
height: 300px;
}
/* Style tombol yang digunakan untuk membuka konten tab */
.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
}
/* Ubah warna background dari tombol on hover */
.tab button:hover {
background-color: #ddd;
}
/* Buat kelas "tab button" active/current */
.tab button.active {
background-color: #ccc;
}
/* Style tab content */
.tabcontent {
float: left;
padding: 0px 12px;
border: 1px solid #ccc;
width: 70%;
border-left: none;
height: 300px;
}
</style>
</head>
<body>
<h2>Vertical Tab</h2>
<p>Klik pada tombol di dalam menu tab:</p>
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
<button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London Ibukota Inggris.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris Ibukota Perancis.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo Ibukota Jepang.</p>
</div>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
</body>
</html>
