How to create animated menu bar

Menu bar using java script animation you can see on my blog www.mr-mung.com, there display the menu bar when the touch is very smooth and attractive appearance. but the menubar to keep in mind this will not work on browsers that have java disable scriptnya settings, and other effects to your blog a bit heavy in loadingnya.


Okey, we just learn how to create animated menu bar with this java script:
1. go to admin page blogger
2. select the layout tab
3. Edit template
4. Do not forget, download full template first, this is a precaution to the possibility of errors occur.
5. Copy the following code above Lay </ head>

<link href='http://elearningtik.co.cc/js/chrometheme/chromestyle4.css' rel='stylesheet' type='text/css'/>
<script src='http://mrmung.googlecode.com/files/chrome.js' type='text/javascript'>
/***********************************************
* Chrome CSS Drop Down Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>

6. click the save button
7. Go back to the layout and add the gadget html / javascript right below the header of your blog, then copy the following code:

<div id="chromemenu" class="chromestyle">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#" rel="dropmenu1">Bisnis Online</a></li>
<li><a href="#" rel="dropmenu2">Sosial Networking</a></li>
<li><a href="#" rel="dropmenu3">Login Admin</a></li>
<li><a href="http://www.mr-mung.com/search/label/Free%20Download" rel="dropmenu4">Download</a></li>
<li><a href="http://tutorial.mr-mung.com" rel="dropmenu5">Tutorial</a></li>
</ul>
</div>

<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
<a href="http://bisnis.mr-mung.com/" target="_blank">Jasa Pembuatan Blog</a>
<a href="http://www.mungjava.blogspot.com" target="_blank">Game Java</a>
<a href="http://nuhacom.mr-mung.com" target="_blank">Jual Laptop</a>
<a href="http://333link.mr-mung.com" target="_blank">Get 333 Backlink Blog</a>
</div>


<!--2nd drop down menu -->
<div id="dropmenu2" style="width: 150px;" class="dropmenudiv">
<a href="http://www.facebook.com/mrmung" target="_blank">Facebook</a>
<a href="http://profiles.friendster.com/mrmung" target="_blank">Friendster</a>
<a href="http://www.twitter.com/mrmung" target="_blank">twitter</a>
</div>

<!--3nd drop down menu -->
<div id="dropmenu3" style="width: 150px;" class="dropmenudiv">
<a href="http://mail.mr-mung.com" target="_blank">Mung Mail</a>
<a href="http://blogger.com/home" target="_blank">Blogger</a>
<a href="http://id.webmessenger.yahoo.com" target="_blank">Yahoo! Messenger</a></div>

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>

I copied this code directly from the menu at www.mr-mung.com please your own locker menus available as needed.
 8. click the save button.
 It is recommended to upload their own files menubar support in hosting this animation each, please download the file here.[download]

May this article you want