Demo :
-
Contoh dengan lebar 250px...
-
Contoh dengan lebar 180px...
-
Contoh dengan lebar 300px...
-
Contoh dengan lebar 400px...
Cara membuatnya
Dari Dashboard >> Design >> Edit HTML.
Langkah pertama > Penempatan kode CSS
dibawah <b:skin><![CDATA[
........
diatas ]]></b:skin>
.haccordion{
padding: 0;
}
.haccordion ul{
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.haccordion li{
margin: 0;
padding: 0;
display: block;
width: 100%;
height: 200px;
overflow: hidden;
float: left;
}
.haccordion li .hpanel{
width: 100%;
height: 200px;
}
#hc1 li{
margin:0 0 0 0;
border: 12px solid black;
}
#hc1 li .hpanel{
padding:5px;
background:yellow;
color:black;
text-align:left;
cursor:hand;
cursor:pointer;
}
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/Horizontal%20Accordion.js"></script>
<script type="text/javascript">
haccordion.setup({
accordionid: 'hc1',
paneldimensions: {peekw:'30px', fullw:'450px', h:'150px'},
selectedli: [-1, true],
collapsecurrent: true
})
</script>
Langkah ketiga > Penempatan kode HTML
dibawah <body>
........
diatas </body>
<div id="hc1" class="haccordion">
<ul>
<li style="border-right-width:0">
<div class="hpanel" style="padding:10px; width:250px">
Contoh dengan lebar 250px...
</div>
</li>
<li style="border-right-width:0">
<div class="hpanel" style="padding:10px; width:180px">
Contoh dengan lebar 180px...
</div>
</li>
<li style="border-right-width:0">
<div class="hpanel" style="padding:10px; width:300px">
Contoh dengan lebar 300px...
</div>
</li>
<li>
<div class="hpanel" style="padding:10px; width:400px">
Contoh dengan lebar 400px...
</div>
</li>
</ul>
</div>
Credit : Dynamic Drive
Alhamdulillah
0 comments:
Posting Komentar