Slide Out Navigasi Menu Floating Jquery Di Atas Halaman Blog

Sebenarnya saya bingung mau beri judul apa, untuk sementara kita gunakan saja judul diatas biar sedikit lebih mudah dipahami hehehe. Widget ini bisa dibilang menarik karena ketika kita arahkan mouse ke salah satu menu navigasi, maka akan terlihat efek slide dan gambar yang disembunyikan. Biar lebih jelasnya silahkan anda lihat screenshotnya pada gambar dibawah ini.

Apabila anda tertarik, berikut cara membuatnya :
1. Login ke blog anda
2. Klik Rancangan > Edit HTML
3. Backup terlebih daulu template anda. Kemudian cari kode </head>  (gunakan Ctrl+F)4. Setelah ketemu copy-paste kode jquery dan javascript dibawah ini tepat di atas kode </head>

<script type="text/javascript" src="https://sites.google.com/site/mariozoner/gb-mario/jquery-1.3.2.js"></script>

<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});

$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>

Catatan :
Apabila dalam template ada sudah terdapat kode jquery-1.3.2.js, maka kode tersebut tidak perlu ditambahkan.


5. Lanjut ke langkah berikutnya cari kode ]]></b:skin> dan copy-paste kode CSS berikut diatas kode ]]></b:skin>

ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 0px;
list-style: none;
z-index:999999;
width:700px;
background-color:transparent;
border:0px;
}
ul#navigation li {
width: 90px;
display:inline;
float:left;
border:0;
}
ul#navigation li a {
display: block;
float:left;
margin-top: -2px;
width: 75px;
height: 22px;
background-color:#000000;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #ffffff;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
text-decoration:none;
text-align:center;
padding-top:85px;
opacity: 0.96;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

ul#navigation li a:hover{
background-color:#333333;
}

ul#navigation li a{
letter-spacing:2px;
font-size:10px;
color:#ffffff;
font-family:Verdana, Geneva, sans-serif;
font-weight:bold;
}
ul#navigation .nav1 a{

background-image: url(http://i1182.photobucket.com/albums/x453/marioadit/gmbr%20blog/homeblue.png);
}

ul#navigation .nav2 a {
background-image: url(http://i1182.photobucket.com/albums/x453/marioadit/gmbr%20blog/about-1.png);
}
ul#navigation .nav3 a {

background-image: url(http://i1182.photobucket.com/albums/x453/marioadit/gmbr%20blog/contact-1.png);
}

ul#navigation .nav4 a {
background-image: url(http://i1182.photobucket.com/albums/x453/marioadit/gmbr%20blog/music.png);
}

ul#navigation .nav5 a {
background-image: url(http://i1182.photobucket.com/albums/x453/marioadit/gmbr%20blog/rss-1.png);
}

6. Klik SIMPAN TEMPLATE.
7. Beralih ke menu Rancangan > Elemen Laman > Tambah Gadget > HTML/JavaScript.
8. Silahkan anda copy-paste kembali kode HTML dibawah ini

<ul id="navigation">

<li class="nav1"><a href="http://Link_yang_dituju">Home</a></li>

<li class="nav2"><a href="http://Link_yang_dituju">About</a></li>

<li class="nav3"><a href="http://Link_yang_dituju">Contact</a></li>

<li class="nav4"><a href="http://Link_yang_dituju">Music</a></li>

<li class="nav5"><a href="http://Link_yang_dituju">Rss</a></li>
</ul>

Setting

• Gantilah kode yang berwarna merah dengan link yang dituju
• Untuk kode CSS bisa anda setting sesuai keinginan anda

9. Jangan lupa klik Simpan dan lihat hasilnya.

Apabila ada seputar pertanyaan silahkan berkomentar. Selamat mencoba dan semoga bermanfaat.

Related Post