Demo :
Cara membuatnya
Dari Dashboard >> Design >> Edit HTML.
Langkah pertama > Penempatan kode CSS
dibawah <b:skin><![CDATA[
........
diatas ]]></b:skin>
.urbanmenu{
width: 190px; /*Lebar menu*/
}
.urbanmenu .nanocord {
font:bold 13px Verdana;
color:white;
background:#606060 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjat4C_3sIn22HpG0eKRBqgexEwWbt-qHDL_vKcIisURq5Y2bWDGa3ftcd4UNa1LpdmGObOLY2_b9gMb9iovZX6mjAQc_vEqSk0KUwu7BUZO3vow3lz1cwQVNrTCUgNYSEpV_5PVv8oJQld/s1600/arrowstop-Nano+Yulianto.gif) no-repeat 8px 6px;
margin-bottom:0;
text-transform:uppercase;
padding:7px 0 7px 31px;
}
.urbanmenu .nanocord a{
text-decoration:none;
color:white;
display:block;
}
.urbanmenu ul{
list-style-type:none;
margin:0;
padding:0;
margin-bottom:0;
}
.urbanmenu ul li{
padding-bottom:2px;
}
.urbanmenu ul li a{
font:normal 12px Arial;
color:black;
background:#E9E9E9;
display:block;
padding:5px 0;
line-height:17px;
padding-left:8px;
text-decoration:none;
}
.urbanmenu ul li a:visited{
color:black;
}
.urbanmenu ul li a:hover{
color:white;
background:black;
}
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: "mouseover", //bisa diganti : "click", "clickgo", atau "mouseover"
mouseoverdelay: 200,
collapseprev: true,
defaultexpanded: [0],
onemustopen: false,
animatedefault: false,
persiststate: true,
toggleclass: ["", "selected"],
togglehtml: ["", "", ""],
animatespeed: "normal", //bisa diganti : "fast", "normal", or "slow"
oninit:function(expandedindices){
},
onopenclose:function(header, index, state, isuseractivated){
}
})
</script>
URL yang berwarna merah jika sudah ada, tidak perlu lagi !.
Langkah ketiga > Penempatan kode HTML
dibawah <body>
........
diatas </body>
<div class="urbanmenu">
<h3 class="nanocord"><a href="#">Contoh</a></h3>
<ul class="kategori">
<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>
<h3 class="nanocord"><a href="#">Contoh</a></h3>
<ul class="kategori">
<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>
Alhamdulillah
0 comments:
Posting Komentar