Membuat Horizontal Menu Slide Out Fixed Menggunakan jQuery Dan Css Pada Blogger

Menu navigasi ini bisa dibilang cukup populer serta menarik, dan tentunya dengan mengaplikasikan menu navigasi slide out ini dapat mempercantik tampilan pada blog anda. Efek dari menu ini cukup keren karena menggunakan fungsi jQuery dan Css, menu akan tampil seperti setengah tersembunyi dan animasi menu akan sliding ke luar ketika dilewati kursor atau ketika kursor diarahkan ke pada bagian-bagian menu, dan akan kembali tampak setengah tersembunyi ketika tidak terkena kursor. dan Fixed artinya tetap terlihat meskipun anda menggulung layar sampai ke layar paling bawah. Anda bisa lihat untuk Demonya disini.

Bagaimana Cara Membuat Navigasi Menu Slide Out Horizontal Fixed ?

Mari kita mulai pembuatannya :

1. Silahkan Login ke Blogger Dasbor anda
2. Klik Rancangan ---> Edit Html
3. Check List pada kotak Expand Template Widget
4. Cari ]]></b:skin> dengan menekan Ctrl+f
5. Letakkan kode dibawah ini sebelum kode di atas

/*----------------------------------------------------
{--------}  Menu {--------}
----------------------------------------------------*/
ul#navigation li {
    width: 103px;
    display:inline;
    float:left;
}
ul#navigation li a {
    display: block;
    float: left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color: #E7F2F9;
    background-repeat: no-repeat;
    background-position: 50% 10px;
    border: 1px solid #BDDCEF;
    text-decoration: none;
    text-align: center;
    padding-top: 80px;
}
ul#navigation li a {
    display: block;
    float:left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color:#E7F2F9;
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #BDDCEF;
    text-decoration:none;
    text-align:center;
    padding-top:80px;
    -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;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navigation li a:hover{
     background-color:#CAE3F2;
}
ul#navigation li a span{
    letter-spacing:2px;
    font-size:11px;
    color:#60ACD8;
    text-shadow: 0 -1px 1px #fff;
}

6. Sekarang kita akan menambahkan background image ke dalam bagian-bagian menunya :

ul#navigation .home a{
    background-image: url(http://img163.imageshack.us/img163/1473/homehc.png);
}
ul#navigation .about a      {
    background-image: url(http://img156.imageshack.us/img156/4176/idcardqx.png);
}
ul#navigation .search a      {
    background-image: url(http://img21.imageshack.us/img21/7365/searchl.png);
}
ul#navigation .podcasts a      {
    background-image: url(http://img834.imageshack.us/img834/8079/camerae.png);
}
ul#navigation .rssfeed a   {
    background-image: url(http://img263.imageshack.us/img263/5871/rssd.png);
}
ul#navigation .photos a     {
    background-image: url(http://img508.imageshack.us/img508/2226/ipodl.png);
}
ul#navigation .contact a    {
    background-image: url(http://img808.imageshack.us/img808/5498/mailos.png);
}

Pada bagian ini bisa lihat terdapat link alamat URL image yang ditambahkan untuk nantinya akan ditampilkan pada tiap-tiap bagian menu.
Anda bisa saja menambahkan navigasi lain ke dalam menu ini, misalnya : ingin menambahkan submenu Download, anda harus pula menambahkan alamat URL imagenya dari menu Download tersebut, contohnya seperti di bawah ini :

ul#navigation .download a    {
    background-image: url(link to the image);
}

Pada bagian

link to the image

isi dengan alamat URL image anda.
7. Sekarang cari tag </head> kemudian letakkan kode di bawah ini di atas tag tersebut

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

8. Langkah selanjutnya cari </body> dan sebelum kode di atas letakan kode di bawah ini:

<ul id="navigation">
 <li class="home"><a href=""><span>Home</span></a></li>
 <li class="about"><a href=""><span>About</span></a></li>
 <li class="search"><a href=""><span>Search</span></a></li>
 <li class="photos"><a href=""><span>Photos</span></a></li>
 <li class="rssfeed"><a href=""><span>Rss Feed</span></a></li>
 <li class="podcasts"><a href=""><span>Podcasts</span></a></li>
 <li class="contact"><a href=""><span>Contact</span></a></li>
</ul>

Isi pada bagian href dengan alamat URL yang ingin anda arahkan ketika menekan menu tersebut, penempatannya diantara tanda kutip. Contoh:

<li class="home"><a href="http://blogandos.blogspot.com"><span>Home</span></a></li>

Pada bagian :

http://blogandos.blogspot.com

Ganti dengan alamat URL Blog anda.
Dan jika tadi anda menambahkan menu Download maka pada bagian ini anda juga harus tambahkan perintah "class" sama halnya dengan yang dicontohkan di atas, misalnya seperti di bawah ini:

<li class='download'><a href="your link" title="Download"></a></li>

9. Simplan Template Anda dan Silahkan lihat hasilnya
Semoga Trik Membuat Horizontal Menu Slide Out Fixed Menggunakan jQuery Dan Css Pada Blogger ini bermanfaat untuk anda semua.