Menu Navigasi Slide Out / Slide Out Navigation

Published by Kang Fathur Friday, April 29, 2011

Pada postingan sebelumnya pernah saya membahas tentang 30+ Menu Navigasi Horizontal dengan CSS dan HTML. Yang banyak akan pilihan

Naah, 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 dan lain sebagainya.



Jika sobat ingin melihat Demonya silahkan klik disini atau disini.

OK, mungkin setelah melihat demo di atas para sobat pingin langsung pasang di blog sobat mari kita lanjut ke langkah-langkah sebagai berikut :

1. Seperti biasa Login ke Blogger sobat
   
2. Masuk ke Tata Letak --> Edit HTML
   
3. Kemudian centang "Expand Template Widget"
   
4. Selanjutnya cari kode ]]></b:skin>
   
5. Jika sudah ketemu Masukkan (Copy Paste) kode CSS di bawah ini, tepat di atas kode ]]></b:skin> tadi.
   
   

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

   
   
   
   
6. Langkah selanjutnya cari kode seperti ini </head>
   
7. Setelah ketemu Masukkan kode JQuery di bawah ini tepat di atas kode </head> tadi.
   
   

   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
   <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>

   
   
   
   PERHATIAN!!
   Jika di template sobat sudah pernah dipasang kode yang berwarna merah di atas, sebaiknya kode tersebut tidak usah dipasang
   
   
   
8. Kemudian langkahk yang terakhir sobat cari kode seperti ini </body>
   
9. Setelah ketemu kemudian Masukkan (Copy Paste) kode di bawah ini tepat di atas kode </body> tadi.
   
   

   <ul id='menusisi'>
   <li class='beranda'><a href='LINKSOBAT' title='Beranda'></a></li>
   <li class='tentang'><a href='LINKSOBAT' title='Tentang'></a></li>
   <li class='cari'><a href='LINKSOBAT' title='Cari'></a></li>
   <li class='alat'><a href='LINKANDA' title='Alat'></a></li>
   <li class='rssfeed'><a href='LINKSOBAT' title='RSS Feed'></a></li>
   <li class='komentar'><a href='LINKSOBAT' title='Komentar'></a></li>
   <li class='kontak'><a href='LINKSOBAT' title='Kontak'></a></li>
   </ul>

   
   
   
10. Simpan template sobat dan lihat hasilnya. Selamat mencoba semoga berhasil dan dapat bermanfaat.

KETERANGAN!!

• Ubahlah LINKSOBAT dengan keinginan link Sobat.
  
• Ubahlah keterangan didalam tag title (misal; title='Beranda' di ubah menjadi title='Home') sesuai dengan keinginan anda.

KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI