AbiQ Ribbon Menu with JQuery

Sudah lama aku dengar kehandalan jQuery dari teman-teman, akhirnya kesampaian juga mempelajarinya. Sekalian aja ngerjain proyek menggunakan jQuery, biar sekalian belajar gitu🙂

Kali ini aku buat Ribbon Menu. Selain sederhana tampilannya juga OK. Kira-kira kayak gini hasilnya:

AbiQ Ribbon Menu

AbiQ Ribbon Menu


Sebelumnya siapkan bahan-bahannya (emangnya mau masak apa mas…?)

  1. jQuery 1.3.x atau yang terbaru , downloadnya di jQuery.com
  2. JQuery Corner, biar tampilannya lebih cakep lagi. silakan kunjungi http://jquery.malsup.com/corner

 

Jangan lupa, pada bagian <head> </head>tambahkan script untuk menghubungkan dengan JQuery dan JQuery Corner.

Jangan lupa pula sisipkan script ribbonnya:

<script language="javascript" src="scripts/AbiQRibbon.js"></script>

Pada bagian <body> </body> tambahkan Tag sbb:

<div id="AbiQRibbon" class="AbiQRibbon" ></div>

Tag diatas digunakan untuk menempatkan dimana Ribbon Menu kamu letakkan. Bisa di awal, tengah atau akhir dokumen, namun pada umumnya kan.. dibagian awal/ atas kan..?

Sekarang, tinggal membuat daftar menu.


yang terpenting <UL> kamu kasih id=”AbiQRibbonList”

<ul id="AbiQRibbonList">

kamu bisa membuat Icon sendiri dengan format gif atau png. yang terpenting posisi gambar berada dalam tag <a href></a> misalnya:

<li><a href="#" id="AbiQ123"><img src="icons/c.png" width="57" height="47" />Cuti Kuliah</a></li>

untuk id=”AbiQ123″, maksudnya begini:

1 –> Tab Menu
2–> Group Item Menu
3–> Item Menu

Kalo udah semua, tinggal lihat hasilnya…….

Kalo belum mengerti, silakan download aja di http://www.4shared.com/rar/kNi2pISq/file.html lengkap dengan contohnya.

Semoga bermanfaat.