Accordion Menu Style (menu klick buka tutup)

By beething mooo

Sunday, June 17, 2012

Share :

Tweet

Assalamu’alaikum sobat,,, dan salam sejah tera buat semua,,,,
Bagaimana neh kabar sobat saat baca postingan saya kali ini hee semoga baik baik saja
Tidak seperti saya,,karena saat ini saiya lagi kena meriang,,hidung buntu,batuh tambah kepala muter muter :((
Dah merem dari abis magrip tapi ngk bias babuk juga ~X( (:|
Yah dari pada bengong mending nulis aja di blog hehehheehee
Udah baca kan judul di atas,,hikz..kalo belum sempat kan baca dulu,dan kemudian anda akan bertanya Tanya apa itu accordion ( buat para master yang udah tahu lewat aja ya,,,, :)>- )
Sedikit saya jelaskan,,,( emang sedikit juga pengetahuan saya … hikz… X_X )
Accordion adalah salah satu fitur dari jquery java script,,,
Terus apa itu jquery,,,,, :-/ …. Maaf saiya juga kurang tahu :))
Siapa pun dia pokoke abaikan aja hahahahahaa accordion dalam bhasa saiya,,saiya sebut menu buka tutup ,,,, susah saya menjelaskan,,, untuk lebih jelas nya silahkan ke tkp aja untuk melihat LIHAT DEMO ACCORDION MENU

Bagi yang belum tau cara nya di sini saiya mencoba menjelaskan secara detail,terperinci,dan dalam tempo yang sesingkat singkat nya :-B
Langsung praktek mbak bro,,,,,, :|

Setelah loggin >> desain >> edit HTML backup dulu template sobat,, biar ngk nyesel klo ada kesalahan dalam pemasangan accordion ini :-w
Kemudian sobat cari code ]]></b:skin>
Setelah ketemu sobat pastle kan script berikut di bawah ]]></b:skin>

<!--=====================ACORDION MENU=======================-->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://klick-arie.googlecode.com/files/acordion-menu.js' type='text/javascript'>
/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library
* recode by klick arie http://klickarie.blogspot.com
* klick.arie ponorogo 19 may 2012
***********************************************/
</script>
<script type='text/javascript'>

ddaccordion.init({
headerclass: &quot;expandable&quot;, //Shared CSS class name of headers group that are expandable
contentclass: &quot;categoryitems&quot;, //Shared CSS class name of contents group
revealtype: &quot;click&quot;, //Reveal content when user clicks or onmouseover the header? Valid value: &quot;click&quot;, &quot;clickgo&quot;, or &quot;mouseover&quot;
mouseoverdelay: 200, //if revealtype=&quot;mouseover&quot;, 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: [&quot;&quot;, &quot;openheader&quot;], //Two CSS classes to be applied to the header when it&#39;s collapsed and expanded, respectively [&quot;class1&quot;, &quot;class2&quot;]
togglehtml: [&quot;prefix&quot;, &quot;&quot;, &quot;&quot;], //Additional HTML added to the header when it&#39;s collapsed and expanded, respectively [&quot;position&quot;, &quot;html1&quot;, &quot;html2&quot;] (see docs)
animatespeed: &quot;fast&quot;, //speed of animation: integer in milliseconds (ie: 200), or keywords &quot;fast&quot;, &quot;normal&quot;, or &quot;slow&quot;
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>

<!--=====================ACORDION MENU=======================-->

Lanjut mbak bro,,,, setelah itu pastle kan css berikut di bawah nya… tepat di bawah nya ya,,,, :)>-

<!--**********************css acordion start***********************-->
<style type='text/css'>

.arrowlistmenu{
width: auto; /*width of accordion menu*/
}
.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Georgia;
color: cyan;
background: #181818 ;
border:3px solid #1E90FF;
-all-border-radius:10px 0 10px 0;
-moz-border-radius:10px 0 10px 0;
-webkit-border-radius:10px 0 10px 0;
margin-bottom: 2px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 5px 0 5px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}
.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it&#39;s expanded*/
border:3px solid #FF1493;background:#1E90FF;font-color:white;
-all-border-radius:10px 0 10px 0;
-moz-border-radius:10px 0 10px 0;
-webkit-border-radius:10px 0 10px 0;
}
.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom:4px; /*bottom spacing between each UL and rest of content*/
}
.arrowlistmenu ul li{
padding-bottom: 1px; /*bottom spacing between menu items*/
}
.arrowlistmenu ul li a{
color: red;
background: url() 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: 0px dotted red;
font-size: 90%;
}
.arrowlistmenu ul li a:visited{
color: #A70303;
}
.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}
</style>

<!--**********************css acordion end***********************-->

kalo tampilan nya tidak klop ama css blog sobat silah kan di edit sendiri css di atas
Selesai dan jangan lupa save template sobat #:-S
Sedangkan penerapan nya dalam sidebar adalah dengan menyisipkan kode berikut di awal dan akir HTML conten yang ingin di kemas menggunakan accordion menu

<div class='arrowlistmenu'>
<h3 class='menuheader expandable'>Judul Content</h3>
<ul class='categoryitems'>

<!--disini letakan kotent nya-->

</ul>
<h3 class='menuheader expandable'>Judul Content</h3>
<ul class='categoryitems'>

<!--disini letakan kotent nya-->

</ul>
<h3 class='menuheader expandable'>Judul Content</h3>
<ul class='categoryitems'>

<!--disini letakan kotent nya-->

</ul>
<h3 class='menuheader expandable'>Judul Content</h3>
<ul class='categoryitems'>
<!--disini letakan kotent nya-->
</ul>
</div>

Demikian sedikit share kali ini semoga bermanfaat…. :7

Dan jangan lupa jaga selalu kesehatan dan tetap berdoa kepada Tuhan [-O< Semoga selalu dalam lindungan Nya,,,, aamiin………. Ada panjang pendek nya tulisan kali ini saya mohon maaf yang segede gede nya Wasalam’mualaikum wr,,,wb,,, Description: accordion, jquery, gaged,blogger

Rating: 4.5

__(¯'•¸·'Klic-îï€'·¸•'¯)__

Tag : blogger, info