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

Silahkan letakkan dan simpan di bawah kode <head>

Javascript :

<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src='http://vertical-accordion-menu.googlecode.com/files/GR_v-accordion-gubhugreyot.js' type='text/javascript'></script>
<script type="text/javascript">
//<![CDATA[
ddaccordion.init({
headerclass: "accordion",
contentclass: "ul_accordion",
revealtype: "click", // "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover"
collapseprev: true,
defaultexpanded: [0],
onemustopen: false,
animatedefault: false, 
persiststate: true,
toggleclass: ["", "aktif"],
togglehtml: ["prefix", "", ""],
animatespeed: "slow", 
oninit:function(headers, expandedindices){
},
onopenclose:function(header, index, state, isuseractivated){
}
})
//]]>
</script>

Kode CSS jQuery Vertical Accordion Menu

Untuk kode CSS, sampeyan bisa meletakkan dan menyimpan di atas kode ]]></b:skin>.

Kode CSS:

h3.selektor accordion{
       font-weight: bold;
       font-size:14px;
}
.molormenu{
       background:#33333;
       width:auto;
       margin-top:10px;
       font-family:Arial;
}
.molormenu .selektor{
       font-weight: bold;
       font-size:15px; 
       font-family:Times;
       color: #e79958;
       background: transparent url(http://vertical-accordion-menu.googlecode.com/files/bg_hor-accordion-gubhugreyot-2.gif) repeat-x center left;
       margin-bottom: 5px;
       text-transform: uppercase;
       padding: 10px 0 10px 10px;
       cursor: pointer;
       border-bottom:1px solid #666;
}
.molormenu .aktif{
       background-image: url(http://vertical-accordion-menu.googlecode.com/files/bg_hor-accordion-gubhugreyot-3.gif);
}
.molormenu ul{
       background:transparent;
       list-style-type: none;
       margin: 0;
       padding: 0;
       margin-bottom: 8px;
}
.molormenu ul li{
       padding-bottom: 2px; 
}
.molormenu ul li a{ 
       color: #fceada;
       background: url(http://vertical-accordion-menu.googlecode.com/files/bg_hor-accordion-gubhugreyot-4.gif) no-repeat center left;
       display: block;
       padding: 2px 0;
       padding-left: 19px;
       text-decoration: none;
       font-weight: bold;
       border-bottom: 1px solid #666;
       font-size: 11px;
       font-weight:normal;
}
.molormenu ul li a:visited{
       background:red;
       color: #3a3838;
}
.molormenu ul li a:hover{ 
       color:yellow;
       background-color: black;
}
]]></b:skin>

Kode HTML jQuery Vertical Accordion Menu

Kode HTML yang berisikan link dan nama setiap link menu yang akan ditampilkan di blog disimpan melalui penambahan widget. Sampeyan bisa menggunakan widget di bagian sidebar kanan atau kiri. Silahkan setiap link beserta nama link untuk diganti sesuai kebutuhan blog.

<div style="background:#222;padding:2px;border:1px solid 666;"> 
<div align="center" style="background:#2f4274 url(http://vertical-accordion-menu.googlecode.com/files/bg_hor-accordion-gubhugreyot-1.gif);font-family:Monotype Corsiva;font-size:16px;font-weight:bold; margin:5px; color:#c2d2fa;padding:2px  5px;border:1px solid blue;">CLICK any categories for open!</div>
<div class="clear:both"></div>
<div class="molormenu">

<h3 class="selektor accordion">Menu-1</h3>
<ul class="ul_accordion">

<li><a href="Link-1a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-1b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-1c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-1d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-1e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>

</ul>

<h3 class="selektor accordion">Menu-2</h3>
<ul class="ul_accordion">

<li><a href="Link-2a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-2b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-2c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-2d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-2e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>

</ul>

<h3 class="selektor accordion">Menu-3</h3>
<ul class="ul_accordion">

<li><a href="Link-3a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-3b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-3c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-3d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-3e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>

</ul>

<h3 class="selektor accordion">Menu-4</h3>
<ul class="ul_accordion">

<li><a href="Link-4a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-4b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-4c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-4d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-4e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>

</ul>

<h3 class="selektor accordion">Menu-5</h3>
<ul class="ul_accordion">

<li><a href="Link-5a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-5b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-5c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-5d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-5e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>

</ul>

<h3 class="selektor accordion">Menu-6</h3>
<ul class="ul_accordion">

<li><a href="Link-6a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-6b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-6c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-6d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-6e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>

</ul>

</div>
</div>

Langkah yang harus dilakukan

Penyimpanan Javascript dan Kode CSS

Login : Login to BloGGeR (Login ke BloGGeR) dengan menuliskan User Name (Nama Pengguna) atau Email Address. Tuliskan juga Password atau Sandi
Dasboard (Dasbor) : Setelah memasuki halaman Dasbor, KLIK "Design (Rancangan)".
Design (Rancangan) : KLIK link "Edit HTML"
Backup Template : : Amankan template terlebih dahulu dengan KLIK "Download Full Template (Download Template Lengkap)". Lanjutkan dengan menyimpan (SAVE) file template di "Folder PC".
<head> : Cari kode tersebut dengan menggunakan Ctrl+F untuk memudahkan pencarian kode. Kode <head> terletak di bagian atas "Edit HTML". Letakkan jQuery dan javascript di bawahnya.
]]></b:skin> : Cari kode ini dan gunakan juga Ctrl+F. Letakkan kode CSS di atasnya.
SAVE Template (Simpan Template) : KLIK SAVE Template/Simpan Template.
Lanjutkan dengan KLIK link "Page Elemen (Elemen Laman)".
Add Gadget : KLIK "Add Gadget (Tambah Gadget)" yang terletak di box dengan garis terputus-putus. Sampeyan bisa gunakan yang di bagian "Sidebar" kanan atau kiri.
Tunggu beberapa saat. KLIK pada "HTML/Javascript". Setelah terlihat box penyimpanan widget, copy dan pastekan kode HTML-nya.
KLIK "SAVE/Simpan" dan lihat hasilnya di dengan membuka blog.

