Rabu, 24 November 2010

Tutorial Website :: Membuat Animasi Menu Navigasi

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

Lagi-lagi dan tak bosannya saya posting mengenai JQuery .. Mau bagaimana lagi , otak saya kadung keracunan bahasa scripting tersebut .. Dan kali ini , saya akan menjelaskan cara membuat animasi menu navigasi menggunakan JQuery , html dan css .. Sulitkah ? Tentu saja tidak .. Caranya cukup mudah dan insya allah gampang dimengerti dan di implementasikan oleh agan-agan blogger sekalian .. Jadi tunggu apa lagi ? Oia , sekali lagi saya mengingatkan bila ingin menggunakan JQuery , agan harus download dulu librarynya di jquery.com .. Selalu ada versi yang paling baru dan fiturnya semakin lengkap .. Lepas itu , ayo kita mulai !!!
Membuat animasi menu navigasi yang saya maksudkan ialah , ketika kursor mouse memasuki area menu , maka akan ada tanda panah yang meluncur tepat diatas menu tersebut .. Seperti gambar di atas .. Apa saja persiapannya ? Yuk mari kita bahas satu persatu ..

Pertama , kita buat halaman htmlnya terlebih dahulu ..

<html>
<head>
<title>Animasi Menu Navigasi</title>
<script src="Compressed.js" type="text/javascript" ></script>
<script src="animasiMenu.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="animasiMenu.css" media="screen">
</head>
<body>
<img src="icon1.png" id="gb1"/>
<img src="icon1.png" id="gb2"/>
<img src="icon1.png" id="gb3"/>
<ul id="nav">
    <li><a id="a1" href="#">Beranda</a></li>
    <li><a id="a2" href="#">Profile</a></li>
    <li><a id="a3" href="#">Contact</a></li>
</ul>
</body>
</html>

Terlihat diantara tag <head></head> kita mengimport file external berupa compressed.js yang merupakan library JQuery yang di kompres , animasiMenu.js adalah source code JQuery yang berfungsi menjalankan animasi , dan animasiMenu.css merupakan CSS dari file html tersebut ..
Didalam kode html tersebut , terdapat juga tag <img> yang merupakan syntax untuk menampilkan gambar panah .. Selanjutnya ada tag <ul>(unordered list)  dengan id="nav" yang berfungsi untuk menyusun daftar menu yang akan kita buat ..
Simpan file html tersebut dengan nama index ..

Selanjutnya , kita buat css-nya sebagai berikut ..

#nav {
margin-Top : 110;
margin-Left : 100;
padding : 0;
list-style-type : none;
background:#fff;
float:left;
}

Pada halaman html tersebut terdapat tag<ul> dengan id nav , disinilah kita membuat menu tersebut berposisi horizontal , dengan menggunakan CSS tentunya .. Dan tugas kode diatas untuk melakukannya ..

#nav li{
margin :0;
padding:0;
float:left;
background:url(icon2.png);
}

Kode tersebut adalah untuk mengatur<li> yang merupakan daftar menu untuk ditampilkan ..

#nav a {
float: left;
width: 75px;
text-align: center;
color: #000000;
text-type : bold underline ;
text-decoration: none;
line-height: 2;
border-right: 1px solid #FFF;
}


Adalah kode css yang mengatur tag <a> atau item dari daftar itu sendiri ..

#gb1{
margin-top : 62;
margin-left :-225;
height : 50;
width : 75;
padding:0;
}
#gb2{
margin-top : 62;
margin-left :-150;
height : 50;
width : 75;
padding:0;
}
#gb3{
margin-top : 62;
margin-left :-75;
height : 50;
width : 75;
padding:0;
}
Dan kode terakhir diatas dimaksudkan untuk mengatur tag <img> yang menampilkan gambar panah ..

Okey , ketikan semua kode tersebut pada satu halaman dan simpan dengan nama animasiMenu.css .. Ingat , simpan satu folder dengan file html yang telah di buat sebelumnya ..


Terakhir , kode JQuery tentunya .. Perhatikan kode berikut ..

