Top Module Empty

Terbaru

Terpopuler
Membuat Menu Accordion Dengan JQuery PDF Print E-mail
Written by Pak Tani   
Thursday, 29 April 2010 14:41
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.

Comments (6)
  • |125.166.57.xxx |2010-07-28 13:32:20 Admiral
    Kalau warna Background kotak Menunya diganti bisa gak?? :0 Kalau bisa bagaimana Caranya??
    ReplyQuote
  • |120.32.85.xxx |2010-08-26 02:13:32 fdsaf
    These World of Warcraft player are very efficient in buying cheap wow gold. Many other World of Warcraft wow gold would do well to take notes on how the Warcraft guide illustrates the art of World of Warcraft gold making into no risk and easy to follow steps. to get you a ton of wow gold. As we all know, there are many rip-off sites which just cheat your money and will not deliver wow gold for you. When I buy wow gold kaufen, I would like to see whether this site has a good reputation.
    At this time, we should be careful to check whether this site is trustable or not. Now you need to know how to use the rich people in World of Warcraft
    ReplyQuote
Write comment
Your Contact Details:
Comment:
[b] [i] [u] [url] [quote] [code] [img]   
:D:angry::angry-red::evil::idea::love::x:no-comments::ooo::pirate::?::(
:sleep::););)):0
Last Updated on Thursday, 29 April 2010 14:42
 
original solarflare design by rhuk
lunarized by joomlashack