Responsive Ads Here

Saturday, March 25, 2017

Belajar CSS Part 15 Dropdowns

Belajar CSS Part 15 Dropdowns



Assalamualaikum Wr. Wb.


PENGERTIAN

Drop Down : Bentuk menu yang menurun ke bawah pada tampilan Graphical User Interface. Serupa dengan list box, yang memungkinkan user memilih salah satu opsi dari list yang tersedia. Ketika drop down list tidak aktif, maka yang ditampilkan adalah nilai tunggal.

LATAR BELAKANG

Memungkinkan bagi saya untuk memperbanyak suatu menu, tetapi menu tersebut tersembunyi dan akan terlihat jika mouse kita aktif.

MAKSDU & TUJUAN

Mempermudah untuk memperbanyak sebuah menu.
Menringkas beberapa menu yang merupakan satu kategori di dalamnya.

ALAT & BAHAN

  • Laptop/PC
  • Text Editor
  • Browser

LANGKAH KERJA

Pada kesempatan kali ini saya akan memberikan tutorial penggunaan menu dropdown di dalam CSS. Di dalam CSS kita dapat mengubah tampilan dari menu dropdown. Untuk lebih jelasnya simak berikut ini.

  • Basic Dropdown
Secara default tampilan dropdown berfungsi untuk membuat daftar list ke bawah pada setiap elemen. Jadi dropdown ini bisa berguna bagi banyak elemen. Berikut merupakan contoh dari dasar dropdown.


Gambar dia atas merupakan contoh dari syntaks untuk membuat sebuah dropdown.


Hasilnya akan terlihata saat mouse mengarah di atasnya. Selanjutnya kita akan membuat menu dari dropdown.
  • Dropdown Menu
Dalam membuat dropdown menu mungkin syntaknya akan sedikit panjang, untuk itu perhatikan dan pahami contoh berikut.


Syntaknya seperti gambar di atas, salin jika perlu. Kemudian lihat hasilnya.


Hasilnya ini akan terlihat jika mouse berada di atas menu dropdown.

Mungkin itu saja dari saya, kurang lebihnya mohon maaf.

Syukron^^


Wassalamualaikum Wr. Wb.




No comments:

Post a Comment