Tab Menu Vertikal Dengan Efek Slide Out

Pada kesempatan kali ini saya insyaAllah akan mengetengahkan cara membuat tab menu vertikal dengan efek slide out. Tab menu vertikal ini mempunyai efek slide yang halus, dimana efek akan terlihat ketika kita mengarahkan pointer mouse (mouse hover) pada menu, maka menu akan bergerak keluar (slide out) dan secara perlahan akan kembali ke posisi semula jika kita menggeser mouse keluar dari area menu. Posisi dari tab menu inipun bersifat tetap walaupun kita menggulung layar dengan scroll naik ataupun turun. Kita dapat menggunakan tab menu vertikal ini dengan berbagai keperluan, meletakkan link share social bookmark atau halaman mandiri blog dll.

Baiklah kita langsung pada langkah-langkah cara membuat tab menu navigasi horizontal dengan efek slide out:

1. Login ke akun anda

2. Pada dasbor >> Klik Template >> edit HTML (expan template widget)

3. Kemudian cari kode ]]></b:skin>

4. Letakkan kode berikut ini diatas kode ]]></b:skin>

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);

}

5. Setelah itu cari kode </head>

6. Lalu letakkan kode berikut diatas kode </head>

<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>

7. Kemudian cari lagi kode </body>

8. Lalu letakkan kode berikut ini diatas kode </body>

<ul id='menusisi'>

<li class='beranda'><a href='LINKANDA' title='Home'></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>

9. Simpan dan lihat hasilnya

Keterangan

1. Gantilah LINKANDA sesuai dengan link keinginan anda.

2. Gantilah  keterangan didalam tag title (misal; title='Beranda' di ganti 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.

Anda baru saja membaca artikel yang berkategori JQuery / Vertikal Menu dengan judul Tab Menu Vertikal Dengan Efek Slide Out. Anda bisa bookmark halaman ini dengan URL http://jquerytuts.blogspot.com/2012/11/tab-menu-vertikal-dengan-efek-slide-out.html. Terima kasih!

Ditulis oleh: Unknown - Kamis, 08 November 2012