How To

Cara Membuat Vertical Tab HTML CSS

Pelajari bagaimana cara membuat menu tab vertikal dengan CSS dan JavaScript.

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" >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" >

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" >

Catur Kurnia Sari

Share
Tags: How To