Mau gunakan untuk apapun silahkan! Muat gambar? Penuhi dengan berbagai teks? Atau mungkin deretan menu dan link lain mo ditampilkan di collapsible ini? Semua sudah tertata dengan rapi dengan ukuran yang sangat ideal. Sampeyan tinggal masukkan saja sebanyak sampeyan mau. Plung ... plung ... plung ... dan berkarung-karung akan terwadahi. yah ... asal jangan masukkan yang berbau busuk saja. He ... he .... 'ntar pengunjung pada lari kesetanan kaya dikejar babi hutan kesurupan mabok oplosan, he ...... he ...!!!!
Mau gunakan untuk apapun silahkan! Muat gambar? Penuhi dengan berbagai teks? Atau mungkin deretan menu dan link lain mo ditampilkan di collapsible ini? Semua sudah tertata dengan rapi dengan ukuran yang sangat ideal. Sampeyan tinggal masukkan saja sebanyak sampeyan mau. Plung ... plung ... plung ... dan berkarung-karung akan terwadahi. yah ... asal jangan masukkan yang berbau busuk saja. He ... he .... 'ntar pengunjung pada lari kesetanan kaya dikejar babi hutan kesurupan mabok oplosan, he ...... he ...!!!!
Cara Membuat Animated Vertical Menu Dengan jQuery,pasti tak akan menyangka javascript yang tak seberapa banyak ini mampu menghasilkan sebuah menu vertikal dengan bentuk animasi dan dilengkapi fade effects. Script kurang dari 10 deret ini mampu membuat setiap link title pada menu bergoyang ke kanan dan ke kiri saat mouse menyentuh setiap link. Apabila blog sudah menggunakan jquery-1.3.2.js atau jquery-1.3.2.min.js, tinggal tambahkan javascript di bawahnya maka sebuah menu cantik yang sangat indah akan hadir dihalaman blog sampeyan. Boleh percaya atau tidak, tetapi silahkan lihat dulu scripnya yang hanya beberapa baris ini.Currently Firefox, Safari and Internet Explorer(IE) have limited support for the proposed CSS border-corners.
We would love to hear your comments on Rounded Corners with Animation Effect.
Thank's for your visiting our blog!
http://rizkymakkah.blogspot.com/
KODE CSS
.bgsGRVMnu{
list-style:none;
padding:0;
margin:0;
width:220px;
background:#333 url(http://i27.tinypic.com/2lstsex/bgsGR/bgVmenu.jpg) top center no-repeat;
padding:5px 3px;
border:2px solid #555;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
-moz-border-radius-topleft: 12px;
-moz-border-radius-topright: 12px;
-webkit-border-top-left-radius: 12px;
-webkit-bordertop-right-radius: 12px;
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
}
.bgsGRVMnu li{
margin:0;
padding:0;
margin-bottom:1px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
position:relative;
background:#888 url(http://i49.tinypic.com/28cj9r5.jpg) bottom left repeat-x;
}
.bgsGRVMnu li:hover{
opacity:0.6;
-moz-opacity:0.6;
filter:alpha(opacity=60);
}
.bgsGRVMnu li a{
font-size:11px;
font-family:Arial !important;
display:block;
border:1px solid #ccc;
background:url(http://i44.tinypic.com/chrv9.gif) no-repeat 6px 9px ;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding:7px 0 7px 30px;
color: #fff;
text-decoration:none;
text-shadow:0px 1px 1px #5bc8fb;
filter: Shadow(Color=#222, Direction=135, Strength=1);
}
.bgsGRVMnu li a:hover{
color:red;
}
.bgsGRVMnu li:hover{
background:url(http://i25.tinypic.com/new45k/bgsGR/images/bgbluelight.png);
background-repeat: repeat-x;
background-position:0 60%;
}
.bgsGRVMnu li span{
position:absolute;
top:9px;
left:7px;
background: url(http://i26.tinypic.com/1zl7nf6/bgsGR/images/bgblue.png) center left no-repeat;
width:13px;
height:12px;
}
http://www.negrionta.co.tv
Di bawah ini Kode HTML
<ul class="bgsGRVMnu">
<li><a href="Link-1">Link Title-1</a><span></span></li>
<li><a href="Link-2">Link Title-2</a><span></span></li>
<li><a href="Link-3">Link Title-3</a><span></span></li>
<li><a href="Link-4">Link Title-4</a><span></span></li>
<li><a href="Link-5">Link Title-5</a><span></span></li>
<li><a href="Link-6">Link Title-6</a><span></span></li>
<li><a href="Link-7">Link Title-7</a><span></span></li>
<li><a href="Link-8">Link Title-8</a><span></span></li>
<li><a href="Link-9">Link Title-9</a><span></span></li>
<li><a href="Link-10">Link Title-10</a><span></span></li>
<li><a href="Link-11">Link Title-11</a><span></span></li>
<li><a href="Link-12">Link Title-12</a><span></span></li>
</ul>Nara sumber dari gubhukreyot
