Membuat Menu Accordion Dengan JQuery

Diposkan oleh Hery Prasetyo Wednesday, April 21, 2010
بسم الله الرحمن الرحيم

Membuat Menu Accordion Dengan JQuery. pada postingan yang lalu HAPIA Mesir pernah menulis postingan tentang Membuat Simple Accordions yang hanya mengkolaborasikan antara script accordion dan HTML saja. dan pada tutorial saat ini, HAPIA Mesir ingin berbagi tentang cara membuat menu accordion dengan menggunakan JQuery.

Membuat Menu Accordion Dengan JQueryMenu ini tidak terlalu memberatkan loading blog tanpa mengurangi tampilan menu yang colorful. untuk demonya silahkan dilihat pada link berikut :


Cara Membuat Menu Accordion Dengan JQuery adalah sebagai berikut :

- Login keBlogger dengan account anda.
- Pergi ke "Tata Letak" kemudian "Edit HTML".
- Sebelumnya pastikan blog anda telah tertanam didalamnya JQuery versi 1.3.2, jika belum silahkan copy JQuery versi 1.3.2 dibawah ini dan letakkan dibawah <head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

- Kemudian copy paste script berikut dibawah script diatas :

<script src='http://hapiajavascript.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
<script src='http://hapiajavascript.googlecode.com/files/script.js' type='text/javascript'/>

- Selanjutnya untuk bagian CSS, silahkan cari code ]]></b:skin> dan letakkan code CSS berikut diatasnya :

ul{
margin:0;
padding:0;
}

ul.accordion{
/* The topmost UL */
width:240px;
margin:0;
padding:10px;
}

li{
list-style:none;
text-align:left;
}

li.menu{
/* The main list elements */
padding:5px 0;
width:100%;
}

li.button a{
/* The section titles */
display:block;
font-family:BPreplay,Arial,Helvetica,sans-serif;
font-size:21px;
height:34px;
overflow:hidden;
padding:10px 20px 0;
position:relative;
width:200px;
}

li.button a:hover{
/* Removing the inherited underline from the titles */
text-decoration:none;
}

li.button a span{
/* This span acts as the right part of the section's background */
height:44px;
position:absolute;
right:0;
top:0;
width:4px;
display:block;
}

/* Setting up different styles for each section color */

li.button a.blue{background:url(http://2.bp.blogspot.com/_QeR8kbaWhLU/S87Np1waWlI/AAAAAAAAApE/kXFSQFnKZ_c/s320/blue.png) repeat-x top left; color:#074384;}
li.button a.blue span{ background:url(http://2.bp.blogspot.com/_QeR8kbaWhLU/S87Np1waWlI/AAAAAAAAApE/kXFSQFnKZ_c/s320/blue.png) repeat-x top right;}

li.button a.green{background:url(http://3.bp.blogspot.com/_QeR8kbaWhLU/S87NqIY2-9I/AAAAAAAAApU/wCVFFT7HLMs/s320/green.png) repeat-x top left; color:#436800;}
li.button a.green span{ background:url(http://3.bp.blogspot.com/_QeR8kbaWhLU/S87NqIY2-9I/AAAAAAAAApU/wCVFFT7HLMs/s320/green.png) repeat-x top right;}

li.button a.orange{background:url(http://2.bp.blogspot.com/_QeR8kbaWhLU/S87NqQrEzbI/AAAAAAAAApc/ZgSNG8Td7fs/s320/orange.png) repeat-x top left; color:#882e02;}
li.button a.orange span{ background:url(http://2.bp.blogspot.com/_QeR8kbaWhLU/S87NqQrEzbI/AAAAAAAAApc/ZgSNG8Td7fs/s320/orange.png) repeat-x top right;}

li.button a.red{background:url(http://1.bp.blogspot.com/_QeR8kbaWhLU/S87NqBgIwUI/AAAAAAAAApM/ah5Y_D2oRfM/s320/red.png) repeat-x top left; color:#641603;}
li.button a.red span{ background:url(http://1.bp.blogspot.com/_QeR8kbaWhLU/S87NqBgIwUI/AAAAAAAAApM/ah5Y_D2oRfM/s320/red.png) repeat-x top right;}

/* The hover effects */

li.button a:hover{ background-position:bottom left;}
li.button a:hover span{ background-position:bottom right;}

.dropdown{
/* The expandable lists */
display:none;
padding-top:5px;
width:100%;
}

.dropdown li{
/* Each element in the expandable list */
background-color:#373128;
border:1px solid #40392C;
color:#CCCCCC;
margin:5px 0;
padding:4px 18px;
}

- Simpan Template.

- Pergi ke "Elemen Laman" tambah gadget pada sidebar.
- Pilih "HTML/JavaScript" kemudian copy paste code berikut kedalamnya :

<ul class="accordion">
<li class="menu">

<ul>
<li class="button"><a class="green" href="#">Judul 1 <span></span></a></li>

<li class="dropdown" style="display: none;">
<ul>
<li><a href="#">Nama Content 1.1</a></li>
<li><a href="#">Nama Content 1.2</a></li>
<li><a href="#">Nama Content 1.3</a></li>
</ul>
</li>
</ul>
</li>

<li class="menu">

<ul>
<li class="button"><a class="orange" href="#">Judul 2 <span></span></a></li>

<li class="dropdown" style="display: none;">
<ul>
<li><a href="#">Nama Content 2.1</a></li>
<li><a href="#">Nama Content 2.2</a></li>
<li><a href="#">Nama Content 2.3</a></li>
</ul>
</li>
</ul>
</li>

<li class="menu">

<ul>
<li class="button"><a class="blue" href="#">Judul 3 <span></span></a></li>

<li class="dropdown" style="display: none;">
<ul>
<li><a href="#">Nama Content 3.1</a></li>
<li><a href="#">Nama Content 3.2</a></li>
<li><a href="#">Nama Content 3.3</a></li>
</ul>
</li>
</ul>
</li>

<li class="menu">

<ul>
<li class="button"><a class="red" href="#">Judul 4<span></span></a></li>

<li class="dropdown" style="display: none;">
<ul>
<li><a href="#">Nama Content 4.1</a></li>
<li><a href="#">Nama Content 4.2</a></li>
<li><a href="#">Nama Content 4.3</a></li>
</ul>
</li>
</ul>
</li>
</ul>

# Untuk tutorial aslinya silahkan cek judul Making a Fresh Content Accordion.

Selamat mencoba dan happy blogging.


Jika postingan ini dirasa berguna bagi yang lain. silahkan share untuk berbagi.

Dapatkan Update Terbaru Dari HAPIA Mesir, Masukan Email Anda :

HAPIA Mesir Readers

Bookmark and Share

Direkomendasikan Untuk Dibaca :

24 Responses to Membuat Menu Accordion Dengan JQuery

  1. aryadevi Says:
  2. salam teman, mengawali dengan senang, saya coba aplikasikan nanti.

     
  3. Rock Says:
  4. Aku simpan dulu sob...
    Makasih untuk tutorialnya ya...

     
  5. Rizky2009 Says:
  6. keren master, tp blog q dah kelewat berat u/ mencoba

     
  7. iswady Says:
  8. keren bro. suatu waktu akan saya coba

     
  9. hebat mas, selalu ada yang baru saat saya berkunjung kesini, trimakasih mas, tips2 nya bagus bangat..

     
  10. Mampir lagi utk cari ilmu baru....

     
  11. Ikutan baca info yang bermanfaat.. ^_^

     
  12. selalu ada sesuatu yang dapat dipelajari disini, terima-kasih sahabat sudah berbagi.

     
  13. mas doyok Says:
  14. wah punyaku semakin tak pangkas widget widgetnya hehehe

     
  15. BeDa Says:
  16. Bagus dan tidak memberatkan blog: perpaduan 2 kelebihan. Bermanfaat untuk memperindah blog dan membuat mudah pengunjung.

    Salam ukhuwah

     
  17. IMS Says:
  18. Wah ada yang asik nih disini ya? kalau di praktekin di WP kira-kira cocok ngga ya Gan..?

     
  19. wiyono Says:
  20. mas minta di bantu untuk menampilkan adsense:
    Adsense saya maksunya mau di tampilkan di sidebar, kalau anda bersenang hati mampir di blogku di sini kalau saya masuk ke account GA saya, disana saya mendapati iklan penelusuran dan iklan feed, iklan kontennya gak ada ? bagaimana cara mensettingnya ya... atas perhatiannya terima kasih

     
  21. patut di coba nih..mudah mudahan berhasil....

     
  22. Mhya Says:
  23. oke juga tipsnya, tapi aku save dulu yah,,,,


    makasih infonya!

     
  24. Ega-Priatma Says:
  25. Wah, makasih ya tutorialnya. lagi gemar bermain dengan jquery ya?? moga sukses

     
  26. Nugraha Says:
  27. Waah bagus deh kalau tidak memberatkan blog. Terima kasih infonya :)

     
  28. Beben Says:
  29. waduh ebat nih, ngebahas jQuery terus...hauhauhauhaua
    mantap!!! (kalo ane mah dah diubek di web² para scripter luar, mantap2)...
    keep posting

     
  30. Bunglon Blog Says:
  31. asalamualaikum, apa kabar sob?
    waw semakin menarik tips nya luar biasa
    sepertinya harus sering2 izin buat bookmark haha..
    Sukses Slalu!

     
  32. wiyono Says:
  33. sudah saya lakukan semuanya dan ternyata kembali ke account adsense, terus di account adsense saya hanya muncul, di adsesnse pilihannya hanya ada pilihan penelusuran dan feed, untuk adsense content tidak ada dengan alasan blog berbahasa indonesia, padahal di account blog dan dipengaturan account adsense juga sudah saya ganti bahasa inggris oiya kalau mau lihat blog ku yang lain ada di sini PR3 lho

     
  34. riz Says:
  35. ok sobat...
    keren tutornya :)

     
  36. Kolom ponsel Says:
  37. Selalu mantap tutorialnya...

     
  38. Nice inpoh banget nich, thx yach...:)

     
  39. akhatam Says:
  40. Wah keren bener menunya... Tx Hapia!!

     
  41. mantab nih, bisa docoba untuk blog satunya. makasih sob hapia

     

Post a Comment