Menu Navigasi Slide Out / Slide Out Navigation

4/29/2011 Blog Tutorial Blogger JQuery Tips Trik Blog Tutorial Blogger Widget
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.

Menu Navigasi Slide Out

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

Artikel Terkait

Previous
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

8 comments

wah-wah makin mantap ajah kang ni blog nya, salut deeh dan kang tukeran link ya

Balas

iya nih,, makin sangat amat mangstrab kang.

Balas

@Aa KelingMakasi sob tas sanjungannya
@Aceh Software StoreMakasi juga sob, Link sudah saya pasang

Balas

kang.. klo buku tamunya pengen kaya blognya kang fatur gmn??

Balas

bang kalo bkin yang kya punya mas gmn?? yang dibawah info berjalan.
plis repli..

Balas

@Mari Bercanda OK Insya Allah nanti saya Posting kalau ada waktu, hehe. makasih tas kunjungannya

Balas