Home > JavaScript Blogger > Glossy Accordion Menu
Demo :
Cara membuatnya
Dari Dashboard >> Design >> Edit HTML.
Langkah pertama > Penempatan kode CSS
dibawah <b:skin><![CDATA[
........
diatas ]]></b:skin>
.glossymenu{
margin:5px 0;
padding:0;
width:170px; /*lebar menu*/
border:1px solid #9A9A9A;
border-bottom-width: 0;
}
.glossymenu a.menuitem{
background:black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyqMIDWrKcLNHkn83781uCxaPpp9VpHUnpu8Lt6j510c-xafDEc3pF-GUoeTlf9_PqOzKndtmqVYzuHBBNHvb76vHpkSijcS54JMw9eBurCdixldWA-QHHZanXamZNgLlrQ9tyAHXYOklG/s1600/glossyback-Nano+Yulianto.gif) repeat-x bottom left;
font:bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color:white;
display:block;
position:relative;
width:auto;
padding:4px 0;
padding-left:10px;
text-decoration:none;
}
.glossymenu a.menuitem:visited, .glossymenu .menuitem:active{
color: white;
}
.glossymenu a.menuitem .statusicon{
position:absolute;
top:5px;
right:5px;
border:none;
}
.glossymenu a.menuitem:hover{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYpq4MjpTiOLMyClljT2lOsfhgtm3wfxNliI3Ja6lr9aZDe1W5fQZeizdJcT382esfYtf6WgvAYyp8M1PaCth-OjfORjxw9ZyaNV_-tiOoseLigmxTIlhiyZmeMDriBCsyKOxBXI31fAu4/s1600/glossyback2-Nano+Yulianto.gif);
}
.glossymenu div.kategori{
background:white;
}
.glossymenu div.kategori ul{
list-style-type:none;
margin:0;
padding:0;
}
.glossymenu div.kategori ul li{
border-bottom:1px solid blue;
}
.glossymenu div.kategori ul li a{
display:block;
font: normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color:black;
text-decoration:none;
padding:2px 0;
padding-left:10px;
}
.glossymenu div.kategori ul li a:hover{
background:lightblue;
}
Langkah kedua > Penempatan URL dan JavaScript
dibawah ]]></b:skin>
........
diatas </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://pagenano.googlecode.com/files/Accordion%20Konten.js"></script>
<script type="text/javascript">
ddaccordion.init({
headerclass: "nanocord",
contentclass: "kategori",
revealtype: "click", //bisa diganti : "click", "clickgo", atau "mouseover"
mouseoverdelay: 200,
collapseprev: true,
defaultexpanded: [0],
onemustopen: false,
animatedefault: false,
persiststate: true,
toggleclass: ["", ""],
togglehtml: ["suffix", "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoOPIgp_95F9l5-NG1z0oneodJR3Qe4kjD6shyn6uynEWzsFP6U7J1B4_j4yKa3sh9dHqadANSM0J9Xr1zVdMJkNcEsGDSV472YdSZHKMu2O8FaWoNAS5O1nuWi5tWHHWt277XqOxLYPdG/s1600/Nano+Yulianto+-+plus.gif' class='statusicon' />", "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAnHEP0A9Wk_ejifoFhT59Qodr-DjYWF1Ch3H7CQyvijaiuqbc-OGuTWNAAdm3zDLeLtZrYtNuh5XxkSqsfhha811RKJE8VVG6rGugXVtzIIKI8iKxJus-2rH1eAnhmGpt7PMnyMtETYqR/s1600/Nano+Yulianto+-+minus.gif' class='statusicon' />"],
animatespeed: "normal", //bisa diganti : "fast", "normal", atau "slow"
oninit:function(expandedindices){
},
onopenclose:function(header, index, state, isuseractivated){
}
})
</script>
Teks berwarna merah, jika sudah ada tidak perlu lagi...!.
Langkah ketiga > Penempatan kode HTML
dibawah <body>
........
diatas </body>
<div class="glossymenu">
<a class="menuitem" href="/">Home</a>
<a class="menuitem nanocord" href="#">Contoh Accord</a>
<div class="kategori">
<ul>
<li><a href="URL-Anda">Contoh 1</a></li>
<li><a href="URL-Anda">Contoh 2</a></li>
<li><a href="URL-Anda">Contoh 3</a></li>
<li><a href="URL-Anda">Contoh 4</a></li>
<li><a href="URL-Anda">Contoh 5</a></li>
</ul>
</div>
<a class="menuitem" href="URL-Anda">JavaScript Blogger</a>
<a class="menuitem" href="URL-Anda">Template Blogger</a>
<a class="menuitem nanocord" href="#">Contoh</a>
<div class="kategori">
<ul>
<li><a href="URL-Anda">Contoh 1</a></li>
<li><a href="URL-Anda">Contoh 2</a></li>
<li><a href="URL-Anda">Contoh 3</a></li>
<li><a href="URL-Anda">Contoh 4</a></li>
<li><a href="URL-Anda">Contoh 5</a></li>
</ul>
</div>
<a class="menuitem" href="URL-Anda" style="border-bottom:none;">Tutorial</a>
</div>
Alhamdulillah
