Website responsive adalah website yang tampilanya menyesuaikan dari media apa yang digunakan oleh penggunanya. Sehingga terlihat mempunyai bentuk yang berbeda pada setiap medianya. Tampilan dibrowser komputer kalian belum tentu sama dengan tampilan pada handphone. Ini adalah salah satu keunggulan website responsive. Kalian bisa membuatnya dengan mengatur CSS sedemikian agar tampilanya bisa maksimal disemua media.

Jika tidak ingin direpotkan dengan CSS yang rumit, kalian bisa menggunakan framework CSS yang sudah banyak di luar sana. Salah satu framework yang populer dikalangan adalah Bootstrap. Bootstrap adalah framework bentukan dari twitter yang bisa dipakai untuk umum. Dengan mempunyai bekal CSS kalian bisa mengutak-atik framework bootstrap. Bootstrap sendiri sebenarnya sudah menyediakan segala kebutuhan penunjang tampilan website.

Tetapi kalian juga bisa memodifikasi fitur yang ada dibootstrap jika kalian merasa ada yang kurang. Salah satu fitur yang akan kita modifikasi adalah menu dropdown. Kali ini kita akan mencoba membuat transisi dropdown pada bootstrap. Langkah awal kalian bisa ikuti contoh code dibawah ini.

transisi.html

Kalian simpan dan bisa lihat hasilnya pada browser kalian. Jika berhasil maka akan seperti ini.

Terdapat efek transisi memudar saat kalian mencoba mengarahkan mouse pada menu. Hal tersebut tidak ada pada file default css. Kalian modifikasi dengan script seperti ini.

Mudah bukan ?

Sekian pembahasan mengenai membuat transisi dropdown pada bootstrap. Semoga bermanfaat.