Kamis, 18 November 2010

Tutorial Website :: Membuat Menu Mengambang Dengan JQuery

Posted by Bayu Idham Fathurachman Label: , , | 0 komentar

Pada postingan sebelumnya , saya membahas mengenai mempercantik website dengan JQuery.Nah,pada postingan kali ini saya akan memberikan sedikit tutorial agar menu yang terdapat pada website kita mengambang ketika disorot.Contohnya sepeti gambar disamping atau yang terdapat pada  weblog saya.
Diharapkan dari pembaca sedikitnya mengerti mengenai html,css dan JQuery.Karena kemampuan tersebut berguna untuk menganalisa code yang akan saya bahas.Ayo kita mulai.

Ketikan code berikut diantara tag <head></head>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

Lalu ketikan kode selanjutnya sebagai berikut

<script type='text/javascript'>
//<![CDATA[

$(document).ready(function() {
$("#catmenu li").append("<span></span>");   
$("#catmenu a").hover(function() {
            $(this).stop().animate({ marginTop: "-10px" }, 200);
            $(this).parent().find("span").stop().animate({ marginTop: "18px", opacity: 0.25 }, 200);
        },function(){
            $(this).stop().animate({ marginTop: "0px" }, 300);
            $(this).parent().find("span").stop().animate({ marginTop: "1px", opacity: 1 }, 300);
        });
});

//]]>
</script>

Yang perlu diperhatikan adalah id CSS #catmenu.Bila sebelumnya anda sudah memiliki id CSS untuk mengatur menu anda,gunakanlah id tersebut.Bila belum ada,anda harus membuat CSS-nya terlebih dahulu.Dan untuk mengimplementasikannya pada html adalah sebagai berikut

<div id='catmenucontainer'>

<div id='catmenu'>

<ul>

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='http://www.bayuidham.tk/p/products.html' title='Products dari kami'>Products</a>
<ul class='children'>
<li><a href='http://www.ziddu.com/download/12472282/DaftarHargaWebsiteMax-PrimeEnterprise.pdf.html' title='Daftar Harga Website Yang Kami Buat'>Daftar Harga Website</a></li>
</ul>
</li>
<li><a href='http://www.bayuidham.tk' title='Free Download'>Free Download</a>
<ul class='children'>
<li><a href='http://www.bayuidham.tk/p/delphi-7-galwek.html' title='Ebook Tentang Delphi 7'>Delphi 7 Ebook</a></li>
<li><a href='http://www.bayuidham.tk/p/source-code-delphi-7.html' title='Source Code Delphi 7'>Source Code Delphi 7</a></li>
</ul>
</li>
<li><a href='http://www.bayuidham.tk' title='Konten Blog'>Konten</a>
<ul class='children'>
<li><a href='http://www.bayuidham.tk/search/label/Proggraming' title='Kategori Proggraming'>Proggraming</a></li>
<li><a href='http://www.bayuidham.tk/search/label/Design%20Grafis' title='Kategori Design Grafis'>Design Grafis</a></li>
</ul>
</li>
<li><a href='http://qbons.host22.com/widget/galeri' title='My Galery'>My Galery</a></li>
<li><a href='http://www.bayuidham.tk/p/about-me.html' title='About Me'>About Me</a></li>
</ul>

</div>

</div>

Untuk  perbandingan dengan CSS yang anda miliki,perhatikan code CSS berikut

#catmenucontainer{width:1000px;margin:0 auto;height:29px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzThUhNT6IqtuYjLGfMOoKNm9TvEKMoHpFbs96T0lT3Q51jL_fQcRg10bgId_1ACVCgpgdWFygVhC1EPCMXnGffrSrftTUfZnU0gUq9sbDKQAUlsn9kWoPPTawSJO2hNswkzJz52FrVFFn/) repeat-x;display:block;padding:0 0 0 0;font:14px &quot;Century gothic&quot;,verdana,Arial,sans-serif;font-weight:normal;border-top:1px solid #686D6F}
#catmenu,#catmenu ul{margin:0 5px;padding:0;list-style:none;height:29px}
#catmenu a{color:#999;display:block;font-weight:normal;padding:4px 10px 6px 10px;text-decoration:none}
#catmenu a:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ5PJ_2GDBQtRs0T3sK_fIJla8xVaaJDxc8ZJyIoBw3PZM1EPKg-JRbfG4UQgxU88aMdXphUrhN2x93rhX2Zml-hd5MtT2U10lZaUGggStTYDrjvWPnFnt5uenOl8J_-KqQkbJBaBY_2o/s800/catmenu.PNG) repeat-x;color:#fff;display:block;text-decoration:none}
#catmenu li{float:left;margin:0;padding:0}
#catmenu li li{float:left;margin:0 0 0 0;padding:0;width:130px}
#catmenu li li a,#catmenu li li a:link,#catmenu li li a:visited{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzThUhNT6IqtuYjLGfMOoKNm9TvEKMoHpFbs96T0lT3Q51jL_fQcRg10bgId_1ACVCgpgdWFygVhC1EPCMXnGffrSrftTUfZnU0gUq9sbDKQAUlsn9kWoPPTawSJO2hNswkzJz52FrVFFn/) repeat-x;width:150px;float:none;margin:0;padding:4px 10px 5px 10px;color:#E8EBEE;border-bottom:1px solid #2C3133;text-decoration:none}
#catmenu li li a:hover,#catmenu li li a:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ5PJ_2GDBQtRs0T3sK_fIJla8xVaaJDxc8ZJyIoBw3PZM1EPKg-JRbfG4UQgxU88aMdXphUrhN2x93rhX2Zml-hd5MtT2U10lZaUGggStTYDrjvWPnFnt5uenOl8J_-KqQkbJBaBY_2o/s800/catmenu.PNG) repeat-x;width:150px;float:none;margin:0;padding:4px 10px 5px 10px;color:#fff;border-bottom:1px solid #2C3133}
#catmenu li ul{position:absolute;width:10em;left:-999em;z-index:1}
#catmenu li:hover ul{left:auto;display:block}
#catmenu li:hover ul,#catmenu li.sfhover ul{left:auto}

Yuph dan bimsalabim , menu navigasi anda akan mengambang ketika di sorot.Cukup mudah bukan?
Sekian untuk postingan kali ini,semoga bermanfaat.Bila ada yang kurang difahami silahkan tinggalkan komentar,terimakasih.

Simak Juga Tutorial Lainnya:

Proggraming

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)