Hallo Sahabat, bagaimana kabarnya semoga selalu sehat serta tetap semangat. Dalam artikel ini saya akan membahas tentang bagaimana cara membuat efek underline menu tabs dengan jQuery. Jadi saat pilih menu lain akan ada efek underline yang menandakan bahwa tabs yang dipilih sedang aktif.
Dalam kasus ini tentunya tidak perlu diterka-terka bagaimana cara membuatnya, yuk langsung aja ke tkp.
Baiklah yang perlu dipersiapkan yaitu text editor sahabat sudah siap tempurkan. Buat file yang berisi HTML sebagai langkah awal seperti code berikut ini:
|
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 |
<body> <div id="bgbdy"> <img src="images/background.jpg"> </div> <div class="outer"> <h1>Membuat Efek Underlined Pada Tabs</h1> <div class="tab"> <ul> <li> <a class="tab-active" data-index="0" href="#">Tabs I</a> </li> <li> <a data-index="1" href="#">Tabs II</a> </li> <li> <a data-index="2" href="#">Tabs III</a> </li> <li> <a data-index="3" href="#">Tabs IV</a> </li> </ul> <div class="content"> <div class="content-active"> <h2>Framework Ionic</h2> <p>Ionic Framework merupakan sebuah framework open source yang menyeidakan UI Toolkit untuk membuat aplikasi web PWA, dekstop, mobile (Android dan iOS) dengan menggunakan bahasa web seperti HTML, CSS, dan Javascript.</p> <img src="images/Ionic.png"> </div> <div> <h2>Flutter</h2> <p>Flutter adalah sebuah framework open-source yang dikembangkan oleh Google untuk membangun antarmuka (user interface/UI) aplikasi Android dan iOS.</p> <img src="images/flutter.jpeg"> </div> <div> <h2>React</h2> <p>React Native adalah salah satu framework javascript yang bisa digunakan untuk mengembangkan aplikasi mobile. Dengan React Native kita akan merasakan sensasi membuat aplikasi yang sangat mendekati bahkan tidak dapat dibedakan dengan aplikasi native.</p> <img src="images/react.png"> </div> <div> <h2>Swift</h2> <p>Swift adalah bahasa pemrograman yang digunakan untuk membangun aplikasi untuk produk apple seperti iOS, OSX dan lain sebagainya.</p> <img src="images/swift.jpg"> </div> </div> </div> |
Pada code diatas saya menambahkan beberapa gambar untuk content tampilannya, jadi sahabat hanya perlu focus pada
- setelah class=tab yang berisi list menu tabs nya.
- untuk class=content isi content dari setiap menu nya
Lalu selanjutnya jangan lupa sebuah style CSS agar tampilan terlihat rapih dan menarik silahkan ketikkan code CSS berikut ini:
|
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 |
body{background:#8b5824} #bgbdy{ width:100%; height:99.3%; position:absolute; top:0px; left:0px; } #bgbdy img{ width:100%; height:100%; } .outer{ width:90%; height:620px; position:relative; background:rgba(255,255,255,0.6); margin:0px auto;} h1{text-align:center; padding:0px; font-size:38px; padding:20px; color:#123f0f; } .tab{ width:754px; box-sizing: border-box; border: 1px solid #dddddd; background-color: #fff; font: bold 13px sans-serif; margin: 0px auto; text-align: center; padding: 30px; } .tab ul{ list-style: none; text-align: left; margin: 0px; padding: 0px; text-align: center; } .tab ul li{ display: inline-block; } .tab ul li a{ display: block; text-decoration: none; color: #7f888d; font-size: 14px; margin: 0px 20px 15px 0px; padding-bottom: 5px; } .tab ul li a.tab-active { color: #656a6d; border-bottom: 2px solid #031194; } .tab .content{ overflow: hidden; font-weight: normal; } .tab .content div{ display: none; } .tab .content div.content-active{ display: block; } .tab .content div p{ color: #565a5c; line-height: 1.5; text-align: left; margin: 5px 0px 20px; } .tab .content div img{ max-width: 100%; height:250px; } |
Oke selanjutnya bagian yang terpenting adalah script dari jquery seperti code dibawah ini
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(document).ready(function() { var widget = $('.tab'); var tabs = widget.find('ul a'), content = widget.find('.content > div'); tabs.on('click', function (e) { e.preventDefault(); var index = $(this).data('index'); tabs.removeClass('tab-active'); content.removeClass('content-active'); $(this).addClass('tab-active'); content.eq(index).addClass('content-active'); }); }); </script> |
Jadi saat menu tabs di click maka menu tersebut yang dianggap aktif, sehingga akan menampilkan content sesuai urutan index dan ada sebuah efek underline pada tabs yang aktif.
Saya kira cukup pembahasan kita dalam artikel Cara Membuat Efek Underline Menu Tabs Dengan jQuery. Semoga bermanfaat dan terima kasih.