Cara Membuat Dropdown Gambar dengan Bootstrap

Kita tahu bahwa framework bootstrap adalah salah satu framework yang sangat familiar sekali, siapa orang yang tidak tahu dengan framework ini ? hampir semua developer sudah tahu. Karena dengan keunggulan yang diberikan oleh framework ini membuat developer-developer sangat mengaguminya. Kita bisa dengan mudah membuat desain layout sebuah web dengan Bootstrap, contoh nya jika kita ingin membuat sebuah menu dropdown kita hanya perlu menambahkan fungsi menu dropdown yang telah disediakan oleh framework Bootstrap. Berbicara menu dropdown pada Bootstrap berikut ini akan saya bagikan referensi mengenai cara membuat dropdown gambar dengan Bootstrap. Kalau biasa nya kita sering melihat tampilan menu berupa teks, maka berikut ini akan saya buat menu dropdown dengan tampilan berupa gambar, simak langkah-langkah nya berikut ini.

Hal pertama dalam mendesain tampilan dengan bootstrap adalah, kita harus meload terlebih dahulu library dari bootstrap terlebih dahulu, dan mungkin disini kalian sudah pada tahu dan paham bagaimana cara meload semua library dari bootstrap, jadi saya tidak akan membahas nya. Nah, setelah sudah kalian load library Bootstrap nya. silahkan tambahkan kode HTML berikut sebagai struktur awal dari tampilan menu dropdrown gambar nya.

<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  <img src="http://lorempixel.com/75/50/abstract/">
  Web Master
  <span class="glyphicon glyphicon-chevron-down"></span>
</button>

<ul class="dropdown-menu">
  <li class="dropdown-header">WebSite</li>
  <li>
    <a href="#" title="Select this card"><img src="http://lorempixel.com/75/50/abstract/">Web MAster</a>
  </li>
  <li>
    <a href="#" title="Select this card"><img src="http://lorempixel.com/75/50/abstract/">Graphyc Design</a>
  </li>
  <li class="dropdown-header">Marketing</li>
  <li>
    <a href="#" title="Select this card"><img src="http://lorempixel.com/75/50/abstract/">Digital Marketing</a>
  </li>
</ul>
</div>

Silahkan kalian bisa isikan gambar sebagai objek dari menu dropdown nya pada kode img src. Setelah membuat kode HTML seperti diatas, selanjutnya kita akan sedikit manipulasi dropdown nya dengan kode CSS berikut ini.

body { padding: 40px; }
.dropdown-toggle, .dropdown-menu { width: 300px }
.btn-group img { margin-right: 10px }
.dropdown-toggle { padding-right: 50px }
.dropdown-toggle .glyphicon { margin-left: 20px; margin-right: -40px }
.dropdown-menu>li>a:hover { background: #f1f9fd }            
.dropdown-header { background: #ccc; font-size: 14px; font-weight: 700; padding-top: 5px; padding-bottom: 5px; margin-top: 10px; margin-bottom: 5px }

Setelah semua kode diatas telah diketikan, simpan file terlebih dahulu kemudian buka pada browser masing-masing dan lihat hasilnya, maka akan terlihat desain dropdown seperti gambar berikut.

Cara Membuat Dropdown Gambar dengan Bootstrap

Bagaimana, cukup mudah bukan cara membuatnya ? Baiklah sekian tutorial sederhana mengenai cara membuat dropdown gambar dengan Bootstrap, semoga bermanfaat dan selamat mencoba.

20 September 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat