Cara Mudah Membuat Accordion Menu

Kemarin setelah browsing ke tempat om jquery, ada suatu hal menarik yang ane dapat di sana. Pembuatan widget yang menggunakan jquery merupakan suatu yang menarik, dan sebenarnya om jquery sudah memberikan script dasar untuk pembuatan tersebut, serta beberapa trik pengembangan. Namun kali ini ane hanya akan share script sederhana untuk membuat accordion menu, pembuatannya tergolong mudah alias gak ribet, biar kita sama-sama ngerti bila kita ingin mempelajari tentang jquery lebih dalam lagi. Baiklah sekarang mari kita bahas cara pembuatan accordioan menu, ikuti langkah berikut.

Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Masukkan kode di bawah setelah <head>

<link href="http://ajax.googleapis.com/

ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"

rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/

ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/

ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  
  <script>
  $(document).ready(function() {
    $("#accordion").accordion();
  });
  </script>

Simpan Template
Klik lagi Rancangan
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan Kode berikut ke dalamnya

<div id="accordion">
<h3><a href="#">Accordion 1</a></h3>
<div>
<p>
masukkan tulisan anda di sini. Kalau mau mengganti jadi list

hapus kode <p>....</p> dan ganti menjadi seperti accordion 2
</p>
</div>
<h3><a href="#">accordion 2</a></h3>
<div>
<ul>

<li>List item one</li>

<li>List item two</li>
<li>List item three</li>

</ul>

</div>
<h3><a href="#">accordion 3</a></h3>
<div>
<p>

Masukkan tulisan anda di sini. Ini hanya Contoh gabungan

antara paragraf dan list
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3><a href="#">Section 4</a></h3>
<div>
<p>
Masukkan Tulisan anda di sini
</p>
<p>
Di sini juga bisa nada masukkan tulisan

</p>
</div>
</div>

Letakkan Widgetnya dimana anda suka, karena ane juga pasti suka hehehe :)
Selanjutnya Simpan Template
Selesai dan lihat hasilnya
ok...gan selamat mencoba dan sukses selalu

''keep spirits and do te best''

Cara Mudah Membuat Accordion Menu

BLOGONOL TUTORIAL

Cara Mudah Membuat Accordion Menu

Unknown 1 Comment

About the Author