5 CSS & SCRIPT Animate Horizontal Menu

Φίλοι bloggers γεια σας !!! Ενα όμορφο και απλό animate μενού για το blog σας βρήκα, και σας δίνω το κώδικα (εάν σας αρέσει) να το βάλετε στο blog σας... DEMO σας έχω βάλει, (για λίγες ημέρες) για να το δείτε πως λειτουργεί...Εχει τη δυνατότητα αλλαγής χρώματος (με αλλαγή εικόνας), και σας το δίνω σε χρώμα μπλε !!!
1) Ο ΚΩΔΙΚΑΣ css & script: (θα το βάλετε ακριβώς ΕΠΑΝΩ από το </head>)

<style type="text/css">
    #bloggermenu5 h2{display:none}
    #bloggermenu5 ul{background: url("https://lh5.googleusercontent.com/-kypYa9i2qgg/UD8UyrITb6I/AAAAAAAAFXI/bGCpi49mD20/s80/menublue.gif") repeat-x scroll 0 0 transparent;width: 100%;margin: 0;padding: 0;list-style: none;float: left;font-size: 1.1em;}
    #bloggermenu5 ul li{margin: 0;padding: 0;overflow: hidden;float: left;height:40px;}
    #bloggermenu5 ul li a, #bloggermenu5 ul li span { padding: 10px 10px;float:left;text-decoration:none;color: #fff;background: url(https://lh5.googleusercontent.com/-kypYa9i2qgg/UD8UyrITb6I/AAAAAAAAFXI/bGCpi49mD20/s80/menublue.gif) repeat-x;text-transform: uppercase;clear: both;width: 100%;height: 20px;line-height: 20px;}
    #bloggermenu5 ul li a{ color: #555;background-position: left bottom;}
    #bloggermenu5 ul li span{ background-position: left top;}
    </style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script><script type="text/javascript">
    //<![CDATA[
    $(document).ready(function () {
$("#bloggermenu5 ul li").prepend("<span></span>");
$("#bloggermenu5 ul li").each(function () {
   var linkText = $(this).find("a").html();
   $(this).find("span").show().html(linkText)
});
$("#bloggermenu5 ul li").hover(function () {
   $(this).find("span").stop().animate({
marginTop: "-40"
   }, 200)
}, function () {
   $(this).find("span").stop().animate({
marginTop: "0"
   }, 200)
})
    });
    //]]>
</script>

2) O ΚΩΔΙΚΑΣ javascript: (θα το βάλετε σαν gadget επάνω ψηλά)

<div id="bloggermenu5"> <ul id="bloggermenu5"> <li><a href="#"><span>HOME</span></a></li> <li><a href="#"><span>POSTS</span></a></li> <li><a href="#"><span>FACEBOOK</span></a></li> <li><a href="#"><span>TWITTER</span></a></li> <li><a href="#"><span>FRIENDS</span></a></li> <li><a href="#"><span>CONTACT</span></a></li>  <li><a href="#"><span>MAIL</span></a></li> </ul> </div>

ΠΡΟΣΟΧΗ:
***Oσοι έχετε ήδη το συγκεκριμένο .js με τα κόκκινα γράμματα στο κώδικα HTML του blog σας, μη το βάλετε ξανά,  γιατί δεν πρέπει να ξαναμπεί !!! Δηλαδή μη βάλετε τη φράση:   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
***Ο κώδικας που σας δίνω, στο demo που σας παραπέμπω, έχει μπεί όλος σαν gadget...(τα blogs έχουν αυτή τη δυνατότητα να δέχονται όλα τα μέρη του κώδικα στα "κουτάκια" των gadgets...)


ΠΗΓΗ : thanks to : www.way2blogging.org
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}