Tech Time: Animated action navigation menu bar

TRANSLATUM

Μία πολύ χρήσιμη online εφαρμογή είναι
το Translatum το οποίο μας βοηθά να μεταφράσουμε λέξεις και κείμενα μέσα από πάρα πολλά λεξικά!Δεν θέλει εγκατάσταση απλά πατήστε στην εικόνα για να μεταφερθείτε στην ιστοσελίδα του Translatum, επιλέξτε

ότι σας ενδιαφέρει και πατήστε Μετάφραση!

Τρίτη 7 Μαρτίου 2017

Animated action navigation menu bar

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε ένα οριζόντιο χρωματιστό
menu bar για τα blog μας!Χωρίς υποκατηγορίες, απλό menu, το οποίο διαθέτει ένα
πολύ ωραίο animated effect με εικόνα, όταν κάνουμε mouseover με τον κέρσορα
του ποντικιού μας!

Δείτε εδώ το DEMO

Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript

και στο παράθυρο που θα ανοίξει κάντε

επικόλληση τον ακόλουθο κώδικα:-->
..............................................................................................................................................................

<style type="text/css">
#avd-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}
#avd-nav li {float: left;}
#avd-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;}
#avd-nav li a span.myname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
#avd-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#avd-nav li a:hover {cursor: pointer;}
#avd-nav li a:hover img {top: -85px;}
#avd-nav li a:hover .myname {top: 85px;}
#avd-nav li:nth-child(1) a {background: #0088cc;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}
#avd-nav li:nth-child(2) a {background: #cc6600;}
#avd-nav li:nth-child(3) a {background: #00cccc;}
#avd-nav li:nth-child(4) a {background: #00cc66;}
#avd-nav li:nth-child(5) a {background: #00cc66;}
border-radius: 0 5px 5px 0;border-right: 1px solid #555;}
</style>
<div id="avd-nav">
<li> <a href="#"><span class="myname">ΟΝΟΜΑΣΙΑ</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwA_0TAgYooAVyXc7kIYf1CjHtfDe9nqocWE2xkmqvxaQddggX4N_PekcwK9RbSOkcAQvVXdlYfkzbpTLDHEbZ0ynVohnupNzIjYtY0UAfz6ti700Yx4qYoEK_a0Hg9c9-4hgs5wHePHQ/s1600/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="#"> <span class="myname">ΟΝΟΜΑΣΙΑ</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwA_0TAgYooAVyXc7kIYf1CjHtfDe9nqocWE2xkmqvxaQddggX4N_PekcwK9RbSOkcAQvVXdlYfkzbpTLDHEbZ0ynVohnupNzIjYtY0UAfz6ti700Yx4qYoEK_a0Hg9c9-4hgs5wHePHQ/s1600/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="#"> <span class="myname"> ΟΝΟΜΑΣΙΑ</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwA_0TAgYooAVyXc7kIYf1CjHtfDe9nqocWE2xkmqvxaQddggX4N_PekcwK9RbSOkcAQvVXdlYfkzbpTLDHEbZ0ynVohnupNzIjYtY0UAfz6ti700Yx4qYoEK_a0Hg9c9-4hgs5wHePHQ/s1600/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="#"> <span class="myname">ΟΝΟΜΑΣΙΑ</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwA_0TAgYooAVyXc7kIYf1CjHtfDe9nqocWE2xkmqvxaQddggX4N_PekcwK9RbSOkcAQvVXdlYfkzbpTLDHEbZ0ynVohnupNzIjYtY0UAfz6ti700Yx4qYoEK_a0Hg9c9-4hgs5wHePHQ/s1600/Arrows-Up-circular-icon.png" /> </a> </li> </div>

................................................................................................................................................................
ΑΛΛΑΓΕΣ

#-->Εδώ βάζετε τα urls των δικών σας διευθύνσεων!

ΟΝΟΜΑΣΙΑ-->Εδώ μπαίνει το όνομα της ετικέτας σας!

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwA_0TAgYooAVyXc7kIYf1CjHtfDe9nqocWE2xkmqvxaQddggX4N_PekcwK9RbSOkcAQvVXdlYfkzbpTLDHEbZ0ynVohnupNzIjYtY0UAfz6ti700Yx4qYoEK_a0Hg9c9-4hgs5wHePHQ/s1600/Arrows-Up-circular-icon.png--> Όποιος θέλει αλλάζει και την εικόνα με μία δικιά του!

Μόλις τελειώσετε Αποθήκευση και έτοιμοι!

Καλή επιτυχία!!!

Πηγή κώδικα
thanks to avdhootblogger.com

Edit by

Σας άρεσε το άρθρο? Διαδώστε το!

If you enjoyed this Post Please take 5 Seconds to share it and Join Us Our Latest Updates By Email and Social Networks.