Tab menu pada web umumnya digunakan untuk berpindah halaman dari halaman satu ke halaman lain. Misalnya pada sebuah web banyak terdapat menu tab atau menu bar yang bejejer kesamping, kita dapat memanipulasi menu tab tersebut dengan mengelompokkan beberapa menu menjadi satu submenu, menu-menu yang banyak tadi akan disembunyikan didalam sebuah submenu dan menu-menu tersebut akan muncul muncul secara drop down jika submenu-nya di klik. Sehingga tampilan web kita akan lebih menarik.
Untuk memanipulasi tab menu tersebut membutuhkan sebuah script jquery. Apa itu jquery? jquery yaitu kumpulan dari beberapa library javascript yang berguna untuk memudahkan proses pengolahan dokumen HTML. Pada postingan kali ini saya akan memberikan tutorial memanipulasi tampilan menu tab seperti yang sudah saya jelaskan diatas. Tutorial ini menggunakan jquery untuk membuat tampilan dropdown menu dan CSS untuk membuat tampilan agar terlihat lebih menarik.
Tampilan tab menu sebelum dimanipulasi dengan jquery
Untuk memanipulasi tab menu tersebut membutuhkan sebuah script jquery. Apa itu jquery? jquery yaitu kumpulan dari beberapa library javascript yang berguna untuk memudahkan proses pengolahan dokumen HTML. Pada postingan kali ini saya akan memberikan tutorial memanipulasi tampilan menu tab seperti yang sudah saya jelaskan diatas. Tutorial ini menggunakan jquery untuk membuat tampilan dropdown menu dan CSS untuk membuat tampilan agar terlihat lebih menarik.
Tampilan tab menu sebelum dimanipulasi dengan jquery
Tampilan menu tab yang sudah dimanipulasi dengan jquery, tampilan menu tab lebih simpel karena menu tab yang banyak dikelompokkan menjadi satu submenu tab yaitu submenu Bahasa Pemrograman, jika submenu tersebut di klik baru akan muncul menu-menu yang ada dibawahnya.
Langsung saja menuju tutorialnya. Langkah yang pertama yaitu download script jquery pada website https://www.jquery.com. Pada tutorial ini saya menggunakan script jquery versi 3.1.1. kemudian panggil script jquery tersebut kedalam HTML pada bagian <head> seperti berikut :
kemudian tuliskan script untuk mengolah jquerynya seperti dibawah ini:
kita bisa memperindah tampilan dengan mengunakan CSS seperti dibawah ini, tuliskan koding css berikut didalam bagian <head>:
kemudian pada bagian <body> tuliskan koding berikut untuk menampilkan CSS dan jquerynya ke halaman web menjadi tampilan menu tab :
Anda bisa mendownload Source Code nya atau bisa mencoba Live Demo nya.
Sekian tutorial mengenai manipulasi menu tab atau menu bar yang dapat saya bagikan, semoga bermanfaat.
EmoticonEmoticon