Membuat Menu Apple Slide Out

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

Tutorial kali ini saya akan membahas tentang Membuat Menu Apple Slide Out. Karena tutorial ini saya buat semudah mungkin, jadi saya harap pembaca bisa mengerti apa yang saya bahas dan saya harap mengerti telah apa yang saya maksud. OK kalau begitu kita langsung saja menuju ke TKP

Menu Apple Slide OutKlik disini untuk melihat demo Menu Apple Slide Out

1. Masuk ke akun blogger anda
2. Klik rancangan, kemudian Edit HTML
3. Pada Edit HTML, centang Expand Template Widget
   Expand Template Widget
4. Tambahkan framework jQuery.
   INGAT, jika pada template anda sudah terdapat framework jQuery, maka kode di bawah ini TIDAK PERLU di tambahkan.
   Jika belum terdapat framework jQuery, maka copy kode di bawah ini

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

kemudian letakkan di atas

</head>

5. Selanjutnya tambahkan script di bawah ini

<link rel="stylesheet" href="http://dl.dropbox.com/u/22738692/MenuAppleSlideOut/css/style.css" type="text/css" charset="utf-8"/>
<script type='text/javascript'> 
$(function() {
    var d=1000;
    $('#menu span').each(function(){
        $(this).stop().animate({
            'top':'-17px'
        },d+=250);
    });

    $('#menu > li').hover(
        function () {
            var $this = $(this);
            $('a',$this).addClass('hover');
            $('span',$this).stop().animate({
                'top':'40px'
            },300).css({
                'zIndex':'10'
            });
        },
        function () {
            var $this = $(this);
            $('a',$this).removeClass('hover');
            $('span',$this).stop().animate({
                'top':'-17px'
            },800).css({
                'zIndex':'-1'
            });
        }
    );
});
</script>

6. Kemudian letakkan di atas

</head>

7. Simpan template
8. Kemudian masuk Elemen Laman, dan pilih Tambah Gadget
9. Setelah itu pilih HTML/Javascript
10. Copy kode ini pada kotak kontent

<div class="navigation">
 <ul class="menu" id="menu">
 <li><span class="ipod"></span><a href="" class="first">Players</a></li>
 <li><span class="video_camera"></span><a href="">Cameras</a></li>
 <li><span class="television"></span><a href="">TVs</a></li>
 <li><span class="monitor"></span><a href="">Screens</a></li>
 <li><span class="toolbox"></span><a href="">Tools</a></li>
 <li><span class="telephone"></span><a href="">Phones</a></li>
 <li><span class="print"></span><a href="" class="last">Printers</a></li>
 </ul>
</div>

11. Kemudian simpan

ٱلۡحَمۡدُ لِلَّهِ رَبِّ ٱلۡعَـٰلَمِينَ

Artikel Terkait