Catatan/Keterangan :

Kode HTML yang disediakan hanya menyediakan 6 (enam) selector menu. Sampeyan bisa menambah dengan cara menambahkan kode baru setelah yang terakhir dengan kode tambahan :

xHTML

<h3 class="selektor accordion">Menu-7</h3>
<ul class="ul_accordion">

<li><a href="Link-7a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-7b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-7c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-7d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-7e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>

</ul>

Link dan Nama Link juga bisa ditambah dengan menambahkan kode baru di bawahnya seperti misalnya :

xHTML

<h3 class="selektor accordion">Menu-7</h3>
<ul class="ul_accordion">

<li><a href="Link-7a" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-7b" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-7c" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-7d" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-7e" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>
<li><a href="Link-7f" title="Tuliskan title setiap link di sini!">Tuliskan Nama Link di sini!</a></li>

</ul>

Ganti setiap link (link-1a s/d link-1e dan yang lain) dengan URL setiap menu.
Contoh : http://gubhugreyot.blogspot.com/2010/08/cara-buat-cc3-multilevel-drop-down-menu.html
Title di isi dengan keterangan tentang nama menu. Title ini akan terlihat sebagai tip yang terlihat ketika cursor berada di atas link menu.
Nama menu merupakan nama atau judul menu yang akan ditampilkan.
Lebar Accordion akan menyesuaikan diri dengan lebar widget yang tersedia.
Jika blog sebelumnya sudah menggunakan jQuery, maka anda hanya perlu menggunakan kode dan javascriptnya saja (jQuery cukup 1 (satu) dalam satu blog). Buatlah script yang lain selalu berada di bawah jQuery!

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Ngahad PAHING, Maret, 04, 2012

