Masih seputar Semantic UI, dan pada artikel sebelumnya saya sudah banyak menjelaskan tentang Semantic UI dari cara instalasi dan sampai pembuatan atribut-atribut yang ada di dalam Documentasi Semantic UI, nah pada artikel kali ini saya akan membahas tentang Cara Membuat Menu Tab Menggunakan Semantic UI
karena pada artikel-artikel saya sebelumnya sudah banyak menjelaskan Semantic UI jadi kali ini saya akan mengajarkan teman-teman hanya tips triknya saja yah, oke langsung saja teman-teman bias siapkan sebauh file dan text editor tentunya, langsung bias kopikan scriptnya dibawah sini :
<div class="ui container">
<div class="ui secondary pointing menu">
<a class="item active" data-tab="first">Tab 1</a>
<a class="item " data-tab="second">Tab 2</a>
<a class="item" data-tab="third">Tab 3</a>
</div>
<div class="ui bottom attached tab segment active" data-tab="first">
Dumet School Kelapa Gading
</div>
<div class="ui bottom attached tab segment" data-tab="second">
Dumet School Grogol
</div>
<div class="ui bottom attached tab segment" data-tab="third">
Dumet School Tebet
</div>
</div>
<script>
$(document).ready(function(){
$('.menu .item')
.tab();
});
</script>
Jika sudah save dan jalankan, cukup mudah bukan, sekian tutorial tentang Cara Membuat Menu Tab Menggunakan Semantic UI, sampai bertemu diartikel selanjutnya dan sampai jumpa.
Hasil nya :
#KeppLearn
#IsmetMA