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
Perhatikan baik-baik langkah berikut ini klo memang pengen buat Drop Down Accordion Menu yang keren ini..heheheheSebelumnya 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
Langkah 1 : Tentunya kamu harus dah Login dulu di Blogger
Langkah 2 : Pada Halaman Dashboard pilih » Design » Edit HTML » Centang Expand Widget
Langkah 3 : Cari Kode </head> byar gampang tekan tombol CTRL + F
Langkah 4 : klo sudah ketemu copy - paste kode di bawah ini kemudian taruh sebelum </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/><script src='http://sites.google.com/site/hitsukeproject/ddaccordion1.js' type='text/javascript'/>
Langkah 5 : Ya udah Di Save aja dulu ...!!!
Langkah 6 : Masih di Tab Design kemudian pilih tab Page Element » Add Gadget » pilih yang HTML / Javascript
Langkah 7 : Sekarang tinggal Copy - Paste kode di bawah ini kemudian letakkan di dalam Gadget tadi
<!-- 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 -->
<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 -->
Langkah 8 : Setelah di Paste di Gadget tadi di SAVE ya..^_^
Maaf ya sobat blogger di tutorial kali ini masalah mengkostumisasi style css nya di cari tau sendiri aja ya. Mungkin Style Css na diatas cuma cocok buat template na hitsuke. Jadi bagi yang mo ganti di sesuaiin aja ndiri ma template blogger na masing - masing. Hm...klo masalah link na boleh dirubah sesuai keinginan sendiri tapi jangan merubah link yang paling bawah ya sob, PLEASE BGT JANGAN DIRUBAH YA...!!!!. Ya udah sekian dulu buat cara membuat drop down menu accordion. Semoga Bermanfaat and GOOD LUCK sukses selalu ^_^.
No comments:
Post a Comment