» Happy Blogging - gubhugreyot «

Sumber : Dynamic Drive

18 komentar:

Saepul Malik26 Oktober 2010 pukul 05.34
Keren gan... widget ini berhasil nongkrong di blog ane... tp gimana cara menyesuaikan warnanya gan??
BalasHapus
Balasan
[◣_◢] Yoni Akhmad |1 November 2010 pukul 01.35
Mas, Accordian Menunya error.., sepertinya javasripnya kehapus....

Boleh Minta Javascitnya gak?
Sudah ngefans banget sama menu accordian soalya...
BalasHapus
Balasan
[◣_◢] Yoni Akhmad |1 November 2010 pukul 03.12
Tadi brosing2 akhire nemu joga scripnya...

Makasih banyak mas,
BalasHapus
Balasan
cah ndeso kluthuk1 November 2010 pukul 04.31
He...heh.. aku juga bru sj plg dr jkt. Hmm 3 hr nggak sempat cek blog (hi...bru cari kerja, lagi nganggur, nich!). Wimg.co.uk kacau. Aku juga bru coba simpan di ripway.com. Sorry berat buat slrh sobat blogger, berapa posting terpaksa harus dilakukan edit ulang tuk ganti link script n css-nya! Tuk permasalahan yg lain malam ini coba akan kita cek n jawab satu persatu!

Salam ...

gubhug reyot
BalasHapus
Balasan
[◣_◢] Yoni Akhmad |6 November 2010 pukul 08.58
Yang javascripnya di upload d google code aja bos...

Ni lagi ngedit foto t banyak yang ilang,
termasuk banner anda, hehe dah tak pasang di blogku lho...

kalo berkenan silakan pasang blog sastra jawa saya...

