TUTORIAL

Buat Menu Dropdown Dengan CSS


Buat Menu Dropdown Dengan CSS | Jom belajar buat menu dropdown menggunakan CSS dalam platform Blogspot. Ada dua jenis menu dropdown yang anda boleh cuba buat dalam tutorial kali ini iaitu Hover dan Click.


JENIS HOVER

Buat senarai dropdown yang muncul bila cursor lalu ke atasnya.

1) Letak HTML di mana-mana anda ingin tempatkan menu dropdown (contohnya, sidebar, footer, dalam posting entri dan sebagainya).



2) Pergi ke Theme kemudian Edit HTML dan cari kod ini



3) Copy paste kod CSS berikut dan letak di atas kod tadi.



4) Klik Save dan lihat hasilnya.


JENIS CLICK

Buat senarai dropdown yang muncul bila cursor klik ke atasnya.

1) Langkah yang sama seperti untuk menu dropdown jenis Hover, cuma perlu tambah kod fungsi button onclick="myFunction()" untuk membuat senarai muncul hanya apabila butang diklik:



2. Copy paste kod CSS berikut dalam Theme sama seperti kaedah untuk menu dropdown jenis Hover di atas. Bagi menu dropdown jenis Click kod .show {display:block;} ditambah pada hujung CSS



3. Klik Save dan lihat hasilnya


**Perhatian: Anda boleh tukar warna latarbelakang menu dengan menukar kod hex di bahagian berwarna merah background-color: #4CAF50;

Tentang YunFila

Seekor kentang gemuk bertopi. Meminati kucing, teknologi, steampunk, membeli-belah secara online, melayari YouTube serta mengumpul topi. Juga memiliki obsesi terhadap kentang pink pada tahap yang membimbangkan.

6 Komen:

Dunia Zumal said...

Nice sharing Ayuni...

Ciktie said...

Nice sharing!! Ada lagi tak tutorial berkaitan CSS?

nia khairudin said...

nice sharing... tq

Anum Abdullah said...

thanks sharing sis..

Syafiera Yamin said...

Kak ayuni kenapa drop down menu bar I, bila bahagian kisah syafierayamin tu tak keluar image macam kak ayuni punya adei stress. :(

YunFila said...

Oh... yang itu akak guna mega menu dropdown. Nanti akak share dalam entri tutorial kemudian.

KOMEN TERBARU

Powered by Blogger.