Blogger Note

Article :

Membuat Menu JQuery Fixed Navigation

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 :
  • Login ke blogger
  • 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'/>

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

<!-- JS files are loaded at the bottom of the page -->
<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([&#39;_setAccount&#39;, &#39;UA-7243260-2&#39;]);
  _gaq.push([&#39;_trackPageview&#39;]);

  (function() {
    var ga = document.createElement(&#39;script&#39;); ga.type = &#39;text/javascript&#39;; ga.async = true;
    ga.src = (&#39;https:&#39; == document.location.protocol ? &#39;https://ssl&#39; : &#39;http://www&#39;) + &#39;.google-analytics.com/ga.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[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;
                $(&#39;#navigation a&#39;).each(function(){
                    $(this).stop().animate({
                        &#39;marginTop&#39;:&#39;-80px&#39;
                    },d+=150);
                });

                $(&#39;#navigation &gt; li&#39;).hover(
                function () {
                    $(&#39;a&#39;,$(this)).stop().animate({
                        &#39;marginTop&#39;:&#39;-2px&#39;
                    },200);
                },
                function () {
                    $(&#39;a&#39;,$(this)).stop().animate({
                        &#39;marginTop&#39;:&#39;-80px&#39;
                    },200);
                }
            );
            });
        </script>


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

4 comments:

14 Agustus 2011 pukul 06.47

bisa liat demony gk sob?

14 Agustus 2011 pukul 07.09

To Cek Info's Author:Dah ada sob di artikelnya

21 Agustus 2011 pukul 04.23

dulu uda ane coba trus dcopot kreasi model2 lain, hehe

21 Agustus 2011 pukul 06.03

@Cek Info: hahaha...

Posting Komentar