Membuat Accordion Menu Pada Blog

// June 18th, 2009 // design

Membuat Accordion Menu Pada Blog

Bro & Sist, kali ini, untuk membuat blog menjadi lebih menarik, kita coba membuat menu navigasi dengan sentuhan accordion. Kamu mungkin pernah atau bahkan sering mendengar istilah ini. Accordion adalah efek yang bekerja jika header di klik. Illustrasinya begini, jika header menu pertama di klik, maka sub menu akan tampil secara keseluruhan. Dan jika header menu kedua diklik, header yang pertama akan kembali tertutup dan menu header kedua akan tampil. Begitu seterusnya jika header menu yang lain di klik.

Dalam contoh kali ini, menu header adalah tag H3, dengan masing-masing sub menu dengan tag UL tag yang akan memperluas/tampil jiak header di klik. Header adalah tombol yang ditekan dengan “klik” melalui mouse. Tampilan menu ini diatur melalui CSS dan efek accordion menggunakan Javascript, salah satunya menggunakan jquery dari google.

Berikut adalah cara pemasangan accordion menu ini pada blog atau web :

  1. Download file accordion menu (link download ada di bagian bawah post)
  2. Upload semua file yang telah di download ke hostingan kamu. Contoh, letakan semua file dalam satu folder yang diberi nama “menu” ke folder public_html di hostingan-mu.
  3. Tambahkan script berikut kedalam tag header diantara <header> … </header>

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

    <script type=”text/javascript” src=”acc/ddaccordion.js”></script>

    <script type=”text/javascript” src=”acc/ddaccordion2.js”></script>

    <link title=”default” media=”screen” type=”text/css” href=”acc/ddaccordion.css” rel=”stylesheet”>

  4. Letakan script berikut di dalam tag <body>. Script berikut adalah script menu dan sub menu. Kamu bisa merubah menu sesuka hati, baik menambah atau mengurangi menu/submenu.

    <div>
    <h3>MENU 1</h3>
    <ul>
    <li><a href=”#”>Submenu 1</a></li>
    <li><a href=”#”>Submenu 2</a></li>
    <li><a href=”#”>Submenu 3</a></li>
    <li><a href=”#”>Submenu 4</a></li>
    <li><a href=”#”>Submenu 5</a></li>
    <li><a href=”#”>Submenu 6</a></li>
    <li><a href=”#”>Submenu 7</a></li>
    <li><a href=”#”>Submenu 8</a></li>
    </ul>

    <h3>MENU 2</h3>
    <ul>
    <li><a href=”#”>Submenu 1</a></li>
    <li><a href=”#”>Submenu 2</a></li>
    <li><a href=”#”>Submenu 3</a></li>
    <li><a href=”#”>Submenu 4</a></li>
    <li><a href=”#”>Submenu 5</a></li>
    <li><a href=”#”>Submenu 6</a></li>
    <li><a href=”#”>Submenu 7</a></li>
    <li><a href=”#”>Submenu 8</a></li>
    </ul>

    <h3>MENU 3</h3>
    <ul>
    <li><a href=”#”>Submenu 1</a></li>
    <li><a href=”#”>Submenu 2</a></li>
    <li><a href=”#”>Submenu 3</a></li>
    <li><a href=”#”>Submenu 4</a></li>
    <li><a href=”#”>Submenu 5</a></li>
    <li><a href=”#”>Submenu 6</a></li>
    <li><a href=”#”>Submenu 7</a></li>
    <li><a href=”#”>Submenu 8</a></li>
    </ul>

    <h3 style=”cursor: default”>MENU 4</h3>
    <div>
    </div>

  5. Selesai…!!!

Note :
– Sebelum mengupload semua file, perhatikan lokasi images yang ada di file ddaccordion.css. Images ini digunakan untuk background header menu pada saat submenu tampil/tidak.
– Buat kamu yang menggunakan free hosting dan tidak bisa upload file (misal : blogger.com), semua file bisa diupload ke hosting yang terpisah dari hosting blog, dengan catatan lokasi file yang ada di ddaccordion.css dan script yang ada di header harus tepat.

Gimana, kamu tertarik untuk menggunakan accordion menu…? Sok atuh, tunggu apa lagi buruan coba. Kalo ada pertanyaan, silahkan isi form comment dibawah, jangan ragu-ragu.

Delicious Stumble Upon Technorati Twitter Facebook Digg

17 Responses to “Membuat Accordion Menu Pada Blog”

  1. ululazmi says:
    April 3, 2010 at 11:15

    mampir kesini terasa tambah pinter e n pede . jgn bosen kasi tips en triknya boz…jd reureug nih! he..he..

    Reply
  2. vebri says:
    April 19, 2010 at 16:07

    boss ko yang saya download ga bisa di jalanin menunya knapa??
    tolong infonya!!

    Reply
« Older Comments

Leave a Reply