jQuery Animated Navigation Menu

---

Based on wikipedia, jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig. Used by over 31% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today.

Here, i’m gonna show you how to use one of jQuery functions to animate your site navigation menu. The name of the function is .animate(), kindly proceed to their official website to read more about this function. now, let’s proceed to the script, here it is :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
jQuery("#header li").hover(function(){jQuery(this).animate({marginTop: "-6px"}, 250);}, function(){jQuery(this).animate({marginTop: "0px"}, 250);});
}
</script>

Let’s take a look at the script above. The animate function of jQuery will add a dynamic hover event on each li tag on you navigation menu. You can also use another css effect like opacity, or maybe change position, just use your imagination to create another animation effect . Modify the orange part above with the proper value of your navigation menu, change the div tag id or ul tag id according to your site structure.

Live preview of the script above is available here :
Futures Galleria Blog
Notice the left side above navigation menu : Faq | Contact | Register. Simple but quite attractive.

Happy Tweaking

---

3 Responses to “jQuery Animated Navigation Menu”

1. 1
   python schemafuzz Says:
   October 20th, 2010 at 8:55 am

   Halo akang joy….oh ya mohon koreksinya bila ada tutorial saya yang salah ya…btw klo ada info seputar teknik dengan python saya di kasih kabar…..karena python lumayan menarik untuk dipelajari

2. 2
   Joy Says:
   October 22nd, 2010 at 12:52 am

   @^adit
   siap dit, mesti hati2 klo share ttg hacking di host lokal, soalnya rawan suspend, makanya lbh bnyak share soal web development aja di sini.. hihi
   tutorialnya mantap bro, skalian tambahin buat -fuzz sql v4 nya
   lbh bagus lg tambahin ttg cara pembuatan script schemafuzz.py itu sendiri biar bisa create sendiri

3. 3
   Chetaru Says:
   September 15th, 2011 at 1:20 pm

   Hi..
   Thanks for sharing this information and resources it’s really help full for me with the help of this we can improve our designs and development I really inspire with this information thanks