Malam ini ada saudaraku (Hery) yang bertanya gimana caranya membuat Drop Menu seperti punya ku ini. Sebelumnya ak mo berterima kasih kepada saudaraku Ocim yang telah memberiku banyak ilmu selama aku mulai ngeblog, termasuk memberikan tutor untuk membuat drop menu ini.
Ok, kita langsung mulai saja.
1. Login terlebih dahulu.
2. Pilih Layout/Tata Letak --> Edit HTML
3. Copy kode di bawah ini trus letakkan di antara kode <head> </head>
<script src='http://www.hotlinkfiles.com/files/2096147_8gjww/jquery-1.2.6.pack.js]jquery-1.2.6.pack.js' type='text/javascript'/>
<script src='http://www.hotlinkfiles.com/files/2096146_3tpwj/ddaccordion.js]ddaccordion.js' type='text/javascript'/>
<script type='text/javascript'>
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" 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>
4. Lalu Copy kode ini dan letakkan sebelum kode ]]></b:skin>
arrowlistmenu{
width: 320px; /*ukuran lebar dari menu*/
}
.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Arial;
color: white;
background: black url(http://img84.imageshack.us/img84/7623/ocimtitlebarpr5.png) 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{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(http://img515.imageshack.us/img515/6545/ocimtitlebaractivekj3.png);
}
.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}
.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}
.arrowlistmenu ul li a{
color: #A70303;
background: url(http://img227.imageshack.us/img227/2667/ocimarrowbulletqk9.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}
.arrowlistmenu ul li a:visited{
color: #A70303;
}
kode yang di cetak merah untuk menentukan lebar menu, sebaiknya sesuaikan dengan sidebar template Anda.
Setelah semuanya selesai, save template.
5. Sekarang kita menuju Edit Page Element --> masukan kode ini
<div class="arrowlistmenu">
<h3 class="menuheader expandable">Judul Menu</h3>
<ul class="categoryitems">
Isi Menu
</ul>
</div>
Note: Jumlah Menu dapat sebanyak yang kita suka.
Ok, dah sls. Kalau gak jalan tolong kasi koment ya, kalau jalan wajib kasi koment. Buat mas Ocim, terima kasih banyak atas dukungannya.
Kamis, 01 Januari 2009
Menu Accordion
.
Kamis, 01 Januari 2009
Langganan:
Posting Komentar (Atom)
2 komentar:
say juga mo coba ah .. salam kenal
hay...how about link exchange???
Posting Komentar