Membuat Menu JQuery Fixed Navigation By Blogger Note

Pada Tutorial Sebelumnya Saya sudah menerangkan Membuat Sweet Menu Dengan Efek Jquery akan tetapi pada tutorial kali ini saya akan share Membuat Menu JQuery Fixed Navigation, membuatnya cukup mudah lho.., seperti biasa dalam bentuk CSS, saya sebenarnya tidak pintar dengan HTML Dan CSS, tapi untuk mempermudah saya mengigatnya saya hanya mengingat-ngingat Bom, kok bisa ?, caranya ibaratkan aja sobat naruh bom di atas kode ]]></b:skin> atau </head> kalau pemicunya sih saya gk tau he..he..he...,oh iya sampe lupa soal menunya yang mau kita buat, menu ini di desain transparan + melayang di bagian kanan blog untuk demonya klik disini jika sobat ingin membuatnya,sobat bisa menyimak langkah2nya dibawah ini :

Masuk ke rancangan dan pilih Edit HTML

Copy kode jQuery dibawah ini dan paste sebelum atau diatas kode <head>

<link href='https://sites.google.com/site/jayanaktkj/simplepopup/demo.css' media='screen' rel='stylesheet' type='text/css'/>


<link href='https://sites.google.com/site/jayanaktkj/simplepopup/osx.css' media='screen' rel='stylesheet' type='text/css'/>


<link charset='utf-8' href='https://sites.google.com/site/jayanaktkj/fixedmenu/style.css' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-7243260-2']);
_gaq.push(['_trackPageview']);

(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>

Terakhir cari kode <body> dan letakkan kode dibawah ini sebelum atau diatas kode <body>

<div class='header'/>
        <ul id='navigation'>
            <li class='home'><a href='http://musakhairulumam.blogspot.com'><span>Beranda</span></a></li>
            <li class='about'><a href='http://www.blogger.com/profile/07964920939116182697'><span>Tentang</span></a></li>
            <li class='search'><a href='alamat url'><span>Cari</span></a></li>
            <li class='photos'><a href='alamat url'><span>Foto</span></a></li>

            <li class='rssfeed'><a href='alamat url'><span>Rss Feed</span></a></li>
            <li class='podcasts'><a href='alamat url'><span>Podcasts</span></a></li>
            <li class='contact'><a href='alamat url'><span>Kontak</span></a></li>
        </ul>
<script src='http://tympanus.net/Tutorials/FixedNavigationTutorial2/jquery-1.3.2.js' type='text/javascript'/>
        <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>

Jangan lupa untuk di save dan jangan lupa komentarnya ^_^

Blogger Note

Article :

Membuat Menu JQuery Fixed Navigation

3 comments:

Posting Komentar