jQuery Vertical Accordion Menu

Sekali lagi..., meskipun belum lama berselang kita telah bahas pembuatan Vertical Accordion Menu dengan judul "Animated jQuery Accordion Menu Serba Guna", karena salah seorang sobat blogger menanyakan tentang bagaimana membuat vertical accordion seperti yang digunakan di blog ini, maka kita akan bongkar seluruh javascript dan kode css yang membentuk fungsi vertical accordion ini agar para sobat blogger bisa membandingkan keduanya. Meskipun kalau ditilik dari fungsi sebenarnya hampir tidak banyak perbedaan, namun sebenarnya jika ditinjau dari javascriptnya, maka akan kita lihat beberapa perbedaan, baik dari bentuk script maupun besar script yang digunakan.

Javascript maupun kode CSS yang nantinya kita perlihatkan, hampir tidak ada pengurangan atau penambahan dari kode aslinya, hanya beberapa kode CSS saja yang dirubah dengan pertimbangan supaya hasil akhir bentuk accordion akan sama disemua blog. Hal yang terpaksa dilakukan karena tanpa perubahan maka hasil yang didapat pastilah akan berbeda dengan bentuk accordion seperti yang terlihat di samping (beberpa kode css secara terpadu dipekerjakan juga untuk fungsi lain di keseluruhan blog!).

JQuery-1.3.2.min.js masih menjadi pilar utama bekerjanya accordion, yang dipadukan dengan sejumlah script lain hingga dapat membentuk sebuah fungsi dinamis dengan bentuk tampilan yang terbangun sepenuhnya melalui beberapa kode css dan background image.

jquery dan Javascript pembentuk jQuery Vertical Accordion Menu

Cara Membuat Animated jQuery Accordion Menu Serba Guna

Yang praktis, cantik, irit javascript dan dapat dipadukan dengan berbagai fungsi yang lain merupakan sebuah fasilitas dan kelengkapan blog paling nyaman digunakan. Kembali kita akan memanfaatkan jQuery-1.3.2.js atau jQuery-1.3.2.min.js untuk membuat sebuah "Animated Accordion Serbaguna" yang tidak saja dapat digunakan untuk memuat seluruh daftar posting, melainkan dapat juga sampeyan gunakan untuk berbagai kepentingan di luar masalah menu. Gambar ataupun berbagai bentuk teks lainnya bisa mejadi obyek untuk accordion cantik ini.

Kembali javascript kurang dari 10 baris akan membantu membangkitkan jQuery meciptakan sebuah fungsi indah dengan dibantu kode css yang menjadi pilar hingga terbentuk desain menarik. Permainan pada background image, background position serta padding, margin border serta text-shadow dan rounded corners di bagian dalam accordion mampu menghasilkan tampilan eksotik yang layak untuk dipertimbangkan sebagai satu fungsi penambah gaya dan maksimalisasi ruang. Ada dua buah desain yang bisa menjadi pilihan bagi sampeyan. Ke duanya sama-sama menarik, dan mungkin saja membuat kita kesulitan untuk menentukan pilihan. Bagaimana bentuk "Animated Accordion Serba guna ini? Silahkan arahkan cursor pada gambar di bawah ini dan sampeyan akan melihat seperti apa kira-kira bentuk tampilannya.

Animated CSS Vertical Menu

Sebuah permainan background membuat menu vertical ini bagai sebuah menu beranimasi. Hanya segelintir kode css tanpa sedikitpun javascript tidak mengurangi gaya dan penampilannya. Kelebihan penggunaan kode css secara murni akan membuat beban blog tidak menjadi begitu bertambah, apalagi background image yang kita gunakan juga sudah didesain dengan bentuk dan ukuran teramat kecil. Bisa dikatakan bahwa vertical css menu ini hanya mengandalkan kelengkapan penggunaan kode saja. Bagaimana wujud menu cantik ini? Silahkan sampeyan coba saja dan silahkan gunakan jika cukup menarik untuk digabungkan sebagai pelengkap blog. Bentuk CSS Vertical menu seperti gambar di bawah ini :

Arahkan cursor di atas gambar untuk melihat tampilan Vertical Menu dalam ukuran besar!

Kode CSS "Animated CSS Vertical Menu"

Cara Membuat Animated Vertical Menu Dengan jQuery

Sampeyan pasti tak akan menyangka javascript yang tak seberapa banyak ini mampu menghasilkan sebuah menu vertikal dengan bentuk animasi dan dilengkapi fade effects. Script kurang dari 10 deret ini mampu membuat setiap link title pada menu bergoyang ke kanan dan ke kiri saat mouse menyentuh setiap link. Apabila blog sudah menggunakan jquery-1.3.2.js atau jquery-1.3.2.min.js, tinggal tambahkan javascript di bawahnya maka sebuah menu cantik yang sangat indah akan hadir dihalaman blog sampeyan. Boleh percaya atau tidak, tetapi silahkan lihat dulu scripnya yang hanya beberapa baris ini.

D E M O

Silahkan buka demonya agar lebih jelas bagaimana animasi yang tercipta pada vertical menu yang dibuat dengan menggabungkan kehebatan jQuery dan CSS3 ini.

DEMO: jQuery animated vertical menu

Javascript Animated Vertical Menu

Javascript :

<script type="text/javascript">  
//<![CDATA[
/* gubhug reyot - Vertical Animated Menu */ 
$(document).ready(function() {  
$(".bgsGRVMnu li").hover(function(){  
$(this).find('span').animate({ opacity: 0 }, 800);        
$(this).find('a').animate({paddingLeft:"50px"}, 800); },
function(){  
$(this).find('span').animate({ opacity: 1 }, 800);  
$(this).find('a').animate({paddingLeft: "28px"}, 800);  
});
});  
//]]>
</script>

Script di atas inilah yang akan menghadirkan menu vertical indah dengan animasi menarik. Untuk memberikan hasil maksimal pada bentuk tampilan menu, kita juga manfaatkan rounded corners effects, opacity effects dan text shadow sehingga nilai lebih menu animasi ini semakin terasakan.

Screenshoot Animated Vertical Menu Menggunakan jQuery-1.3.2.min.js

CSS Floating Menu plus css3 Effects

CSS Floating Menu ini telah dikembangkan dengan melibatkan kode css3 transition dan css3 transformation sehingga terlihat jauh lebih dinamis dibandingkan apbila kita hanya menggunakan kode css saja. CSS3 transition & css3 transformation difungsikan untuk menciptakan gerak animatif saat pemunculan menu sekaligus memberi efek animatif saat cursor menyentuh link menu. Penggunaan scroller dimaksudkan agar menu punya kapasitas daya tampung lebih (sebanyak anda suka).

D E M O

Cara membuat :

1. Login ke Blogger.
2. Setelah Dasbor (Dasboard) telihat, cari dan klik "Design (Rancangan)".
3. Halaman baru kembali akan terlihat. Klik "Edit HTML".
4. Lakukan "Backup Template".
5. Cari kode "]]></b:skin>"
6. Copy dan pastekan kode css di atas kode "]]></b:skin>"
7. Klik "Simpan Template (Save Template)".
8. Lanjutkan dengan menyimpan xHTML melalui "Add a Gadget" yang terdapat di "Elemen Laman (Page Elemen)".
9. Selesai (Finish).