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.
|
1 2 3 4 5 6 7 8 9 10 |
<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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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 🙂