Salam hangat teman-teman, semoga teman-teman sehat selalu ya, Kali ini saya akan mencoba membagi Cara Memberikan Efek Hover Pada Vertikal Sidebar di Bootstrap.
Sidebar adalah sebuah kolom yang berisi link-link navigasi dan biasanya di simpan di sebelah kiri tapi terkadang kita bisa menyimpannya di sebelah kanan. nah pada default sidebar bawaan bootstrap kita harus mengkil salah satu link navigasi untuk menampilkan konten yang terdapat di dalam link itu.
Nah, Sekarang saya akan membuat Efek Hover Pada Vertikal Sidebar di Bootstrap. Berikut tutorial singkat tentang Cara Memberikan Efek Hover Pada Vertikal Sidebar di Bootstrap:
– Pertama teman-teman download framework bootstrapnya dulu.
– Kedua buka text editor teman-teman lalu buka file bootstrap yang telah kita download dan buat file index.html dengan cara mengcopy default html yang sudah ada di website bootstrap, jangan lupa save di dalam folder bootstrap teman-teman
– Ketiga kita buat kode html navbar-nya:
|
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 |
<body> <!-- presentasi tab --> <section class="blok"> <div class="blok-body"> <div class="row"> <!-- Nav tabs --> <ul class="nav tab-menu nav-pills col-sm-4 nav-stacked pr15"> <li class="active" data-toggle="tab"><a href="#home">Web Master</a></li> <li><a href="#profile" data-toggle="tab">Web Design</a></li> <li><a href="#messages" data-toggle="tab">Web Programming</a></li> <li><a href="#settings" data-toggle="tab">Digital Marketing</a></li> </ul> <!-- tab konten --> <div class="tab-content col-sm-8"> <div class="tab-pane well active in active" id="home"> 1. STATISTICS Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </div> <div class="tab-pane well fade" id="profile"> 2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </div> <div class="tab-pane well fade" id="messages"> 3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </div> <div class="tab-pane well fade" id="settings"> 4. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </div> </div> </div><!-- //row --> </div><!-- blok-body // --> </section><!-- // blok --> <!-- akhir presentasi tab // --> </body> |
– Keempat kita masukan javascritp untuk membuat efek hover-nya:
|
1 2 3 4 5 6 7 8 |
<!-- akhir presentasi tab // --> <script type="text/javascript"> //membuat efek hover $('.tab-menu a').hover(function (e) { e.preventDefault() $(this).tab('show') }) </script> |
Setelah teman- teman save coba teman-teman buka di browser teman, lalu arahkan pointer teman-teman ke salah satu link yang ada maka konten yang ada di sebelah kanan akan berubah sesuai link yang kota arahkan pointer.
Bagaimana teman-teman cukup mudahkan Memberikan Efek Hover Pada Vertikal Sidebar di Bootstrap.
Sekian artikel saya hari ini tentang Cara Memberikan Efek Hover Pada Vertikal Sidebar di Bootstrap.
Sehat selalu ya teman-teman, selamat mencoba.