Cara Membuat Tab Menu Dengan Bootstrap

Hai kawan-kawan Dumet…. Kali ini saya akan sharing tutorial membuat tab menu menggunakan bootstrap. Barangkali beberapa teman sedikit kesulitan dengan dokumentasi bootstrap yang menggunakan bahasa Inggris. Ok langsung saja ke TKP…

 <!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Belajar Tab Menu</title>

</head>

<link href="css/bootstrap.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/bootstrap.min.js"></script>

<body>

<div class="container">

<div class="row">

   <div class="col-md-6">

       <ul class="nav nav-tabs">

                               <li class="active"><a href="#tab1" data-toggle="tab">Tab1</a></li>

                              <li><a href="#tab2" data-toggle="tab">Tab2</a></li>

                               <li><a href="#tab3" data-toggle="tab">Tab3</a></li>

       </ul>

         <div class="tab-content">

               <div class="tab-pane fade in active" id="tab1">

               <h1>isi tab 1</h1>

                <p>a quis lorem ut libero malesuada feugiat. Donec sollicitudin molestie malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum congue leo eget malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.</p>

               </div>

                <div class="tab-pane" id="tab2">

                     <h1>isi tab 2</h1>

                  <p>ipit tortor eget felis porttitor volutpat. Nulla quis lorem ut libero malesuada feugiat. Donec sollicitudin molestie malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum congue leo eget malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.</p>

               </div>

               <div class="tab-pane" id="tab3">

                     <h1>isi tab 3</h1>

                   <p>it neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum congue leo eget malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.</p>

               </div>

           </div>

       </div>

   </div>

</div>

</body>

</html>

 

PENJELASANNYA:

Sebelum membuat Tab menu menggunakan bootstrap, perhatikan;

• Teks berwarna oranye di dalam tag <head> harus kamu panggil terlebih dahulu. Yaitu:

Bootstrap.min.css, jquery.js, dan bootstrap.min.js

• Bungkus menu menggunakan tag <div class=”col-md-6”> (kamu bisa membungkusnya sesuai dengan jumlah grid yang kamu inginkan).

• Selanjutnya teks berwarna merah adalah markup HTML yang akan kita gunakan untuk membuat tab menu nya.

• Teks berwarna hijau adalah class dan data-toggle yang akan dipanggil.
• pada tag <ul> gunakan class =”nav nav-tabs”
• setelah itu kita akan membuat isi dari Tab menu menggunakan class=”tab-content”, dan di dalam “tab-content” akan ada <div class=”tab-pane”>. Tab-pane nantinya akan kamu gunakan sebagai isi dari menu-menu kamu. Banyaknya tab-pane pada tab-content sesuai dengan list menu <li> yang kamu buat.
• Penting! Gunakan data-toggle=”tab”, karena kita akan menggunakan Tab menu.

• Teks berwarna biru adalah id. Id di dalam tag <div class=”tab-pane” id=”tab1”>. Nama id sesuai dengan keinginan kamu, pada contoh kali ini kita menggunakan nama “satu” sebagai id-nya. Id=”satu” ini akan kita sisipkan pada tag <a href=   >Tab1</a> sehingga hasilnya seperti ini <a href=”#tab1”>Tab1</a>. ingat! Untuk memanggil id gunakan tanda #. Setelah id nya dipanggil maka isi dari tab-pane akan ada pada tab menu yang telah kamu buat.

Setelah selesai maka hasilnya akan seperti berikut.

Semoga tutorialnya bermanfaat kawan-kawan… terima kasih.