Menu Accordion

12.55 // 0 komentar // macho // Category: Tutorial Blog //

Lihat demo

Menu ini cocok untuk blog anda yang mempunyai banyak menu dan sub menu. Dan Menu vertikal ini cocok kalau dipasang di sidebar.

Jika tertarik, ikutin langkah-langkahnya :

Step 1:

Login ke Blog Anda
Masuk ke Layout/Tata Letak
Terus menuju Edit HTML
Cari code ini ]]></b:skin>
Copy script code dibawah ini dan letakkan dibawah code ]]></b:skin>

ddaccordion.init({
 headerclass: "expandable", //Shared CSS class name of headers group that are expandable
 contentclass: "categoryitems", //Shared CSS class name of contents group
 revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
 mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
 collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
 defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
 onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
 animatedefault: false, //Should contents open by default be animated into view?
 persiststate: true, //persist state of opened contents within browser session?
 toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
 togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
 animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
 oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
  //do nothing
 },
 onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
  //do nothing
 }
})

</script>

Taruh script code dibawah ini dan letakkan diatas code ]]></b:skin>

/*MENU ACCORDION*/
.arrowlistmenu{
width: 180px; 
}

.arrowlistmenu .menuheader{ 
font: bold 14px Arial;
color: white;
background: black url(http://i47.tinypic.com/121eqyu.jpg) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}

.arrowlistmenu .openheader{ 
background-image: url(http://i50.tinypic.com/11775p0.png);
}

.arrowlistmenu ul{ 
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; 
}

.arrowlistmenu ul li{
padding-bottom: 2px; 
}

.arrowlistmenu ul li a{
color: #A70303;
background: url(http://i46.tinypic.com/2ykak3t.jpg) no-repeat center left; 
display: block;
padding: 2px 0;
padding-left: 19px; 
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}

.arrowlistmenu ul li a:visited{
color: #A70303;
}

.arrowlistmenu ul li a:hover{ 
color: #A70303;
background-color: #F3F3F3;
}

Kemudian Simpan Template

Step 2 :

klik Page Element/ Elemen Laman tab
klik Add a Page Element/ Tambah Gadget
klik Javascript/HTML
Copy dan paste code di bawah ini:

<h3 class="menuheader expandable">DESAIN GRAFIS</h3>
<ul class="categoryitems">
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
<li><a href="#">sub menu 8</a></li>
</ul>

<h3 class="menuheader expandable">TUTORIAL BLOG</h3>
<ul class="categoryitems">
<li><a href="http://tutorialmacho.blogspot.com/2010/06/menu-accordion.html">membuat menu accordion</a></li>
<li><a href="http://tutorialmacho.blogspot.com/2010/06/memasang-kalender.html">memasang kalender</a></li>
<li><a href="http://tutorialmacho.blogspot.com/2010/06/membuat-judul-blog-berjalan.html">membuat judul blog berjalan</a></li>
<li><a href="http://tutorialmacho.blogspot.com/2010/03/ganti-kursor.html">ganti kursor</a></li>
<li><a href="#">membuat tombol back to top</a></li>
<li><a href="#">memasang jam</a></li>
</ul>

<h3 class="menuheader expandable">LINK TERKAIT</h3>
<ul class="categoryitems">
<li><a href="http://ficomp.blogspot.com/">LPK Ficomp Jepara</a></li>
<li><a href="http://gamanusantara.blogspot.com/">LP2K Gama Nusantara Kudus</a></li>
<li><a href="#">PKBM Nurul Muhtadin</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>

<div>

Kemudian Simpan
Lihat hasil.

Selamat mencoba…

Menu Accordion

Related posts :

0 komentar for this post

Leave a reply

Photoshop

Followers