Thursday, April 22, 2010

Navigasi Efek Slide Out dengan jQuery

Posted by dav On 6:13 AM
Sekarang kita akan membuat menu navigasi dengan efek slide out yang tetap menggunakan framework jQuery. Menu ini mempunyai efek slide yang sangat halus, saat kita mengarahkan pointer mouse (mouse hover) pada menu, maka menu akan bergeser keluar (slide out) secara perlahan dan akan kembali pada posisi semula jika kita menggeser mouse keluar dari area menu selain itu menu ini akan selalu dalam posisi tetap walau kita menggeser (scroll) halaman naik ataupun turun. Kita bisa saja menggunakan navigasi menu ini untuk berbagai keperluan, misal Sosial Bookmark[1] dan lain sebagainya. Menu navigasi ini terinspirasi dari blog Tympanus.net[2], sedang Icon untuk menu navigasi diambil dari DryIcons.com[3].

Integrasi Navigasi Efek Slide Out (Slide Out Navigation)

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Klik "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:
]]></b:skin>
Langkah 5
Masukan (copypaste) kode CSS dibawah ini diatas kode pada langkah 4:
ul#menusisi {
position: fixed;
margin: 0px;
padding: 0px;
top: 50px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#menusisi li {
width: 100px;
}
ul#menusisi li a {
display: block;
margin-left: -50px;
width: 100px;
height: 55px; 
background-color:#141414;
background-repeat:no-repeat;
background-position:48px center;
border:1px solid #cfcfcf;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-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=80);
}
ul#menusisi .beranda a{
background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaBfhOhI/AAAAAAAAD_0/nV3ITEV9d3M/d/nav_home.png);
}
ul#menusisi .tentang a{
background-image: url(http://lh4.ggpht.com/_xcD4JK_dIjU/S9BJaX0yaqI/AAAAAAAAD_4/GZhfUKvK588/d/nav_info.png);
}
ul#menusisi .cari a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJejnwlAI/AAAAAAAAEAE/B_LZd63vGeI/d/nav_search.png);
}
ul#menusisi .komentar a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaFyqDGI/AAAAAAAAD_w/pNO6TUSigBg/d/nav_comment.png);
}
ul#menusisi .rssfeed a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaabJhzI/AAAAAAAAEAA/Oo4mhwCwzbI/d/nav_rss.png);
}
ul#menusisi .alat a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJelocqyI/AAAAAAAAEAI/6SmP-UHv-eg/d/nav_tools.png);
}
ul#menusisi .kontak a{
background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaVZkksI/AAAAAAAAD_8/g5fo6OKT5wE/d/nav_mail.png);
}
Langkah 6
Cari kode dibawah ini:
</head>
Langkah 7
Masukan (copypaste) kode jQuery dibawah ini diatas kode pada langkah 6:
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;jquery&quot;, &quot;1.3.2&quot;);
</script>
<script type="text/javascript">
$(function() {
$('#menusisi a').stop().animate({'marginLeft':'-50px'},1000);
$('#menusisi > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-50px'},200);
}
);
});
</script>
Langkah 8
Cari kode dibawah ini:
</body>
Langkah 9
Masukan (copypaste) kode dibawah ini diatas kode pada langkah 8:
<ul id='menusisi'>
<li class='beranda'><a href='LINKANDA' title='Beranda'></a></li>
<li class='tentang'><a href='LINKANDA' title='Tentang'></a></li>
<li class='cari'><a href='LINKANDA' title='Cari'></a></li>
<li class='alat'><a href='LINKANDA' title='Alat'></a></li>
<li class='rssfeed'><a href='LINKANDA' title='RSS Feed'></a></li>
<li class='komentar'><a href='LINKANDA' title='Komentar'></a></li>
<li class='kontak'><a href='LINKANDA' title='Kontak'></a></li>
</ul>
[Baca keterangan untuk memodifikasi menu]
Langkah 10
Simpan template dan preview blog anda...

Keterangan:
  1. Ubahlah LINKANDA sesuai dengan link keinginan anda.
  2. Ubahlah keterangan didalam tag title (misal; title='Beranda' di ubah menjadi title='Home') sesuai dengan keinginan anda.
  3. Perhatikan kode pada Langkah 5 baris 5 yaitu top: 50px; ubahlah nilai 50 untuk menentukan jarak antara bagian atas halaman blog dengan menu.
  4. Perhatikan kode pada Langkah 5 baris 15 yaitu margin-left: -50px; ubahlah nilai -50 untuk mengatur berapa jarak menu yang akan disembunyikan.
  5. Jika nilai -50 diubah (pada keterangan nomor 4) maka nilai -50 pada Pada Langkah 7 baris 7 dan baris 13 juga harus diubah atau disamakan.
  6. Perhatikan kode pada Langkah 5 baris 34, 37, 40, 43, 46, 49, 52 ubahlah URL Icon sesuai dengan icon yang telah anda siapkan.

Catatan kaki:
[1] Sosial Bookmark
[2] Tympanus.net
[3] DryIcons.com
,

Popular Posts