Membuat DropDown Accordion Menu

Hello sobat blogger semua..!!! Nice to meet you again. Ngomong-ngomong tw nggak sobat blogger yang dimaksud dengan Drop Down Accordion Menu?? Ok byar tak kasih penjelasan sedikit dulu, Drop down accordion menu adalah Drop Down menu yang seperti Cacing accordion atau dalam bahasa indonesianya bisa disebut juga daftar menu yang otomatis menurun kebawah ketika mouse mendekatinya, atau bisa dibilang juga menu yang otomatis turun kebawah seperti cacing akordion ketika di lewati tikus (mouse). Pada saat tikus (mouse) lewat kesana Si cacing na lari ketakutan karena nanti mo dimakan tikus tipe baru yang suka makan cacing akordion. Hahaha haha........!!! Sorry friend..that's all just bullshit alias non sense my friend. Well cukup becandanya langsung kita praktekkan saja ^_^.

Sebelumnya halaman ini juga bisa di temukan di google dengan kata kunci

Dropdown accordion menu
Membuat Drop Down Accordion Menu
membuat drop down menu yang turun kebawah
Membuat menu seperti cacing accordion
Membuat menu yang otomatis turun kebawah

<!-- Begin DD Accordion Menu - http://www.hitsuke.blogspot.com -->

<script type="text/javascript">
ddaccordion.init({

headerclass: "headerbar", //Shared CSS class name of headers group

contentclass: "submenu", //Shared CSS class name of contents group

revealtype: "mouseover", //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: true, //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: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]

togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)

animatespeed: "normal", //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><style type="text/css">

.submenu{display: none}

</style>
<style type="text/css">
.hitsukefx3{

width: 100%; /*width of menu*/
}
.hitsukefx3 .headerbar{

font: bold 14px arial;

color: white;

border: 2px solid #d9e3ff;

-moz-border-radius-topleft:5px;

-moz-border-radius-topright:5px;

-moz-border-radius-bottomleft:5px;

-moz-border-radius-bottomright:5px;

margin-bottom: 0; /*bottom spacing between header and rest of content*/

text-transform: uppercase;

padding: 7px 0 7px 20px; /*20px is left indentation of header text*/

}
.hitsukefx3 .headerbar a{

text-decoration: none;

color: white;

display: block;

}
.hitsukefx3 ul{

list-style-type: none;

margin: 0;

padding: 0;

margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
}
.hitsukefx3 ul li{

padding-bottom: 2px; /*bottom spacing between menu items*/

}
.hitsukefx3 ul li a{

font: normal 12px Arial;

color: white;

background: #fff;

display: block;

padding: 5px 0;

line-height: 17px;

padding-left: 20px; /*link text is indented 20px*/

text-decoration: none;

}
.hitsukefx3 ul li a:visited{

color: white;

}
.hitsukefx3 ul li a:hover{ /*hover state CSS*/

color: white;

background: #fff;

}
</style>

<div class="hitsukefx3">
<h3 headerindex="0h" class="headerbar"><a href="#">Header Link Default</a></h3>

<ul style="display: none;" contentindex="0c" class="submenu">

<li><a href="#">Your Link Here</a></li>

<li><a href="#">Your Link Here</a></li>

<li><a href="#">Your Link Here</a></li>

</ul>
<h3 headerindex="1h" class="headerbar"><a href="#">Your Header Link 1</a></h3>
<ul style="display: none;" contentindex="1c" class="submenu">

<li><a href="#">Your Link Here</a></li>

</ul>
<h3 headerindex="2h" class="headerbar"><a href="#">Your Header Link 2</a></h3>

<ul style="display: none;" contentindex="2c" class="submenu">

<li><a href="#">Your Link Here</a></li>

</ul>
<h3 headerindex="3h" class="headerbar"><a href="http://hitsuke.blogspot.com/">Powered by Hitsuke</a></h3>

<ul style="display: none;" contentindex="3c" class="submenu">

<li><a href="http://hitsuke.blogspot.com/2009/08/membuat-drop-down-accordion-menu.html" title="Klik disini untuk mendapatkan menu yg seperti ini..!!">Get DDA Menu Here</a></li>
</ul>
</div>

</div>

<!-- End DD Accordion Menu - http://www.hitsuke.blogspot.com -->