Membuat menu dropdown dengan HTML dan CSS

Membuat menu dropdown dengan HTML dan CSS

hallo gan pada kesempatan ini, Ilmukita akan membagikan tutorial nih tentang menu  membuat dropdown  sederhana  menggunakan HTML dan CSS.sebelumnya agan seudah menguasai HTML nya belum ? jika ingin belajar atau sekedar mengulas kembali tentang HTML silahkan kelik di sini .

oke … gan kita langsung aja ya ….

Catatan : Menu merupakan kumpulan link yang apabila di klik akan berpindah atau mengarah ke halaman lain.

Membuat halaman index

Pertama buatlah sebuah folder dengan nama folder dropdown

kemudian  buat file baru dengan nama index.html dan save di folder dropdown tadi.

Kemudian ketikan script/kode HTM brikut :

 

 

catatan : Alangkah baiknya jika kita mengetik sendiri scriptnya daripada copy-paste. biar kita terbiasa dan mudah untuk mengingatnya. dan jangan lupa ketika kita sudah selesai mengetik suatu script alngkah baiknya kita simpan (save) terlebih dahulu.

Membuat Halaman CSS

Selanjutnya, kita buat  file baru  lagi dengan nama style.css kemudian save bersama dengan file index.php di dalam folder dropdown.

ketik script css berikut :

 

 

disini kita menggunakan penempatan CSS eksternal yaitu style/CSS yang disimpan diluar HTML, untuk lebih jelasnya klik disini

jika sudah selsesai mengetik script HTML dan CSS di atas , buka file index.html di browser.

maka kita akan melihat hasilnya seperti pada gambar brikut :

mwnu

Sekian tutorial kali ini , semoga dapat menambah ilmu baru untuk kita semua

LEAVE A REPLY

Please enter your comment!
Please enter your name here