Cara Membuat Menu Tab dengan CSS3 dan Javascript

Saat ini banyak sekali desain tampilan menu pada sebuah web, dan menu adalah elemen yang sangat penting dalam sebuah tampilan web. Untuk membuat desain tampilan menu kita bisa dengan menggunakan CSS3 ataupun dengan tambahan jQuery untuk animasi dan efek-efek. Berikut ini adalah salah satu tutorial membuat menu pada sebuah web yakni bagaimana Cara Membuat Menu Tab dengan CSS3 dan Javascript.

Pada tahapan pembuatan desain tampilan menu ini, pertama kita buat struktur HTML5 seperti berikut.

<body>
	<div class="container">
	<div id="list-menu">
	    <div class="icetab current-tab">Menu Tab 1</div>
	    <div class="icetab">Menu Tab 2</div>
	    <div class="icetab">Menu Tab 3</div>       
	</div>
    
    <div id="icetab-content">
    <div class="content active">Tab 1 <br>There are many variations of passages</div> 
    <div class="content">Tab 2 <br>There are many variations of passages of Lorem Ipsum available</div>
    <div class="content">Tab 3 <br>There are many variations of passages of Lorem Ipsum available</div>
    </div>
</body>

Setelah struktur diatas telah diketikan, selanjutnya adalah tahapan untuk desain menu tab nya dengan kode CSS3 seperti 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 #3498db;
	display: inline-block; 
	border-bottom: 0px;	
	margin: 0px;	
  color: #fff;
	cursor: pointer;
	border-right: 0px;
}
.icetab:last-child {
	border-right: 2px solid #3498db;	
}

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


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

.content:first-child {
	position: relative;	
}
.content.active {
	border-top: 0px;
	display: block;
	transform: translateY(0%);
	-moz-transform: translateY(0%);
	-webkit-transform: translateY(0%);
}
@import url('https://fonts.googleapis.com/css?family=Artifika');
body {
	font-family: 'Artifika', serif;	
	background: #34495e;
	color: #454545;
}
.container {
  max-width: 700px;
  margin: 40px;
  margin-left: auto;
  margin-right: auto;
}
.title {
  color: #3498db;
  text-align: center;
  letter-spacing: 14px;
  text-transform: uppercase;
  font-size: 17px;
  margin: 40px 0px;
}
.content {
	padding: 40px;
}
.icetab {
	padding: 20px;
	text-transform: uppercase;
	letter-spacing: 2px;
}
.current-tab { 
	background: #3498db;
}

Selanjutnya kita tambahkan kode javascript berikut ini.

var tabs = document.getElementById('list-menu').children;
		var contents = document.getElementById('icetab-content').children;

		var myFunction = function() {
			var tabchange = this.mynum;
			for(var int=0;int<contents.length;int++){
				contents[int].className = ' content';
				tabs[int].className = ' icetab';
			}
			contents[tabchange].classList.add('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 diketikan, simpan filenya kemudian buka pada browser masing-masing dan lihat hasilnya. Nah itulah tadi salah satu contoh menu yang bisa kita buat dengan CSS3 dan Javascript. Demikian tutorial mengenai bagaimana Cara Membuat Menu Tab dengan CSS3 dan Javascript. semoga bermanfaat dan selamat mencoba 🙂

DEMO

Risman Hakim Author

Menjadi seorang Web Designer membuat saya ingin selalu berbagi ilmu. Berbagi tidak mengurangi ilmu, dengan berbagi ilmu akan terus bertambah. Kenal lebih jauh tentang saya di DUMET School :)

Leave a Reply

Your email address will not be published. Required fields are marked *