yc,moga cept dapet kerja
BalasHapus
Balasan
Juned Ragile Mbah Mulni14 November 2010 pukul 06.24
matur suwun kang .... nice info ....
BalasHapus
Balasan
aarizal10 April 2011 pukul 03.55
KANG TULIS TITLLE SETIAP LINK DISINI AKU MASIH BINGUNG DISINI SEMUA SUDAH TAMPIL TRUS HARUS DIGANTI APA LAGI??TOLONG PENCERAHANYA TRIMS KANG
BalasHapus
Balasan
The XP-ZONE6 Mei 2011 pukul 09.08
scriptnya error bos,, mohon diperbaiki,, (yang http://h1.ripway.com/santyeka/Javascript/GRaccordion.js)
BalasHapus
Balasan
cah ndeso kluthuk7 Agustus 2011 pukul 13.33
1. Buat yang lagi pasang jQuery Vertical Accordion Menu, silahkan periksa kembali link jQuery Accordion-nya (http://h1.ripway.com/santyeka/Javascript/GRaccordion.js).
2. Ganti link di atas dengan yang ini :
http://h1.ripway.com/GRbaru/jQuery Vertical Accordion/GR_Accordion.js
3. Menu jadi nggak ngefek krn link jQuery yang di atas sdh di blokir!
4. So ... Secara otomatis update posting di atas pd hari ini (07 Agst 2001) sekaligus sebagai jawaban atas komentar dan pertanyaan tersampaikan!
5. Jika tak ada sedikitpun kesalahan copas dan pemasangan di template, menu ini dipastikan akan berfungsi secara sempurna.
6. Cobalah untuk menyimpan javascript ataupun css di file hosting scr pribadi demi keamanan dan kelancaran!
7. Semoga bermanfaat!

Salam

gubhugreyot
BalasHapus
Balasan
Anonim15 November 2011 pukul 12.17
kasih sukses abis
BalasHapus
Balasan
Anonim15 November 2011 pukul 22.50
maaf gmn gan solusinya ko punya saya tdak bisa SHOW and HIDE
BalasHapus
Balasan
Unknown31 Desember 2011 pukul 00.57
Y salam ... masih ada kesalaha jquery dan Javascript pembentuk jQuery Vertical Accordion Menu kya ny Gan .. link dah di perbarui tp pratinjau nya mengarah kan ke browser lain saat di pasangkan tp klou cuma code css nya gak masalah . sukses tp gak ngefek hide show ... mohon merisalah .... atas pencerahan nya haturkan nembah nuwun ... master pro ! we love u .
BalasHapus
Balasan
cah ndeso kluthuk31 Desember 2011 pukul 05.23
jQuery Vertical Accordion Menu: Javascript-nya yg di Ripway telah "tewas", tapi kini dah hidup lagi! Silahkan coba dan gunakan tuk lengkapi blog! Update 31 Desember 2011.

Salam ...

gubhugreyot
BalasHapus
Balasan
Baimzz28 Januari 2012 pukul 15.20
Salam...
Pak! sy mau nanya, gimana caranya agar ktika kita mengklik suatu menu terbukanya di tab lain?
makasih...
BalasHapus
Balasan
Unknown4 Juni 2012 pukul 20.21
makasih om ,berguna banget nih.
BalasHapus
Balasan
BANYUASINKEMBARAN4 April 2013 pukul 23.44
keren menunya tapi sebagian tdk mau show hide, gmn ngatasinya ?
BalasHapus
Balasan
pak muliadi30 Januari 2016 pukul 05.33
KAMI SEKELUARGA MENGUCAPKAN BANYAK TERIMA KASIH ATAS BANTUANNYA MBAH , NOMOR YANG MBAH BERIKAN/ 4D SGP& HK SAYA DAPAT (350) JUTA ALHAMDULILLAH TEMBUS, SELURUH HUTANG2 SAYA SUDAH SAYA LUNAS DAN KAMI BISAH USAHA LAGI. JIKA ANDA INGIN SEPERTI SAYA HUB MBAH_PURO _085_342_734_904_ terima kasih.الالله صلى الله عليه وسلموعليكوتهله صلى الل

KAMI SEKELUARGA MENGUCAPKAN BANYAK TERIMA KASIH ATAS BANTUANNYA MBAH , NOMOR YANG MBAH BERIKAN/ 4D SGP& HK SAYA DAPAT (350) JUTA ALHAMDULILLAH TEMBUS, SELURUH HUTANG2 SAYA SUDAH SAYA LUNAS DAN KAMI BISAH USAHA LAGI. JIKA ANDA INGIN SEPERTI SAYA HUB MBAH_PURO _085_342_734_904_ terima kasih.الالله صلى الله عليه وسلموعليكوتهله صلى الل

KAMI SEKELUARGA MENGUCAPKAN BANYAK TERIMA KASIH ATAS BANTUANNYA MBAH , NOMOR YANG MBAH BERIKAN/ 4D SGP& HK SAYA DAPAT (350) JUTA ALHAMDULILLAH TEMBUS, SELURUH HUTANG2 SAYA SUDAH SAYA LUNAS DAN KAMI BISAH USAHA LAGI. JIKA ANDA INGIN SEPERTI SAYA HUB MBAH_PURO _085_342_734_904_ terima kasih.الالله صلى الله عليه وسلموعليكوتهله صلى الل

BalasHapus
Balasan

Tambahkan komentar

gubhug reyot

Keterangan Penting

Cumulus swf - flash

Categories

Arsip...

Flag Counters

Pengikut

Recent Comments plus Kode CSS Box Gelap

Vertical Menu

Download Browser

Widget

CSS 3

Special Tutorials

Javascript-JQuery

Blog-Email-Modem

File Hosting

Promosi Blog

Adobe-Image-Animasi

Tutorial BlogDETIK

New BloGGER Templates

Panduan BloGGeR

Tutorial Blogger

Tips-Trik Blogger

Pengilon

Ge-eR

Sobat Ngeblogh