Γίνετε μέλος του Dr-blogger στο fb.Απλά πατήστε like από κάτω

photto




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'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}
Related Posts Plugin for WordPress, Blogger...
Print Friendly and PDF

5 σχόλια:

εφη καπ είπε...

oi sundesmoi pws mpainoun ? px h selida mou sto facebook na mpei sto eikonidio facebook?

pandelees karagiann είπε...

ναι, λαθος μου που δεν το ανεφερα....ΠΑΝΤΑ στα μενου που παρουσιαζουμε ολοι, το λινκ (συνδεσμος) μπαινει εκει οπου υπαρχει το σημειο # ... δηλαδη στο: <a href="#"> , αντικατάστησε το # με το λινκ που θες να βαλεις

p.Ioannis Kiparissopoulos είπε...

Αγαπητέ Παντελή θερμά συγχαρητήρια για τη δουλεία σου τις συμβουλές που δίνεις σε όλους εμάς. Αυτό το μενού είναι πολλή ωραίο, έχω βάλει ένα μενού από τα παλιότερα που είχες ανεβάσει. Θέλω να βάλω αυτό το μενού αλλά θέλω να το αλλάξω χρώμα, πιο πάνω αναφέρεις (.Έχει τη δυνατότητα αλλαγής χρώματος (με αλλαγή εικόνας), και σας το δίνω σε χρώμα μπλε !!!) τι εννοείς και πως γίνετε αυτό. Θέλω να βάλω ένα χρώμα που να ταιριάζει λίγο με τα χρώματα του blog μου. Αυτό είναι το blog: http://agiosmgefiras.blogspot.gr/ Ευχαριστώ εκ των προτέρων +π.Ιωάννης

pandelees karagiann είπε...

Γιάννη, τα χρωματα που σου ταιριαζουν ειναι κοκκινο, μαυρο...σου εφτιαξα αυτη την εικονα, να αντικαταστησεις σε δυο μεριές του κωδικα (εκει που εχει τη διευθυνση, μα κατάληξη .gif)...η εικονα ειναι αυτη...
https://lh5.googleusercontent.com/-B2cKZfsHx3U/UHU8loepT0I/AAAAAAAAF6U/K8ObMdhm-04/s80/menured.gif
αντικατάστησε την σε 2 μεριές που εχει την αλλη εικονα, στο πρωτο μερος του κώδικα....

p.Ioannis Kiparissopoulos είπε...

Παντελή σ' ευχαριστώ πάρα πολλή, μόλις το έβαλα.