Cara Membuat Animasi Menu Tab Dengan Javascript

Hai, jumpa lagi dengan saya 🙂 , di kesempatan kali ini saya akan bagikan kalian tutorial mengenai Cara Membuat Animasi Menu Tab Dengan Javascript, bagaimana cara membuatnya ? berikut langkah-langkahnya.

Langsung saja, silahkan kalian buat struktur HTML seperti berikut.

<div class="codepen-container">
<div id="icetab-container">
    	<div class="icetab current-tab">Tab1</div><div class="icetab">Tab2</div><div class="icetab">Tab3</div>       
    </div>
    
    <div id="icetab-content">
    	<div class="tabcontent tab-active">Tab1 <br>1 lorim ipsum</div> 
        <div class="tabcontent">Tab2 <br>2 lorim ipsum</div>
         <div class="tabcontent">Tab3 <br>23 lorim ipsum</div>
    </div>

Untuk paragraf silahkan kalian bisa isikan sendiri, kemudian kita akan desain tampilan tab nya dengan kode CSS3 berikut.

div {
	box-sizing: border-box;
	transition: all ease-in-out .5s;
	-moz-transition: all ease-in-out .5s;
	-webkit-transition: all ease-in-out .5s;
}
.icetab {
	border: 2px solid #00A1CB;
	display: inline-block; 
	border-bottom: 0px;	
	margin: 0px;	
  color: #fff;
	cursor: pointer;
	border-right: 0px;
}
.icetab:last-child {
	border-right: 2px solid #00A1CB;	
}

#icetab-content {
	overflow: hidden;
	position: relative;
	border-top: 2px solid #00A1CB;
}


.tabcontent {
	position: absolute;
	left: 0px;
	top: 0px;
	background: #fff;
	width: 100%;
	border-top: 0px;
	border: 2px solid #00A1CB;
	border-top: 0px;
	transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	-webkit-transform: translateY(-100%);
}

.tabcontent:first-child {
	position: relative;	
}
.tabcontent.tab-active {
	border-top: 0px;
	display: block;
	transform: translateY(0%);
	-moz-transform: translateY(0%);
	-webkit-transform: translateY(0%);
}


/* A tiny wee bit of visual formating */
body {
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;	
	background: #666;
	color: #454545;
}
.codepen-container {
  max-width: 700px;
  margin: 40px;
  margin-left: auto;
  margin-right: auto;
}
.tabcontent {
	padding: 40px;
}
.icetab {
	padding: 20px;
	text-transform: uppercase;
	letter-spacing: 2px;
}
.current-tab { 
	background: #00A1CB;
}

Kalo sudah, selanjutnya yang terakhir kita akan buat animasi tab dengan kode Javascript berikut.

var tabs = document.getElementById('icetab-container').children;
var tabcontents = document.getElementById('icetab-content').children;

var myFunction = function() {
	var tabchange = this.mynum;
	for(var int=0;int<tabcontents.length;int++){
		tabcontents[int].className = ' tabcontent';
		tabs[int].className = ' icetab';
	}
	tabcontents[tabchange].classList.add('tab-active');
	this.classList.add('current-tab');
}	


for(var index=0;index<tabs.length;index++){
	tabs[index].mynum=index;
	tabs[index].addEventListener('click', myFunction, false);
}

Setelah semua kode diatas di ketikan, simpan terlebih dahulu, kemudian coba jalankan dibrowser masing-masing, dan lihat hasilnya. Selesai

Baik, selesai sudah tutorial mengenai Cara Membuat Animasi Menu Tab Dengan Javascript, semoga bermanfaat, amin. Selamat mencoba 🙂