Halo teman-teman, berjumpa lagi dengan saya. Pada artikel kali ini saya akan share bagaimana cara membuat spoiler menu dengan Jquery, spoiler biasa kita temui pada website kaskus atau website lainnya pada halaman komentar. Nah kali ini kita akan coba membuat spoiler tetapi spoiler yang akan kita buat adalah sebuah menu, dengan spoiler ini kita dapat membuat website lebih hidup dengan bantuan Jquery. Baik kita akan membuat spoiler menu seperti gambar ini bawah ini

capture

Pertama-tama coba buka code editornya, disini saya memakai notepad++. Teman-teman juga boleh menggunakan code editor yang lain seperti Sublime Text, Notepad, Dreamweaver dll. Lalu copy script di bawah ini

Kemudian save dengan index.html, dan refresh pada browser-nya. Maka menu sudah jadi di buat

capture

Langkah berikutnya tinggal menambahkan fungsi Jquery untuk menjadikan menu spoiler, teman-teman berikan display:none; didalam #drop atau bisa lihat pada gambar di bawah ini

script

Lalu di save dan run pada Browsernya, maka menu berhasil di hidden dengan display:none

script1

Langkah berikutnya kita tambahkan fungsi Jquerynya, dan jangan lupa berikan library Jqruery nya terlebih dahulu di dalam tag <head>

Dan tambahkan script Jquerynya, teman-teman bisa copy script di bawah ini

Lalu pastekan script diatas di code editornya

script2

Save dan refresh pada browsernya

script3

Nah spoiler sudah berhasil dibuat, lumayan mudah kan teman-teman. Baik mungkin sekian dulu di artikel ini tentang Cara Membuat Spoiler Menu Dengan Jquery teman-teman modifikasi sendiri ya dari contoh di atas ini supaya bertambah ilmunya untuk menjadikan websitenya lebih hidup dan menarik. Sampai jumpa di artikel selanjutnya dan terimakasih, mudah-mudahan bermanfaat. Indahnya berbagi 🙂

Baca juga artikel tentang Memberikan css yang di selector dengan Jquery