Menu PopOut vertikal melayang dengan jQuery

Beberapa pilihan menu ini sangat berbeda dari standarnya menu ini terlihat cantik karena dapat berguna dalam pembangunan statis halaman rumah dan tidak ribet/membuat penuh halaman muka blog.

Ikuti langkah-langkah di bawah ini untuk menginstalnya pada blog Anda sendiri:
* Login ke Blogger

* Pilih Tata letak/Tambahkan gadget

* Pilih HTML/JavaScript

* Paste kode berikut:

Judul Spoiler :

Read more: http://kangasepsule.blogspot.com/2012/07/cara-membuat-spoiler-di-blog-seperti-di.html#ixzz26kp6Vlbp

<style>

ul#btt_nav {
position: fixed;
margin: 0px;
padding: 0px;
top: 150px;
right: 0px;
list-style: none;
z-index:9999;
}
ul#btt_nav li {
width:100px;
border:0px;
display: block;
padding-top:1px;
padding-bottom:1px;
}

ul#btt_nav li a {
display: block;
margin-right: -2px;
width: 100px;
height: 70px; 
background-color:#000;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #fff;
-moz-border-radius:10px 0px 0px 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
-khtml-border-top-left-radius: 10px;
/*-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
*/
opacity: 0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#btt_nav .home a{
background-image: url(http://icons.iconarchive.com/icons/double-j-design/origami-colored-pencil/64/blue-home-icon.png);
}
ul#btt_nav .portfolio a {
background-image: url(http://icons.iconarchive.com/icons/aha-soft/standard-portfolio/64/Graphic-designer-icon.png);
}
ul#btt_nav .services a {
background-image: url(http://icons.iconarchive.com/icons/kyo-tux/phuzion/64/Misc-Tools-icon.png);
}
ul#btt_nav .profile a {
background-image: url(http://icons.iconarchive.com/icons/webiconset/blogging/64/About-me-icon.png);
}
ul#btt_nav .contact a {
background-image: url(http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-2/64/message-already-read-icon.png);
}
</style>
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'/>

 <script type='text/javascript'> 
$(function() {
$(&#39;#btt_nav a&#39;).stop().animate({&#39;marginLeft&#39;:&#39;85px&#39;},1000);

$(&#39;#btt_nav &gt; li&#39;).hover(
function () {
$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-2px&#39;},200);
},
function () {
$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;85px&#39;},200);
}
);
});
</script>
 <ul id='btt_nav'> 
<li class='home'><a href='/'/></li> 
<li class='judul'><a href='#'/></li>
 <li class='judul'><a href='#'/></li>
 <li class='judul'><a href='#'/></li> 
<li class='judul'><a href='#'/></li> 
</ul>

Isi rincian Anda dengan judul yang sesuai untuk lokasi
tanda-tanda, kemudian ganti tanda # dengan link dan tekan Simpan.
Click demo untuk melihat tampilan menu => DEMO

Penulis : Unknown ~ Sebuah blog yang menyediakan berbagai macam informasi

Artikel Menu PopOut vertikal melayang dengan jQuery ini dipublish oleh Unknown pada hari Senin, 17 September 2012. Semoga artikel ini dapat bermanfaat.Terimakasih atas kunjungan Anda silahkan tinggalkan komentar.sudah ada 0 komentar: di postingan Menu PopOut vertikal melayang dengan jQuery