Bismillah. Alhamdulillah... Lama artikel ini diolah untuk diterbitkan, sebaik mungkin Blogger Tune-Up menulis artikel "Membuat Kwick Menu dengan jQuery" dengan harapan mudah untuk dipahami. Tetapi mohon ma'af karena artikel ini tidak bisa dibuat dalam satu halaman artikel, hal ini dimaksudkan untuk memudahkan bagian perbagian agar mudah untuk dipahami. Kwick Menu di kembangkan oleh Jeremy Martin yang sampai artikel ini dibuat telah mencapai versi 1.5.1 dan kemudian jenis menu inilah yang Blogger Tune-Up gunakan selain terinspirasi dari template Wordpress Kriesi.at. Menu Kwick sebenarnya merupakan kategori sederhana jika dilihat dari script yang harus kita tuliskan, tetapi cukup rumit dalam pembuatan gambar menunya, karena kita dituntut mampu menggunakan software pengolah citra gambar baik vektor atau bitmap.
Menu Kwick bekerja berdasarkan framework jQuery yang memilik efek lembut, jika kita mengarahkan mouse (hover) pada menu maka menu akan bergeser melebar dan menampilkan suatu icon yang tersembunyi. Jika mouse kita geser keluar dari menu maka menu akan bergeser memendek lagi dan icon akan disembunyikan. Mari kita mulai untuk membuat gambar utama menu kwick...
Menghitung dan Membuat Gambar Utama Menu Kwick
Beberapa hal yang harus disiapkan dalam membuat gambar utama menu kwick, seperti dibawah ini:- Siapkan icon-icon yang kita butuhkan, Blogger Tune-Up mengambil Icons dari website DryIcons.com
- Siapkan software pengolah citra gambar, misal; Adobe Photoshop, Adobe Illustrator, Gimp atau Corel Draw.
- Persiapkan berapa jumlah menu yang akan kita tampilkan, misal Blogger Tune-Up menyiapkan menu; Beranda, Arsip, Download, Kontak, dan Tentang.
- Siapkan alat tulis untuk menghitung-hitung lebar dan tinggi gambar utama menu kwick jika perlu kalkulator.
Langkah 1
Buka software pengolah citra gambar dan set satuan ukurannya menggunakan pixel (px) hal ini dibahas detail pada blog "Design Graphics"
Langkah 2Setelah kita menentukan berapa jumlah menu yang akan dibuat maka kita dapat menghitungnya, perhatikan illustrasi gambar dan cara menghitungnya dibawah ini:
Halaman blog kita memiliki lebar 500 pixel dan kita akan membuat 5 menu yang sudah kita persiapkan. Maka rumusnya seperti dibawah ini:
(500:5)+70 = 170 pixelKeterangan:
- 500 diambil dari lebar halaman blog
- 5 diambil dari jumlah menu yang akan kita buat
- 70 diambil dari lebar icon sebelah kanan menu yang akan ditampilkan jika mouse diarahkan ke menu (hovering)
- 170 merupakan lebar maksimal masing-masing menu.
Dari hasil perhitungan diatas maka lebar masing-masing menu yang akan kita buat maksimal 170 pixel. Setelah ditemukan lebar maksimal dari masing-masing gambar utama menu kwick, maka hitunglah lebar total menu yang akan kita buat dengan menggunakan software pengolah citra gambar sebagai berikut:
Dengan rincian penetapan urutan posisi menu sebagai berikut:
- Menu 1 (Beranda) dimulai dari 0 pixel sampai dengan 170 pixel
- Menu 2 (Arsip) dimulai dari 170 pixel sampai dengan 340 pixel
- Menu 3 (Download) dimulai dari 340 pixel sampai dengan 510 pixel
- Menu 4 (Kontak) dimulai dari 510 pixel sampai dengan 680 pixel
- Menu 5 (Tentang) dimulai dari 680 pixel sampai dengan 850 pixel
- Maka lebar total gambar utama menu kwick adalah 850 pixel
Bagaimana dengan tinggi menu? Terserah anda, misalkan kita set 40 pixel.
Perhitungan gambar utama menu kwick sudah selesai, untuk membuat gambar menu kwicks menggunakan Adobe Photoshop silahkan baca artikel membuat gambar menu kwicks...
Bersambung ke Membuat Kwicks Menu dengan jQuery - Bagian 2...
