Dehardy™: Cara membuat Menu PopOut vertikal melayang dengan jQuery

17 Sep 2012

Cara membuat 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 :
<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.

Posted By : Unknown 17 Sep 2012


Silahkan berkomentar tanpa Spaming dan Pasang Link Hidup. Promo Iklan di komentar Blog akan di anggap Spam.

Berkomentarlah yang berhubungan dengan Artikel Judul.

Mohon kesediaannya memberikan Kritik dan Saran demi perkembangan blog ini.

Artikel Cara membuat Menu PopOut vertikal melayang dengan jQuery Terimakasih atas kunjungan serta kesediaan sobat membaca artikel ini dan Jangan lupa sertakan linknya di bawah ini sob :


Comments
0 Comments

Tidak ada komentar: