Membuat website tab sederhana

Sebagai bahan latihan koding HTML dan CSS, kali ini kita mencoba membuat website tab sederhana dengan html, css dan js.

Script ini sangat sederhana dan tidak terlalu rumit, apalagi bila anda mencoba membuka pada halaman Realtime html Editor.


Anda hanya perlu mengembangkanya lagi agar menghasilkan sebuah website sederhana namun cantik dan elegant.

Silahkan pelajari, atau modifikasi script dibawah, gunakan paduan warna dan font yang menurut anda lebih bagus dan menarik.

Script website tab

1. CSS Kode

<style>
body, html {
  height: 100%;
  margin: 0;
  font-family: Arial;
}
.tabmenu {
  background-color: #333;
  color: #eee;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  margin-left: 0;
  border-left: 1px solid #2196F3;
  border-bottom: 4px solid #2196F3;
  width: 25%;
}
.tab1 {
  border-left: none !important;
}
.tabmenu:hover {
  background-color: #000;
  color: #fff;
}
.tabcontent {
  color: #333;
  display: none;
  padding: 100px 20px;
  height: 100%;
}
#Home, #Menu, #Contact, #About {
  background-color: whitesmoke;
}
</style>


2. HTML Kode

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Membuat website tab sederhana</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- CSS code tempatkan disini -->

</head>
<body>

<button class="tabmenu tab1" onclick="openPage('Home', this, 'red')" id="defaultOpen">Home</button>
<button class="tabmenu" onclick="openPage('Menu', this, 'green')">Menu</button>
<button class="tabmenu" onclick="openPage('Contact', this, 'blue')">Kontak</button>
<button class="tabmenu" onclick="openPage('About', this, 'orange')">Tentang</button>

<div id="Home" class="tabcontent">
  <h3>Beranda</h3>
  <p>Isi halaman beranda anda</p>
</div>

<div id="Menu" class="tabcontent">
  <h3>Menu situs</h3>
  <p>Isi menu situs anda</p> 
</div>

<div id="Contact" class="tabcontent">
  <h3>Hubungi kami</h3>
  <p>Kontak situs anda</p>
</div>

<div id="About" class="tabcontent">
  <h3>Tentang kami</h3>
  <p>Tentang situs anda</p>
</div>
 
<!-- JS code tempatkan disini -->
  
</body>
</html> 


3. JS kode

<script>
function openPage(pageName,elmnt,color) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tabmenu");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }
  document.getElementById(pageName).style.display = "block";
  elmnt.style.backgroundColor = color;
}
document.getElementById("defaultOpen").click();
</script>


Cobalah untuk menggabungkan script diatas menjadi satu halaman yang simple, mudah bukan?, Saya yakin anda pasti bisa.

Seperti biasa, untuk editing dan melihatnya secara online, Anda bisa menggunakan halaman yang telah disediakan yaitu Realtime HTML Editor ↗, script di atas akan otomatis ditampilkan beserta hasilnya.

Sampai disini sedikit pembahasan tentang Membuat website tab sederhana, semoga bermanfaat, dan sampai jumpa di tutorial berikutnya, Salam sukses untuk Anda semua.

Mungkin Anda Menyukai