/*
 * Copyright (c) 2010 Bayu Idham Fathurachman.
 * izin dibawah GNU dan MIT.
 *
 * Info lebih lanjut www.bayuidham.tk
 * Dilarang menghapus tanda ini
 * Hak cipta dilindungi allah SWT
 */
$(document).ready(function(){
    $('#gb1').hide();
    $('#gb2').hide();
    $('#gb3').hide();
    $('#a1').hover(function() {
            $('#gb2').hide();
            $('#gb3').hide();
            $(this).stop().animate({ marginTop: "-7px" }, 200);
            $(this).parent().find("span").stop().animate({ marginTop: "18px", opacity: 0.25 }, 200);
            $('#gb1').slideDown('fast');
           
        },function(){
            $(this).stop().animate({ marginTop: "0px" }, 300);
            $(this).parent().find("span").stop().animate({ marginTop: "1px", opacity: 1 }, 300);
            $('#gb1').slideUp('fast');
        });
    $('#a2').hover(function() {
            $('#gb1').hide();
            $('#gb3').hide();
            $(this).stop().animate({ marginTop: "-7px" }, 200);
            $(this).parent().find("span").stop().animate({ marginTop: "18px", opacity: 0.25 }, 200);
            $('#gb2').slideDown('fast');
        },function(){
            $(this).stop().animate({ marginTop: "0px" }, 300);
            $(this).parent().find("span").stop().animate({ marginTop: "1px", opacity: 1 }, 300);
            $('#gb2').slideUp('fast');
        });
    $('#a3').hover(function() {
            $('#gb2').hide();
            $('#gb1').hide();
            $(this).stop().animate({ marginTop: "-7px" }, 200);
            $(this).parent().find("span").stop().animate({ marginTop: "18px", opacity: 0.25 }, 200);
            $('#gb3').slideDown('fast');
        },function(){
            $(this).stop().animate({ marginTop: "0px" }, 300);
            $(this).parent().find("span").stop().animate({ marginTop: "1px", opacity: 1 }, 300);
            $('#gb3').slideUp('fast');
        });
});


Penjelasan singkatnya kira-kira seperti ini , ketika dokumen telah siap , maka gambar panah menghilang / hide .. Dan saat kursor memasuki area menu , maka akan ada tanda panah meluncur dari atas tepat di menu yang di sorot kursor .. Simpan file tersbut dengan nama animasiMenu.js , tentu saja satu folder dengan halaman html tadi ..
Coba sekarang double klik index yang anda buat tadi , harusnya bila tidak ada kesalahan , maka anda akan menemukan menu navigasi dan ketika anda menyorotnya , akan tampak tanda panah meluncur dari atas ..
Sekian tutorial kali ini , namun kurang afdol kalau saya tidak memperlihatkan demonya ..
Okelah , anda bisa melihat demonya DISINI ..
Kalau demonya saja , mungkin kurang lengkap .. Sekalian saja sama source codenya , silahkan agan-agan download DISINI ..
Hosh , akhirnya beres juga , selamat berkreasi .. Sampai bertemu lagi pada tutorial selanjutnya :)

Simak Juga Tutorial Lainnya:

Proggraming

5 komentar:

Arya mengatakan...

keren bung menu nya! thanks

18 Januari 2011 pukul 04.00
Bayu Idham Fathurachman mengatakan...

wokey , trimakasih :)

24 Januari 2011 pukul 12.44
nurman mengatakan...

gan..klo boleh..ane minta kirimin ebooknya donk..
email ane:near_santri@yahoo.co.id
ane tertarik bgt ama CSS dan jQuery..

sblmnya thank's y gan...

3 Agustus 2011 pukul 21.42
rusmana ali mengatakan...

kang saya lg bikin program ni tapi saya ada kendala bagai mana caranya saya gabungin flash dengan delphi, dan caranya berhentikan animasi ituh tanpa di ulang2.....

12 Agustus 2011 pukul 11.11
Bayu Idham Fathurachman mengatakan...

Ada activex flash yang harus di import.Nanti saya bikin tutorialnya :)

13 Agustus 2011 pukul 12.37

Posting Komentar

Langganan: Posting Komentar (Atom)